Content of online forms

​The title of the form should clearly indicate the action that the form is designed to fulfll. For example 'Apply for free school meals' is an appropriate title.

​A form should have an summary (usually no more than one sentence) at the top of the first page. This tells the customer what the purpose of the form is and who should be filling it in. This is particularly useful for customers who may land directly on the form from a search engine.

To place text in the 'summary' style you will need to use the following html:

<p class="introtext"> insert intro text here </p>

The introduction should contain information that the customer will need to know before completing the form. If there is a large amount of information then this should be placed on the relevant web page and the form should provide a link back to that page.

You should also let customers know what will be required to complete the form. For example, if the form requires a National Insurance Number then this information should be included on the first page of the form.

​Headings should be used to break up the form. Questions that are related to each other should be grouped together and placed under a heading.

An example of why this is important is shown by the questions relating to parent’s or carer’s details below. Our brains tend to assume that items that are grouped together must be related to one another. The repetition of parent or carer shown below is unnecessary and will contribute to form fatigue, increasing the chance of the customer dropping out of the form.

Form example - headings.png 

Use headings to group relevant fields together. This way there is no need to keep repeating what the fields are referring to – in this case the parent or carer’s details. This will allow the form labels to be shorter and therefore easier to read.

Parent or carer’s details
First name
Last name
Relationship to child
Telephone number
Alternative telephone number
Email address

​If a form asks for a customer’s name it should do so in the format of: First name, Last name. This provides more reliable data then just asking for ‘name’.

Avoid asking for people’s title. It’s extra work for customers and you are forcing them to potentially reveal their gender and marital status, which they may not want to do.

If you have to use a title field, make it an optional free-text field and not a drop-down list. Predicting the range of titles your customers will have is impossible, and you’ll always end up upsetting someone.

Address should be asked for in the format of:

Address line 1 -Mandatory
Address line 2
Address line 3
Town
Postcode - Mandatory

​The confirmation page should be used to tell the customer what will happen next and when. The page should provide the customer with a reference number and allow them to print the form. This page could also include contact details for the service and links to information or services that customers are likely to need next.

The submission message should be styled using HTML as shown below:

<p>Thank you for submitting {form name} /applying for {what they've applied for}</p>

<H2>What happens next?</H2>

<p>{Text telling the customer what happens next}</p>

<p>Your reference for this form is: {reference number}</p>

DOCUMENT UPLOAD.jpg 

The user upload field allows the form filler to attach documents to the form, such as supporting statements or photos.

FirmStep has an email limitation and so the total size of all documents attached to a form cannot exceed 5MB or 5000KB.

User upload field properties 

The maximum size of each file can be assigned (e.g. if there are 3 upload fields this should be set to 1333KB)

The Allowed File Types field will only accept 1 file type. If you needs to accept multiple file types, for example you need to accept pictures in a jpg, png, bmp, jif etc, select other and enter them in the field that appears with a “|”(pipe, above the forward slash, such as jpg|png|bmp.

Either the name or the help text should inform the user of the maximum file size.

The email message is used to notify the customer that the service have received their form submission. The notification should provide the customer with a reference number. This message can also include contact details for the service and links to information or services that customers are likely to need next.

The email notification should be styled using HTML as shown below:

<p>Thank you for submitting {form name} /applying for {what they've applied for}</p>

<p>{Text telling the customer what happens next}</p>

<p>Your reference for this form is: {reference number}</p>

​When you make changes to an online form that will alter the appearance of the form you must remember to 'reset print settings' once you're done.

When you do this the PDF version of the form that is available if someone wants to print off the data will be the same as the form itself. All of the features you had updated in the form will be updated in the PDF.

To reset the print settings you need to be in the design of the form. Then you hover over the 'print' option in the toolbar along the top of the form. If you select 'Reset layout' this will refresh the layout of the PDF making everything in the PDF match the form.