How To Hide Optional Fields on Long Web Forms

By Donovan Myers
Posted on Sep 29, 2007

Do you have a long form on your web site that might be intimidating to users? After all, you only require about half of the fields on your form? Now you can use XHTML and JavaScript to allow your users to hide the optional fields and only fill out what is required of them. Heck, you could even hide the optional fields by default.

To begin, we'll need a properly formatted XHTML form example:

<form id="form" method="post" action="" >
  <fieldset>
    <legend>Personal information</legend>
    <div class="required">
      <label for="first">First name:</label>
      <input name="first" id="first" type="text" />
    </div>
    <div class="optional">
      <label for="mid">Middle name:</label>
      <input id="mid" name="mid" type="text" />
    </div>
    <div class="required">
      <label for="last">Last name:</label>
      <input name="last" id="last" type="text" />
    </div>
  </fieldset>
  <fieldset>
    <legend>Address </legend>
    <div class="optional">
      <label for="address">Address:</label>
      <input id="address" name="address" type="text" />
    </div>
    <div class="optional">
      <label for="city">City:</label>
      <input id="city" name="city" type="text" />
    </div>
    <div class="optional">
      <label for="state">State:</label>
      <input id="state" name="state" type="text" />
    </div>
    <div class="required">
      <label for="zip">Zip:</label>
      <input id="zip" name="zip" type="text" />
    </div>
  </fieldset>
  <fieldset>
    <legend>Contact information</legend>
    <div class="required">
      <label for="phone">Phone:</label>
      <input id="phone" name="phone" type="text" />
    </div>
    <div class="optional">
      <label for="fax">Fax:</label>
      <input id="fax" name="fax" type="text" />
    </div>
    <div class="optional">
      <label for="cell">Cell:</label>
      <input id="cell" name="cell" type="text" />
    </div>
    <div class="required">
      <label for="email">Email:</label>
      <input id="email" name="email" type="text" />
      </div>
    <div class="optional">
      <label for="url">URL:</label>
      <input id="url" name="url" type="text" />
    </div>
    <div class="optional">
      <label for="comments">Comments:</label>
      <textarea name="comments" cols="10" rows="5" id="comments"></textarea>
    </div>
  </fieldset>
  <div id="submit" class="required">
    <input name="Submit" value="Submit" type="submit" />
  </div>
</form>

Now that we have a properly formatted form, we can write our JavaScript to run through the document and change the display property of the divs that we've assigned the class of "optional." Ex.:

<div class="optional">
  <label for="cell">Cell:</label>
  <input id="cell" name="cell" type="text" />
</div>

You'll notice that all of the other form field's divs are assigned the class of "required." Ex.:

<div class="required">
  <label for="last">Last name:</label>
  <input name="last" id="last" type="text" />
</div>

So, here is our JavaScript that will check to make sure our browser can get elements by their ID, set a temporary variable to hold all of the divs on the page, then run through them and set their display property to "none" if they are optional. If the optional divs are already hidden, this same function is used to show them again with the display property of "block."

<script language="JavaScript">
function toggleFields() {
  if(document.getElementById) {
    var tmp = document.getElementsByTagName('div');
    for (var i=0; i<tmp.length; i++) {
      if(tmp[i].className == 'optional') {
        tmp[i].style.display = (tmp[i].style.display == 'none') ? 'block' : 'none';
      }
    }
  }
}
</script>

The final piece of our html is a link that will actually call the toggleFields function:

<p><a href="#" onclick="javascript:toggleFields();">Toggle optional fields</a></p>

Now, if you've put it all together and loaded up your page, you'll notice that your fields will toggle when you click the "Toggle optional fields" link. This will make your form less intimidating and speed up the time it takes for your users to enter their data.

Taking it further

You could add a CSS Style Sheet to your document to make the required field's labels appear bold, while the optional fields would be a slightly lighter shade of gray. You can even use the before attribute (does not work in IE (yet)) to insert an asterisk (*) before the required fields:

<style type="text/css">
.required label {
  font-weight: bold;
}
fieldset div.required label:before {
  content: "* "; /* not supported in IE */
}
.optional label {
  color: #666;
}
</style>

View a finished working example of this form.