Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Forms, Template 4

Other Links

Note: These styles apply to Template 4 pages. Here's a page showing how form elements look in Template 3. The default form changed from Template 3.2.1.

Use this style of form to create nice simple forms with CSS.

This form also demonstrates some HTML5 elements. See the anti-spam feature for a server-side validator.

This form doesn't send, it's just an example showing the different form inputs you can use.

Contact EPA Web Design
  • How old are you?

How-To

  1. The styles are dependent upon several elements and one class:
    • <label>
    • <input>
    • An unordered list with each label and input inside a list item
    • class="form" on the form element
  2. The JS, as written in this example, is dependent upon the ID of the form: contact_form
  3. The label element improves accessibility. Click on the words next to the boxes—the cursor gets placed inside the appropriate input box.
  4. HTML5 only: To make a field required, add required="required" to the input tag. If you're using the client-side validator, this required attribute will work as well even in browsers that don't understand HTML 5.

Here's the code for the HTML.

HTML

<form id="contact_form" class="form" method="post" action="#">
  <fieldset>
    <legend>Contact EPA Web Design</legend>
    <ul>
      <li>
        <label for="name"><em>*</em>Name:</label>
        <input class="text" type="text" id="name" name="Name" placeholder="Your name" required="required" minlength="4" />
      </li>
      <li>
        <label for="email">Email:</label>
        <input class="text" type="email" id="email" name="Email" placeholder="you@example.com" />
      </li>
      <li>
        <label for="url-input"><em>*</em>URL:</label>
        <input class="text" type="url" id="url-input" name="URL" placeholder="http://example.com/" required="required" />
      </li>
      <li>
        <label for="state">State:</label>
        <select name="state" id="state">
          <option value="00">Select ...</option>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
        </select>
      </li>
      <li>
        <label class="check" for="mailing-list">Would you like to join our mailing list?</label>
        <input class="check radio" type="checkbox" checked="checked" id="mailing-list" value="y" />
      </li>
      <li>How old are you?
        <input class="check radio" type="radio" id="g25_30" name="age" />
        <label for="g25_30" class="check">25&ndash;30</label>
        <input class="check radio" type="radio" id="g31_35" name="age" />
        <label for="g31_35" class="check">31&ndash;35</label>
        <input class="check radio" type="radio" id="g36_40" name="age" />
        <label for="g36_40" class="check">36&ndash;40</label>
      </li>
      <li>
        <label for="userword"><em>*</em>Help us stop spam by typing in the word <b>human</b>:</label>
        <input class="text" type="text" name="UserWord" id="userword" required="required" data-equals="Word" />
      </li>
      <li>
        <label for="message">Message:</label>
        <textarea id="message" name="Message" cols="50" rows="5"></textarea>
      </li>
      <li>
        <input id="submit" type="submit" value="Send comments" />
        <input type="hidden" name="tssms" value="xxxxxx" />
        <input type="hidden" name="mailtofile" value="xxxxxx" />
        <input type="hidden" name="Subject" value="xxxxxx" />
        <input type="hidden" name="Next" value="" />
        <input type="hidden" name="Word" value="human" />
        <input type="hidden" name="Error" value="" />
        <input type="hidden" name="SingleLine" value="Yes" />
        <input type="hidden" name="NoDisplay" value="Yes" />
      </li>
    </ul>
  </fieldset>
</form>

Top of Page

For help with your epa.gov web design, contact the Web Template Workgroup.

Jump to main content.