Feature - Form

A Bootstrap form example demonstrating form components within the feature composition pattern

What It Does#

Demonstrates a Bootstrap form within the feature composition pattern

The Form feature provides a starting point for adding HTML forms to your pages. The included example is a contact form built with Bootstrap's form components, demonstrating how form layouts, inputs, selects, checkboxes, and buttons work within the block grid system.

This is currently a hardcoded example form — it demonstrates the visual pattern rather than providing dynamic form functionality. For production forms, you would typically integrate with Umbraco Forms or a custom form handler.

This is a demonstration feature — for real forms, consider integrating Umbraco Forms.

How It Works#

A hardcoded Bootstrap form using CSS Grid layout within the feature wrapper

The view uses _Layout_Features.cshtml as its layout, so the form gets the standard feature header with title and description. The form itself uses Bootstrap's CSS Grid classes (g-col-md-6, g-col-12, etc.) for a responsive two-column layout on wider screens that stacks to single column on mobile.

The form markup includes standard Bootstrap form components: text inputs, email and telephone inputs, a select dropdown, a checkbox, and a submit button. All styled using Bootstrap's form-control, form-select, and form-check classes.

As a hardcoded example, this feature has no configurable properties beyond the standard feature title and description. The featureComponentNoConfiguration composition is used.

The form uses Bootstrap's CSS Grid for layout, matching the grid system used by the block grid areas.

Example Form#

A contact form built with Bootstrap's form components

featureFormContactUs.cshtml#

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<FeatureFormContactUs>>

@{
    Layout = "_Layout_Features.cshtml";
}

<form class="grid g-3">
    <div class="g-col-md-6">
        <label for="inputEmail4" class="form-label">First Name</label>
        <input type="text" class="form-control" placeholder="Allen" aria-label="First name">
    </div>
    <div class="g-col-md-6">
        <label for="inputEmail4" class="form-label">Last Name</label>
        <input type="text" class="form-control" placeholder="Key" aria-label="Last name">
    </div>
    <div class="g-col-md-6">
        <label for="inputEmail4" class="form-label">Email</label>
        <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="g-col-md-6">
        <label for="inputTelephone4" class="form-label">Telephone</label>
        <input type="tel" class="form-control" id="inputTelephone4">
    </div>
    <div class="g-col-12">
        <label for="inputAddress" class="form-label">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
    </div>
    <div class="g-col-12">
        <label for="inputAddress2" class="form-label">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
    </div>
    <div class="g-col-md-6">
        <label for="inputCity" class="form-label">City</label>
        <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="g-col-md-4">
        <label for="inputState" class="form-label">State</label>
        <select id="inputState" class="form-select">
            <option selected>Choose...</option>
            <option>...</option>
        </select>
    </div>
    <div class="g-col-md-2">
        <label for="inputZip" class="form-label">Zip</label>
        <input type="text" class="form-control" id="inputZip">
    </div>
    <div class="g-col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
                No spam please
            </label>
        </div>
    </div>
    <div class="g-col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>