Overall form structure & design
Optimising Web Form Autofill
Introduction Autofill is a very popular browser function that helps a user filling in a form with less effort, as it automatically fills in web form fields with stored data, like first name, last name, email, phone number, etc. It can even be used ...
Implementing a honeypot field to block spam bots
Adding a honeypot field to your HTML forms is a simple, effective way to catch and block automated spambots without impacting real users. Below is an example Subscribe form that uses a hidden honeypot field named language, along with two CSS ...
Form field identification
One of the requirements for form fields to be recognised by Exatom is that they have one or both of the following HTML attributes: name="your-form-field-name" id="your-form-field-id" This uniquely identifies each field and allow our analytics engine ...
The HTML form element
Forms are more advanced than ever and modern technology does not require the HTML <form> element for your form to be functional. However it's important to add the semantically correct <form> container element to all your forms. One of the reasons is ...
Align your field labels top-left
Aligning labels above fields on the left-hand side decreases form completion time. This is because it requires fewer visual fixations, as you only need to view top-down instead of left-right and then top-down.
Remove 'nice to have' question fields
Every additional field in your form is making you losing you leads, roughly 10% per field. So consider whether each question justifies the incremental loss in leads or opt-ins. Make a clear distinction between 'nice to have' and 'need-to-have' ...
Single-step forms versus multi-step forms
Splitting your forms into two or three steps will almost always increase form completion. There are three reasons why multi-step forms work well: The first impression is less intimidating than a long form with lots of question fields. By asking for ...