Basic/Simplified Form with Validation

This form is derived from the old forms, but styled to look like Fusion's forms. It has been simplified and styled on the actual elements as much as possible so to lessen the amount of divs we use. [skip to demo]

Guidelines:

General

• One form per page
• The form must have a recipient email

If you are using this pattern as a guide and re-formatting an old form (or if you've copied another form to create a new form) please ensure you do the following inclusive of the below instructions:

• Update any reference to 'wikmail' in the code so it says 'willimail'
• Remove any hidden formdata fields that looks like this:
  <input name="_surv_code" type="hidden" value="2BD8D374-84EA-11E0-A035-567B2A55AA29">
  
  If you don't remove it - you will likely be submitting multiple forms into the one formdata survey and making a rather big mess of your form/survey results. If you would like a new formdata code for compiling submissions into the one CSV or into one area to download them all please contact us.

Layout/style

• The form must have an id of 'cssform' and class of 'no-uniform'
• Checkboxes must be surrounded by a table for styling purposes. This also allows for two column layout for checkboxes.
• Alignment of label element is 200px this can be overridden locally if neccessary by adding:
  <style>#cssform label{width:150px!important;} </style>

Because the form doesn't dynamically style checkboxes or radio buttons, we use two jquery plugins instead, fileinput and custom-select.

Validation

Forms use two types of validation. JavaScript validation, and server side validation for those who don't run JavaScript.

JavaScript Validation

• Add class='required' to input fields to make them mantatory. A red asterisk will automatically attach to a required fields label. If it doesn't appear you may have placed an element incorrectly.
• For a custom error message, add title='please enter a valid password' etc. to input fields
• Ensure the main email field has name="email" and any field that requires someone to enter an email address should have a class of 'email'.
  N.B. If you wish for the person's main email to appear in the form results and not as the 'sender' (which is what happens if you name it 'email') then don't name the field 'email' and just give it a class of 'email' and name it something like 'Email Address'.
• Select drop downs that require a selection, need the initially selected <option> tag to have value="".
  Eg: <option value="">Please Select</option>
• Checkbox/Radio Button Groups - if the user has to choose at least ONE item in the group, you only need to give the first input field a class of 'required'. If you give them all a class of required, then all of the fields in that group would be seen as required.

Server Side Validation

For all fields given a class of 'required' (see JavaScript validation above), you need to add each required fields 'name' to the list of values in the following hidden input field which is included in the pattern code below:
<input name="required" type="hidden" value="firstname,surname,email,phone,contact-method,foundout,subject,resume,comments">

Dependencies

<!--WFINC="virtual(/global/v/redesign1/js/jquery/current/plugins/forms/standard-form.html;no_collect=1)" -->

Is all you need at the top of the form page - this must be inserted as the first line of code on the page. It includes all the dependencies such as style sheets and jQuery plugins. All you need to do then is copy this form's code, and edit to suit. The appended ';no_collect=1' is there to ensure if you use any local styling to alter the label widths within the page, then it is not overridden.

Demo:

Additional Information, Hints and Tips

• Make sure to check in IE before uploading - drop down lists and other elements may not format correctly if you have missed out some styling.
• If a drop down is at the bottom of the page in IE, you probably haven't got the wrapping div or classing setup correctly on the select box - copy the above code for the select drop down and try it again.
• If you are receiving a lot of spam you may want to think about asking us to implement a CAPTCHA.

For additional information and options please see the Online Forms section in webguide.