Forms are one of the major parts of a website. Forms are used to receive information from the users and interact with them. As testers, we need to make sure that the forms of a website work properly and are easy to use. If a form works well, we can receive valuable information from users, while interaction with them becomes much better. So, what we should check when testing forms?
Layout
Is the form layout easy to understand and logical? Are the labels appropriate for each field? A too complicated form with many fields will discourage a great number of users. A higher submission rate can be achieved when the fields are less and look easy to use.
Fields
A form can consist of different type of fields, such as basic text fields, dropdown select fields, checkboxes, and radio buttons. You should check every field to ensure that you can select the correct option or enter text. Since many forms contain a lot of field types, it’s necessary to test your form under different browsers and devices to make sure they look OK everywhere.
Required* Fields
In most of the cases, forms will include a number of mandatory (required) fields. These fields should be clearly marked as required with an asterisk*. It will be easier for users to distinguish which fields are mandatory to fill and which are optional.
A rule of thumb is to click on the Submit button, before filling in any field. In this way, you will have an immediate look at how the validation behaves and check if the mandatory fields are properly highlighted.
Validation Matters
There are 2 validation types: validation on submit and inline validation.
On submit validation occurs when users submit the form. In this case, any problems will be visible to the user when they click on the Submit button. On the other hand, inline validation occurs when users enter data into the form. Generally, inline validation is considered a better practice for increasing the conversion rates.
The Input Validation
It is very useful there is input validation in some fields, for example in telephone number or email address fields. To prevent the submission of wrong data, a helpful validation message can save the situation, kindly warning the users that they have entered incorrect data. Very specific requirements or generic validation messages can actually discourage the users to submit the form. Additionally, you can check text fields if allow different punctuation marks, as some forms block certain characters due to security reasons.
Validation Messages
Every validation message should be helpful for the users, informing them what the problem is. Check that each validation message describes correctly the error. Pay attention to how the message is written; it should be informative and appropriately worded.
Tab, Tab, Tab
Another factor to check when testing a form is the tab order (an important factor for accessibility). A large number of users use the tab key to go to the next field. Check if there is a correct sequence when tabbing through a form and that the cursor goes to the next field properly. You can also check if completing the whole form is possible when only using the keyboard.
The Tooltips
Many form fields have tooltips to present some helpful information to the users when hovering over an icon or over the field itself. If the form you test has tooltips, make sure that every tooltip message is informative and easy to understand.
Prefilled and Preselected Fields
In some cases, there will be prefilled fields automatically, for example when you are a registered user in an e-shop and want to place an order, certain fields can be already filled, such as name and email address. When you test a similar functionality, check also that preselected or prefilled data are correct.
The Thank you Message
Check if when submitting the form, a thanks page or message is displayed, making clear to the users that the submission was successful. Please note that if the form requires a further action after its submission, for example, to confirm a registration via a confirmation link, there should be a related message, informing the users for the follow-up actions they need to complete. If this is the case, you can also check the follow-up email to ensure if the email is properly sent and the links work correctly.
Go Mobile
Last, but not least, make sure you test your forms using popular devices, iOS, and Android. Filling in a form with a mobile device can be tricky sometimes, especially if there are many fields, including checkboxes and radio buttons. Ensure that all field types behave correctly when mobile and you can easily fill in the form and submit.
At the End
As the last shot, test what happens when a user submits the form. Do you receive an email with all the details of the form? Is the data correctly saved in the database?
If you have completed all the above steps, then you can rest assured you did an excellent form testing!
Congratulations!
Top comments (0)