Template Form Styling

This is an old form style. For the newer, theme-able forms, check out the Zenform.

The UNL Templates have an optional CSS file which can be used to style HTML forms]].

To use the forms css component, add the following link within the editable area of the <head> of your document:

<link rel="stylesheet" type="text/css" href="/wdn/templates_3.0/css/content/forms.css" />

For the styling to function correctly, your form markup must follow some simple guidelines:

Use fieldsets, legends, and ordered lists for form elements. The following is a sample HTML form. <source lang="xml"> <form action="?" method="post">

   <fieldset>
       <legend>Sample Form Content</legend>

<label for="name" class="element">*Name</label>
<input id="name" name="name" type="text" />
<label for="email" class="element">*Email</label>
<input id="email" name="email" type="text" />
<label class="element">I Can Has Cheezburger?</label>
<input name="helpful" value="1" type="radio" id="cheezyes" /><label for="cheezyes">Yes</label><input name="helpful" value="0" type="radio" id="cheezno" /><label for="cheezno">No</label>
<label for="helpful_comments" class="element">In what way?</label>
<textarea id="helpful_comments" name="helpful_comments" cols="60" rows="5"></textarea>
<label for="submit" class="element"> </label>
<input id="submit" name="submit" value="Submit" type="submit" />
<label class="element"> </label>* denotes required field

   </fieldset>

</form> </source>