Form

An form example from the Bootstrap website

Example Form

This is an example form using from the Bootstrap website and is hard coded

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>