Edit on GitHub

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>

Keep informed

Sign up to our newsletter to receive updates on Winter CMS releases, new features in the works, and much more.
We'll never spam or give this address away.

Latest blog post

Winter: 16 Months Later

Published July 14, 2022
With the first year of Winter behind us, let's take a look at what we were able to achieve in 2021.

View this post Read all posts

Latest Winter CMS release

v1.2.1

Released October 20, 2022
14 UX/UI Improvements, 25 API Changes, 33 Bug Fixes, 4 Security Improvements, 5 Translation Improvements, 1 Performance Improvement, 2 Community Improvements, 2 Dependencies, 0 New Contributors * @cstorus made their first contribution in https://github.com/wintercms/winter/pull/616 * @simonmannsfeld made their first contribution in https://github.com/wintercms/winter/pull/623 * @quangtrongonline made their first contribution in https://github.com/wintercms/winter/pull/636 * @nathanlesage made their first contribution in https://github.com/wintercms/winter/pull/665 * @vllvll made their first contribution in https://github.com/wintercms/winter/pull/669 * @robertalexa made their first contribution in https://github.com/wintercms/winter/pull/668 * @iamyigitkoc made their first contribution in https://github.com/wintercms/winter/pull/624 * @hecc127 made their first contribution in https://github.com/wintercms/winter/pull/682 * @prsuhas made their first contribution in https://github.com/wintercms/winter/pull/723

View details View all releases