Complete Form Testing Plan #FunctionalTesting
Tags: testing, beginners, productivity, tutorial
Published: 2020-03-07 18:07:06

---
title: Complete Form Testing Plan #FunctionalTesting
published: true
description: The ultimate guide for a killer form testing! Check out best practices and a test plan to follow for successful functional testing.
tags: testing, beginners, productivity, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/f7xco8pef66zn3koq124.png
---

<p>Forms are one of the major parts of a website. Forms are used to <strong>receive information from the users and interact with them</strong>. 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?</p>
<h3><span style="color: #800000;">Layout</span></h3>
<p>Is the form layout <strong>easy to understand</strong> 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 <strong>easy to use</strong>.</p>
<h3><span style="color: #800000;">Fields</span></h3>
<p>A form can consist of different type of fields, such as basic <a href="https://bugmagnet.org/" target="_blank" rel="noopener">text fields</a>, dropdown select fields, checkboxes, and radio buttons. You should check every field to ensure that you can <strong>select the correct option</strong> 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.</p>
<h3><span style="color: #800000;">Required* Fields</span></h3>
<p>In most of the cases, forms will include a number of <strong>mandatory</strong> (required) fields. These fields should be clearly marked as required with an <strong>asterisk*</strong>. It will be easier for users to distinguish which fields are mandatory to fill and which are optional.</p>
<p>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.</p>
<h3><span style="color: #800000;">Validation Matters</span></h3>
<p>There are 2 validation types: validation <strong>on submit and inline</strong> validation.</p>
<p>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 <strong>better practice</strong> for increasing the conversion rates.</p>
<h3><span style="color: #800000;">The Input Validation</span></h3>
<p>It is very useful there is input validation in some fields, for example in <strong>telephone number or email address</strong> 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 <strong>discourage</strong> 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.</p>
<h3><span style="color: #800000;">Validation Messages</span></h3>
<p>Every validation message should be <strong>helpful</strong> 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 <strong>informative</strong> and appropriately worded.</p>
<h3><span style="color: #800000;">Tab, Tab, Tab</span></h3>
<p>Another factor to check when testing a form is the <strong>tab order</strong> (an important factor for <strong>accessibility</strong>). 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.</p>
<h3><span style="color: #800000;">The Tooltips</span></h3>
<p>Many form fields have tooltips to present some helpful information to the users when <strong>hovering</strong> 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.</p>
<h3><span style="color: #800000;">Prefilled and Preselected Fields</span></h3>
<p>In some cases, there will be prefilled fields <strong>automatically</strong>, 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.</p>
<h3><span style="color: #800000;">The Thank you Message</span></h3>
<p>Check if when submitting the form, a thanks page or message is displayed, making clear to the users that the <strong>submission was successful</strong>. 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 <strong>follow-up actions</strong> 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.</p>
<h3><span style="color: #800000;">Go Mobile</span></h3>
<p>Last, but not least, make sure you test your forms using <strong>popular devices</strong>, 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.</p>
<h3><span style="color: #800000;">At the End</span></h3>
<p>As the last shot, test <strong>what happens when a user submits the form</strong>. Do you receive an email with all the details of the form? Is the data correctly saved in the database?</p>
<p>If you have completed all the above steps, then you can <strong>rest assured</strong> you did an excellent form testing!</p>
<p>Congratulations!</p>
<p></p>
<p></p>