Warning: include(1.x/nav-section.php): failed to open stream: No such file or directory in /ip/iucommsg/wwws/_php/nav-section.php on line 2

Warning: include(): Failed opening '1.x/nav-section.php' for inclusion (include_path='.:/ip/iucommsg/wwws:/ip/pagriet/lib:/ip/iucommsg/wwws/_includes:/ip/iucommsg/wwws/_shared-sections:/ip/iucommsg/wwws/_php') in /ip/iucommsg/wwws/_php/nav-section.php on line 2

Form Items

Add a form to your site

Forms allow users to fill out and submit information through your site. They eliminate the need for PDFs or contact information, and they're easy for both parties to use.

Input fields vary depending on the types of information you're requesting from the user. These are the types of fields we offer in our forms, with code snippets for each.

Text field

Show/hide markup
<div class="form-item">

    <div class="form-item-label">
        <label for="text-input">Sample text input:</label>
    </div>

    <div class="form-item-input">
        <input type="text" name="text-input" id="text-input">
    </div>

</div>

Password field

Show/hide markup
<div class="form-item">

    <div class="form-item-label">
        <label for="password">Sample password input:</label>
    </div>

    <div class="form-item-input">
        <input type="password" name="password" id="password">
    </div>

</div>

Textarea

Show/hide markup
<div class="form-item">

    <div class="form-item-label">
        <label for="textarea-one">Sample textarea:</label>
    </div>

    <div class="form-item-input">
        <textarea id="textarea-one" name="comment" rows="10"></textarea>
    </div>

</div>

Select box

Show/hide markup
<div class="form-item">

    <div class="form-item-label">
        <label for="select-item-one">Select an option:</label>
    </div>

    <div class="form-item-input">
        <select name="select-item-one" id="select-item-one">
            <option selected="" value="item-1">Item 1</option>
            <option value="item-2">Item 2</option>
            <option value="item-3">Item 3</option>
            <option value="item-4">Item 4</option>
            <option value="item-5">Item 5</option>
            <option value="item-6">Item 6</option>
            <option value="item-7">Item 7</option>
            <option value="item-8">Item 8</option>
        </select>
    </div>

</div>

Checkboxes

Check these out:

Show/hide markup
<div class="form-item">

    <div class="form-item-label">
        <h4 class="label">Check these out:</h4>
    </div>

    <div class="form-item-input">
        <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
        <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
    </div>

</div>

Radio buttons

Choose your favorite:
Show/hide markup
<div class="form-item">

    <fieldset class="bare">
    <legend class="label">Choose your favorite:</legend>

    <div class="form-item-input">
        <input type="radio" name="color" value="Red" id="colorRed"><label for="colorRed">Red</label>
        <input type="radio" name="color" value="Blue" id="colorBlue"><label for="colorBlue">Blue</label>
    </div>
    </fieldset>

</div>