Forms on your site should help the user achieve something. To send you a message, to register, to sign up for your newsletter. Usually, filling out a form is the last step in the user’s journey. Of course, there are cases in which it is the first step. Including on social networks, and also in Google Ads, there is an advertisement with which you can lead the so-called leads or potential customers to a short form to fill out and with which they demonstrate interest in your products or services.
Step 1
Show the submit button. There are several options for implementing this step. You could show the button at the bottom of the form, as well as divide the form into several steps, each of which should have its own “Continue” button or something to that effect.
Of course, the second option is useful and is used more often for very long forms, as well as for the so-called “Carts”, where the first step shows the content, the second step specifies the preferred delivery address, and the third step sends the order. In the case of the forms discussed in this article, it is a good idea to place the button just below them.
Step 2
In case your site takes longer to load or the form that the user fills out has to make an external connection (to an API, for example), show the user that the button has registered the click and the site is loading.
NB! It is also a good idea to change the color of the button when the mouse is placed on top, before the click.
Step 3
In case the form is filled out correctly and the system has accepted the message, it is appropriate to show this to the user.
It is assumed that the green background of the feedback is the correct one for a successfully completed task.
Step 4
If there is an error, you also need to show this to the user. Sometimes things don’t work exactly as expected. Packets are lost, the internet connection is lost, the user has already registered but forgot and is trying to do it again with the same email address.
As everyone knows, red is the color for negative feedback. Its shade and saturation depend on you and your brand, but in case of an error, red is the most appropriate color.
Step 5
Less serious errors can also occur. For example, incorrect data entered by the user. In such a case, there is no need for large messages. Simply indicate what the error is below or above the field in which there is a gap. Again, it is advisable that the color be red.
It is equally important to make the form on your site so that in case of invalid information, it is not submitted, but gives the user the opportunity to correct it. Be careful with what criteria you set for “correct” and “incorrect” information, as sometimes this can lead to a situation in which a real customer, with correct data, fails to submit the form.
