Web forms often ask users for both essential and non-essential (marketing purposes and research) information. Long and complicated forms can often slow down the progress through a web site and in the case of e-commerce, can seriously hinder the sales process.
Wouldn't it be a cool idea to give users the option to hide these optional fields at their own discretion, and with a clever use of Javascript, the DOM and some CSS we can.
We'll make a semantic and accessible form with only a sprinkling of additional mark-up. We'll add minimal CSS to maximum effect and provide users with a method for removing optional fields. We'll also ensure that the form 'works' for users whose browsers or user-agents do not support Javascript or CSS, ensuring that the form is as accessible as possible. Our form will also have a complete separation of content, presentation and behavior, the approach that we always take with our standards-based, accessible e-commerce application at Karova.
Before we crack on, here a sneaky peak at the finished result.
Mark-up
First we'll set up a basic form (a contact form would be a nice example) which will contain structured fieldsets, legends and labels.
<form id="example-form" method="post" action="">
<fieldset>
<legend></legend>
<label></label>
<input />
<br />
Etc.
</fieldset>
Etc.
<input type="submit" name="Submit" value="Submit">
</form>
You'll notice that we've added <br /> tags after each form element. These are not semantically necessary, but will tidy up the layout when viewing without style-sheets. If you're not worried about an unstyled layout, these can safely be removed.
Enabling the field toggling
To enable the field toggling, we'll enclose optional fields and respective labels in divs with a class="fm-optional"
<div class="fm-optional">
<label for="fm-forename">First name</label>
<input type="text" name="fm-forename" id="fm-forename" />
<br />
</div>
We'll now add an empty paragraph with a unique id above the form, this will become our toggle switch a little later on.
<p id="linkContainer"></p>
What about 'required' fields?
Although we will use CSS to visually identify all required fields, such presentation is useless to text browsers or screen-readers. Whilst generated content would be the sole preferred solution, the lack of support in Internet Explorer requires that we add "(Required)" to each required field's label tag.
<div>
<label for="fm-surname">Surname (Required)</label>
<input type="text" name="fm-surname" id="fm-surname" />
<br />
</div>
That's it! A basic contact form that contains only a smattering of additional mark-up and where the class and id names relate to content, rather than presentation or behavior.
Form CSS
We'll start by applying styles to the required fields. (All fields are designated as required unless we tell them to be otherwise.) We'll add a red border to input boxes and select menus.
fieldset div {
margin : 0;
padding : 0;
}
fieldset div input {
width: 200px; /* Let's not worry about box model issues */
border : 1px solid #900;
padding : 1px;
}
fieldset div select {
width: 200px;
border : 1px solid #900;
padding : 1px;
}
To further notify users that a form element is a required field, we'll add a :before pseudo class to the label tags for browsers other than Internet Explorer.
fieldset div label:before {
content: "* ";
}
Now we'll address the styling of the optional fields which have all been given a class name of "fm-optional". We'll first remove the pseudo class content, then give optional form inputs a grey border.
fieldset div.fm-optional {
display : block; /* Default display option for optional divs */
}
fieldset div.fm-optional label:before {
content: ""; /* Remove asterisk before form labels */
}
.fm-optional input {
border : 1px solid #ccc; /* Give optional fields a grey border */
}
Now, add your own styling of fieldsets, legends or buttons to match your design layouts and our styled contact form is almost complete.
Adding the behavior
First we'll make use of that empty place holder <p id="linkContainer"></p> which we made earlier. The cool part about this script, is that by using the DOM, the anchor and link text are only created if Javascript is enabled.
In the script, we'll first generate the link text that is displayed as the page loads.
toggle.appendChild(document.createTextNode('Remove optional fields?'));
Then we generate the 'Display' and 'Remove' fields link text.
this.firstChild.nodeValue = (linkText == 'Remove optional fields?') ?
'Display optional fields?' : 'Remove optional fields?';
Finally we'll set the class name for all optional fields to 'fm-optional'.
if(tmp[i].className == 'fm-optional')
{
tmp[i].style.display = (tmp[i].style.display == 'none')
? 'block' : 'none';
}
Summary
"Voila!", a highly usable and accessible (it even works in JAWS!) form which enables users to switch off optional fields, speeding up online transactions. Take another look at the completed form.
Comments