Form

Types

<form class="form-elements" role="form">
    <div class="form-group span-left">
        <label>First name</label>
        <input type="text" name="" value="" class="form-control" />
    </div>

    <div class="form-group span-right">
        <label>Last name</label>
        <input type="text" name="" value="" class="form-control" />
    </div>

    <div class="form-group span-full">
        <label>Address</label>
        <input type="text" name="" value="" class="form-control" />
    </div>
</form>

Complete example

<!-- Form Elements -->
<form class="form-elements" role="form">

    <!-- Text Input (Left) -->
    <div class="form-group text-field span-left is-required">
        <label>Input Left</label>
        <input type="text" name="" value="" class="form-control" />
         <p class="help-block">Example below help text here.</p>
    </div>

    <!-- Text Input (Right) -->
    <div class="form-group text-field span-right is-required">
        <label>Input Right</label>
        <input type="text" name="" value="" class="form-control" />
        <p class="help-block">Example below help text here.</p>
    </div>

    <!-- Text Input (Full) -->
    <div class="form-group text-field span-full is-required">
        <label>Input Full</label>
        <p class="help-block before-field">Example above help text here.</p>
        <input type="text" name="" value="" class="form-control" />
    </div>

    <!-- Drop down -->
    <div class="form-group dropdown-field span-left">
        <label>Drop Down</label>
        <select class="form-control custom-select">
            <option selected="selected" value="2">Approved</option>
            <option value="3">Deleted</option>
            <option value="1">New</option>
        </select>
    </div>

    <!-- Grouped Drop down -->
    <div class="form-group dropdown-field span-right">
        <label>Grouped Drop Down</label>
        <select class="form-control custom-select">
            <optgroup label="NFC EAST">
                <option>Dallas Cowboys</option>
                <option>New York Giants</option>
                <option>Philadelphia Eagles</option>
                <option>Washington Redskins</option>
            </optgroup><optgroup>
            </optgroup><optgroup label="NFC NORTH">
                <option>Chicago Bears</option>
                <option>Detroit Lions</option>
                <option>Green Bay Packers</option>
                <option>Minnesota Vikings</option>
            </optgroup>
            <optgroup label="NFC SOUTH">
                <option>Atlanta Falcons</option>
                <option>Carolina Panthers</option>
                <option>New Orleans Saints</option>
                <option>Tampa Bay Buccaneers</option>
            </optgroup>
            <optgroup label="NFC WEST">
                <option>Arizona Cardinals</option>
                <option>St. Louis Rams</option>
                <option>San Francisco 49ers</option>
                <option>Seattle Seahawks</option>
            </optgroup>
            <optgroup label="AFC EAST">
                <option>Buffalo Bills</option>
                <option>Miami Dolphins</option>
                <option>New England Patriots</option>
                <option>New York Jets</option>
            </optgroup>
            <optgroup label="AFC NORTH">
                <option>Baltimore Ravens</option>
                <option>Cincinnati Bengals</option>
                <option>Cleveland Browns</option>
                <option>Pittsburgh Steelers</option>
            </optgroup>
            <optgroup label="AFC SOUTH">
                <option>Houston Texans</option>
                <option>Indianapolis Colts</option>
                <option>Jacksonville Jaguars</option>
                <option>Tennessee Titans</option>
            </optgroup>
            <optgroup label="AFC WEST">
                <option>Denver Broncos</option>
                <option>Kansas City Chiefs</option>
                <option>Oakland Raiders</option>
                <option>San Diego Chargers</option>
            </optgroup>
        </select>
    </div>

    <!-- Checkbox -->
    <div class="form-group checkbox-field span-left is-required">
        <div class="checkbox custom-checkbox">
            <input name="checkbox" value="1" type="checkbox" id="checkbox_1">
            <label for="checkbox_1">Enable Googie Berry Power-up</label>
            <p class="help-block">Use this checkbox to enable the Googie Berry power-up specifically for this page. You can configure the Googie Berry power-up on the System Settings and Dashboard page.</p>
        </div>
    </div>

    <!-- Switcher -->
    <div class="form-group switch-field span-right">
        <div class="field-switch">
            <label>Would you like fries with that?</label>
            <p class="help-block">Use this checkbox to enable the Googie Berry power-up specifically for this page. You can configure the Googie Berry power-up on the System Settings and Dashboard page.</p>
        </div>
        <label class="custom-switch">
            <input type="checkbox" />
            <span><span>On</span><span>Off</span></span>
            <a class="slide-button"></a>
        </label>
    </div>

    <!-- Radio List -->
    <div class="form-group radio-field span-left is-required">
        <label>Radio List</label>
        <p class="help-block before-field">Where should you propose to your beautiful girl?</p>

        <div class="radio custom-radio">
            <input name="radio" value="1" type="radio" id="radio_1">
            <label for="radio_1">Paris</label>
            <p class="help-block">Do not send new comment notifications.</p>
        </div>
        <div class="radio custom-radio">
            <input checked="checked" name="radio" value="2" type="radio" id="radio_2">
            <label for="radio_2">Dubai</label>
            <p class="help-block">Send new comment notifications only to post author.</p>
        </div>
        <div class="radio custom-radio">
            <input name="radio" value="3" type="radio" id="radio_3">
            <label for="radio_3">New Zealand</label>
            <p class="help-block">Notify all users who have permissions to receive blog notifications.</p>
        </div>
    </div>

    <!-- Checkbox List -->
    <div class="form-group checkboxlist-field span-right is-required">
        <label>Checkbox List</label>
        <p class="help-block before-field">What cars would you like in your garage?</p>

        <div class="checkbox custom-checkbox">
            <input id="checkbox-example1" name="checkbox" value="1" type="checkbox">
            <label class="choice" for="checkbox-example1"> Dodge Viper</label>
            <p class="help-block">Do not send new comment notifications.</p>
        </div>
        <div class="checkbox custom-checkbox">
            <input checked="checked" id="checkbox-example2" name="checkbox" value="2" type="checkbox">
            <label class="choice" for="checkbox-example2"> GM Corvette</label>
            <p class="help-block">Send new comment notifications only to post author.</p>
        </div>
        <div class="checkbox custom-checkbox">
            <input id="checkbox-example3" name="checkbox" value="3" type="checkbox">
            <label class="choice" for="checkbox-example3"> Porsche Boxter</label>
            <p class="help-block">Notify all users who have permissions to receive blog notifications.</p>
        </div>
    </div>

</form>