Forms are an essential part of any online business with almost every website design including one of the various types. Whether your site is looking for a simple newsletter sign up or email collection to a more complex data transfer system, it’s vital to your operations that all your forms function well, are compelling and easy to use. Most businesses will use form completion as a key performance indicator of their success so if you find your conversions dropping, it may be due to poor form practices.
Filling in a form can often be the final step of a user’s journey on your site and the last interaction they have so will leave a lasting impression on them. If your forms provide a negative experience for the user, they won’t be filled out, thus due to some simple errors, you may lose a potential sale and even customer! In this blog, we’ll illustrate how to avoid this situation and create a great online form.
It’s important to note what type of form you’re looking to design:
Contact Forms – So people can get in touch
Registration Forms – For signing up for events or services
Lead Generation Forms – Designed to capture emails or other information
Order & Payment Forms – To complete a purchase order
Account Sign Up – Create a profile on a site
Here, we will review the 6 important features to include when implementing online forms.
One of the major crimes of poor form design is not plainly showing the user what the expected data is you’re wanting them to input. An example of poor design would be having labels within the fields that disappear as the text is written. While this could look like a modern sleek design, it could lead to users potentially forgetting what information they’ve been asked for and becoming frustrated by the form. Bold, clear labels above the fields are the best method for a successful form and one of the easiest to get right. Test your form on a colleague to quickly determine whether your form is intuitive enough for a user to immediately fill the form with the appropriate data. Check out our UX Design Mistakes to Avoid for advice on fonts and other design themes.
Another common labelling mistake is not indicating which of the fields are required to be filled. Often a longer form will have optional fields to allow the user to provide extra information such as alternative phone numbers, preferences, and comments to gather a wider source of data. If a user feels like they are required to fill out all the fields this may get frustrating, especially if they consider some of the data to be unnecessary (like providing a phone number to receive a newsletter). The most used method in this instance is to add an asterisk to the labels so you can make the required fields more obvious but you can also call out or highlight the specific data field you require completing.
Continuing from the idea that potential customers will be frustrated with a long form that only requires some data inputs, you might actually need all that information to provide your service. Businesses offering financial services or highly important exchanges often call for a considerable amount of data to ensure smooth operations. Ultimately, providing a lot of data is best for both parties but it will be taxing filling field after field. Here we recommend that your forms are only as deep as they need to be so to not discourage a user from filling the whole document out. A sign up to a newsletter doesn’t need much more than a name and email address whereas an insurance comparison requires a hefty amount of data.
Limit the number of fields and data inputs for your form to provide the best experience for your users. Firstly, if your field has a set of options to be selected, keep that number to 6 or fewer on your page. If you must use more than 6 (like addresses), consider using a drop-down menu to condense the information you’re putting on screen. Secondly, if your form requires a large amount of input data, we recommend you using a multistep format where the fields are broken down into obvious sections. If you need the user to fill in 50 fields, then 5 sets of 10 would be easier to digest than all 50 at once. A progress bar with clear headings (such as contact details, payment details etc) will reassure the user that the journey is realistic to complete.
The phrasing of your forms is incredibly important especially on the call to action button and when you have a small form consisting of just a few fields. If you want users to part with their information, chiefly when it comes to just an email or phone number, you’ll want to entice them to submit the form as soon as the data is inputted. To do this. try to avoid using “submit” on your call to action button as this feels quite mechanical and doesn’t inspire the user to provide their data.
The guidance here is to make your microcopy compelling and unique to the product or service you’re providing. This will reduce the friction between your business and the user, who may not be confident in giving up their data. A button with a concise, authentic phrase like “Get Your Free Newsletter” is much more powerful a copy than simply putting “submit” or “Complete” to finish your form. Indeed, using phrases alongside your form such as “No credit card details required” or “We will not share this information with anyone else” are reassurances to the user that they’re in safe hands and will increase the likelihood of a conversion.
Field masks alongside labels are an ideal solution to speed up a user’s time to identify the required data in a field. A field mask is when the format of a field is set out to only receive a certain sequence of inputs and is covered when the user starts typing. This provides clues and hints for what is needed of a user and most will now instinctively start typing their response upon seeing the prompt.
Examples of field masks are:
A phone number – (+44) 0000-00000
Date of Birth – DD/MM/YYYY
Bank Account or Sort Code -XXXX-XXXX/XX-XX-XX
I’m sure you’re tired of being reminded that users are increasingly using their mobiles to perform tasks on the internet but decisive in the online world. Indeed, this means that a significant number of users will be filling your form out using their smartphone. People are able to complete forms on the move, even if they’re lengthy (consider those who book last-minute trips or holiday insurance). Being mobile-friendly is vital so remember to implement the steps we’ve outlined here on a mobile optimised site.
To maintain a smooth experience for mobile users you must also consider using the correct keyboard for the information they are inputting. On a desktop, this will never be an issue as the keyboard remains the same, however, matching the data type on their phone is widely expected for mobile users. If the field input on your form is for letters then the alpha keyboard should appear and for numbers bring up the numeric keyboard. The use of an appropriate keyboard will be appreciated by users in this mobile-centric world and ultimately adds to the speed of the form filling you desire.
Very few people actually enjoy filling out forms or want to regularly part with their data so it’s important to give users the best experience when you get them to the filling out stage. Creating a form that is compelling, easy to use, and straightforward will benefit you in the long run by increasing your chances of consistently collecting data and making conversions. The key take-away is to ensure you’re doing the basics right, make your forms simple and efficient to use.
If you’re looking to expand your digital marketing output by increasing your conversions, contact one of our friendly marketing experts at HROC today!