For many sites ecommerce isn’t always the end game. A lot of companies rely on their websites to generate quality leads through contact us, or request a quote forms. Form presentation may seem like a trivial matter, but a bad form may frustrate users and drive them away. Your user likely won't see the difference in a good form vs. a bad form but with a properly built form you will see a difference in conversions (the number of visitors completing the form).
One of the main things to keep in mind when building a form is to make the process of filling it out as painless as possible. Nobody likes to fill in forms, and if the process is too cumbersome, they may just give up entirely. Make sure the path to completion is clear, and error handling doesn't punish the user too much.
Quickly and clearly explain what the form is for, and why a user would want to fill it out.
Don't Get Greedy!
It's tempting to want to gather as much information as you can about your prospect or customer, but requesting or requiring too much information will have a negative effect. Make sure the information is relevant to the outcome, if people are signing up for a newsletter there is no need to ask for their address or phone number. A properly configured CRM can parse together various visitor/customers information over a variety of touch points.
Labels are pieces of text that indicate what the field is for. There are three basic ways to position labels: Left aligned, Right aligned and top aligned.
- Top Aligned: Goes directly over top of the input it corresponds to. It is best used for data that is familiar to the user, such as their name, email, or phone number. Studies show that these forms take the least amount of time to complete. Adequate spacing between the label and the input field is important to ensure efficient scanning by the user. This technique is also preferred for responsive (or mobile) design, as the label is still visible when the mobile device zooms in to the active field.
- Right Aligned: Goes directly to the left of the input with the text aligned to the right. These take up less vertical space than top aligned labels and allow for clear association between label and input field.
- Left Aligned: Goes directly to the left of the input with their text aligned left to right. Like right aligned labels they do not require as much vertical space, but are not as easily associated with their corresponding inputs. They are best for advanced or unfamiliar inputs and allow users to easily scan the labels.
Required/Optional Form Fields
When building a form it is important to indicate input fields that are required or optional based on the overall needs of the form. If there are a lot of input fields but only a number of them are required it is best to indicate this next to the label (*required). On the flipside if the majority of the form is required and there is only a small number of optional fields it is best to indicate those next to the label (Optional). This will enable users to scan the form quickly to determine the required information. Generally it is best to avoid optional inputs, as these give the user more inputs to look through.
When it comes to actions it is important to keep the focus on primary actions that will ultimately result in the form completion. Primary actions we often see are; "Submit", "Continue", and "Save". However, these generic terms are somewhat ambiguous, a better approach is to be more clear and literal: "Sign Me Up", "Email Me My eBook", "Pay For My Order".
Secondary actions can result in form abandonment and are rarely needed so it’s best to avoid them if possible. Secondary actions include "Reset", "Cancel", and "Go back". If you need to use both Primary and Secondary actions it is important to display a clear visual distinction between them, and Primary actions should align with input fields to create a clear path to completion.
Help & Tips
If you are finding many users are landing on your contact form but not completing it you may find it necessary to provide help and tips to your users. Help & Tips are useful when:
- You are asking for unfamiliar data
- Users might question why the data is necessary
- There is a certain way you recommend enterring the data
By providing helpful information you can put the users mind at ease and make them feel more comfortable about providing certain information.
Even with clear labels, affordances and help/tips errors within the form may still occur. It is important to clearly indicate when an error has occurred and provide a clear resolution in as few steps as possible. Make sure to associate the responsible input fields with the primary error message.
Hooray! Form completion success should be celebrated and clearly communicated with the user. Whether it’s a thank you page, or an email notification the user needs a clear mind that their data has been submitted correctly.
Forms can be used for all sorts of different calls to action on a website; general contact us, request a quote, or user registration. For online companies where lead generation is the purpose of the site, as opposed to ecommerce, it is imperative that you track your form completions using Google Analytics. Especially if you are using digital marketing strategies like PPC campaigns or utilizing landing pages, by tracking the completions you can guage what marketing strategies are generating conversions. A clear understanding of what is working and what isn’t will help you optimize your forms.
If you are looking for a digital marketing strategy that can generate quality leads for your company speak with one of our business developers to find out how we can help!