Forms are a key part of any website and so making sure your forms work properly and are easy to fill in improves your conversion rates.
There are a lot of detailed aspects that you can test with forms and so the forms testing checklist is broken down into a number of areas.
First of all, check that the layout of the form is easy to understand, as a complicated form or one with lots of fields will be off putting for the majority of users.
Forms will achieve a higher submission rate if they have fewer fields and are well laid out and look easy to complete.
Forms are often made up of a variety of different types of fields, from basic text fields through to dropdown select fields, radio buttons and checkboxes.
It is useful just to run through each field to make sure that you can enter text or select the correct option from each field.
A lot of forms use stylised form elements and so these need to be tested to make sure that they can be filled in or selected correctly across different browsers and mobile devices.
A number of fields will often be required or mandatory and these should be clearly noted with an asterisk. There should also be a statement that fields marked with an asterisk are required. This makes it easier for users to understand which fields they have to fill in and which are optional.
When testing, before filling in any field, click on the Submit button to check that the form validation does highlight the required fields correctly and that there are asterisks against each required field.
There are 2 types of validation, inline or on submit.
Inline validation is performed as you enter details into the form and it is generally recognised that inline validation is preferred for better conversion rates.
On submit validation takes place when the form is submitted and so if there are any problems with any of the fields then this feedback isn’t given to the user until they click on the Submit button.
It is helpful if forms validate the input on some fields, such as email address fields or telephone number fields. If an incorrectly formatted email address is entered into the email address field then a well worded validation message is helpful to the user that the email address has been entered incorrectly. Likewise, it is possible to ensure only numbers are entered into a telephone number field.
However, some forms can be over zealous in this respect and actually prevent users from submitting a form because of a very specific requirement on a field combined with an unhelpful validation message.
Therefore, check what happens if you input text into fields that may expect a number or incorrect email addresses into email address fields. Also check entering punctuation characters into comments or large text fields, as some forms actually block certain characters from being entered due to potential security risks.
Any validation message display next to a field should be helpful to the user and inform them what the problem is. Check that validation messages correctly describe the problem, such as whether the field is required or whether the input is incorrect (but the message should be worded in a nice way).
Imagine you are a user, would you understand all the validation messages that are displayed?
Other Validation Elements
Some forms give you a little tick when a field has been completed successfully or a cross if a field has not been completed successfully.
As you test, make sure that the correct ticks or crosses are displayed based on what you have entered (or indeed if you have entered anything). There is no point displaying a green tick next to a required field if you haven’t entered anything into that field.
Form Tab Order
Many users fill in a form by using the tab key on a keyboard to tab to the next field. This is also important for accessibility. Check that you can tab through a form in sequence and that the cursor is placed into the next field correctly.
You can also check to make sure you can complete the whole form and submit it just by using your keyboard.
Some forms have tooltips or help information that appears by hovering over each field or by hovering over an icon next to the field.
If your form has these, check that each tooltip appears correctly and that the tooltip message is easy to understand.
Some forms will prefill certain fields automatically, such as if you have clicked on a link to enquire about a product or service, the resulting form may have that product or service preselected in the relevant field.
Similarly, if you have a member area and a member clicks on a contact form, their details may already be filled in for the relevant fields, such as name and email address.
If you have any of this functionality in your site then check that the relevant details are filled in or preselected, as anything that cuts down on the user having to complete a field will help to increase the conversion rate for that form.
Once the form has submitted, check that a thanks page is displayed to the user with a relevant thank you message.
Some forms will email a confirmation to the user that completed the form, thanking them for their submission. If the form requires a follow up action, such as a registration form, then there should be an email confirmation message containing details of what the follow up action is, such as clicking on a validation link to confirm the registration.
If the confirmation email is a html email then it is a good idea to complete this test a number of times across different email clients to make sure that the confirmation email displays correctly and that any links within the email work correctly across Gmail, Yahoo Mail, etc.
What should also happen when a user completes a form is that a form submission email should be sent to you (or the operator of the website) with all the details of the form submission, including all the fields that were filled in. It is helpful if this form submission email is laid out in an easy to read format, as whoever picks up on the form submissions will appreciate that.
There could be further actions when a form is completed, such as saving the form data into a database or possibly an integration with an email marketing or CRM system. These aspects should be tested to make sure that the form data is saved correctly or does find its way across to the email marketing or CRM software.
Browser Testing Forms
Form layouts can often get broken in different browsers, as can any inline validation messages so it is important to test your forms in each major browser.
It is also possible for forms to not submit at all in certain browsers or not submit if certain required fields have not been completed.
Mobile testing of forms
Test your forms on mobile devices including iPad, iPhone and Android.
This is where you’ll notice how difficult it can be to complete some forms on a mobile device, especially if there are a lot of fields.
If you have any form elements such as radio buttons or checkboxes, make sure you can actually press on them easily. If you get fed up when testing the form then your users will probably get fed up filling in the form.
More Forms Testing
There are more aspects to testing forms not mentioned above, including accessibility, security and more usability.
We’ll cover those areas in a Forms checklist update.