You’ve done so much work to get to this point. All of your efforts to get traffic to your site, engage that traffic, and convince them of your value have led to this moment: the contact form. Don’t let a simple mistake cost you that lead. There are myriad of reasons a user will abandon ship on a contact form, but most of them are easy to avoid. Keep reading to ensure your contact forms are doing all the right things.
Make it Simple
If you take one thing away from this blog, let it be to simplify your forms as much as possible. We often hear clients say, “we can make that field not required.” Required or not, a user still sees each field adding length to the form and thus perceives the form to be longer, requiring more of their information and time. Ask your sales team what information is absolutely critical to appropriately follow up with a lead and keep the form to those fields with two exceptions:
- Keep fields that users want to fill out, such as a field to explain the problem they’re having or their feedback.
- Keep fields that will make a big impact in the quality of your leads. Higher conversion isn’t impressive if quality suffers.
If you must have a longer form, consider breaking up into multiple steps to make it more digestible.
Also, spam prevention tools are great, but the user can see them as yet another step, especially if they have to solve a puzzle. Explore hidden spam prevention tools like Akismet or invisible reCAPTCHA.
Help the User
Reduce the risk of user error and help resolve user errors by leveraging the following:
- Auto-fill and autocomplete: Allow your forms to populate based on the user’s saved browser data, such as for address or billing information and consider autocomplete suggestions.
- Mobile input types: Certain HTML can trigger specific selectors and keyboards to appear on your mobile device, such as a number pad for phone numbers or picklists for month and year.
- Field input masking, validation, and help text:
- Input masking is a way to control how data is entered into a field. For example, a phone number field can automatically apply parenthesis, hyphens, and/or spaces to help the user input the expected format. Masking can also help with fields like credit card numbers when the input is long and often mistyped or date fields where the input varies (MM/DD vs. DD/MM, YYYY vs. YY).
- If your user happens to enter an invalid input, show an error message immediately next to the field so they can correct prior to form submission. Make sure the error message is descriptive enough to understand what was incorrect.
- If you have an uncommon field, such as Account Number, use help text to tell the user where to find that information and an example of what the input should look like.
- Accessibility: Consider all users when creating your forms. You don’t want to lose a lead simply because someone can’t submit your form due to a disability. By following WCAGs latest standards, you can avoid these issues, such as the size of tap targets, font size and contrast for legibility, navigating the form using a keyboard, and using a screen reader.
Design for the Brain
The design of your form can impact how complicated the user’s brain perceives the form to be.
- Stacking fields in a single column vs. side-by-side columns makes it easier to scan to assess. A common exception is fields that are typically side-by-side, like first and last name or two shorter, related fields like state and zip code. When fields are side by side, keep the spacing between them to a minimum.
- Adjust the field width to the expected input length. For example, a phone number field should be longer than a zip code field.
- Keep field labels visible at all times and left align them above fields.
- Denote which fields are optional vs. required.
Set the User’s Expectations
Filling out a form can be intimidating if you don’t know how your information will be handled and what comes next. Set these expectations by introducing your form with call-to-action language that makes the purpose of the form clear, such as “Contact us today to schedule a free assessment.” Then, make sure the “submit” button text is indicative of the action, such as “Request assessment.” Lastly, show a thank you message or page to let the user know the form submitted successfully and what they can expect next, such as “We’ll call you within two business days.”
Make the Form Available
This sounds obvious, but your form should always be accessible with one click from anywhere on your site. If your form is specific to a page, it should be available within the first viewport. Do not make your user go looking.
Test, Test, and Test
First, test all edge cases to ensure your form is functioning correctly. It’s a sad day when you realize your form won’t submit on mobile devices or for users with a particular browser. Second, consider AB testing different approaches. If AB testing isn’t an easy option, try to at least watch users interact with your forms using recording tools like Crazy Egg to better understand where they struggle. If the number of quality leads on your site is your primary KPI, it deserves testing. As a part of testing, ensure you’re also tracking the percent of users who start and complete your form, not just the percent of users who are submitting the form. The ‘form initiate to complete’ conversion rate is just as important for measuring the impact of changes!
This blog seeks to demonstrate how many factors can impact a user’s decision to fill out a form on your website and how to combat many of them. If you are struggling to get quality leads, a digital marketing agency can assess the points of friction and help you overcome them. Don’t do the hard work only to miss out on opportunities that could have been saved! Contact Bluetext to learn more about forms and conversion marketing best practices.