We all once filled a contact form. We did it to receive a call-back, get a handy promo code, or sign up for a newsletter from a credible website. Some contact forms annoy us, popping up too often, others we do not notice until we deliberately visit a page and press the button to get in touch with the company. There are also personalized contact forms that engage with subscribers and develop a relationship for the long term.
Whatever purpose they serve, contact forms are of great help for all websites out there. However, it does matter how they look. In order to design a contact form that converts, it is recommended to follow some rules to ensure your potential customers have no problem filling them out and moving further along your sales pipeline.
What is the purpose of contact forms?
The purpose of any contact form is to generate leads from the website. Contact forms can be leveraged to ask for consumer feedback, encourage them to sign up for a newsletter, provide customers with a free gift, or serve as a convenient way to get in touch when someone is stuck and needs additional information.
People who are long-time Etsy users, for instance, would usually need to export orders and reports from Etsy to CSV files. While there is a lot of useful information out there, those who are not tech-savvy will benefit from a helping hand when trying to get things right. Contact forms on websites with how-to guides are of great help and will save time for those who are not familiar with the topic yet.
There are contact forms that pop up once customers enter the website, others hide behind the “Contact Us” tab. Both of them are great but serve different purposes. While the first one usually contains some promotional material, a promo code, or an invitation not to miss weekly digests, the second contact form serves as a helping hand, being always there if visitors have any questions or concerns.
How to design contact forms that convert?
When you are planning to build contact forms for the website, always put your potential consumers in the center. It is one of the most important rules to remember. Will people sign up for a promo code? Is the form layout simple to follow? Do I really need to get all the information included in the form? Such questions help to identify the right steps to best contact form design and ensure a pleasant customer experience.
Let’s have a look at a few steps to follow when designing a contact form.
Use fewer fields
No one wants to lose potential customers due to an overwhelmingly long list of questions to fill in to receive a newsletter. If you can make it happen, try including three fields only on the contact form. According to Quicksprout, the fewer fields people need to fill, the better the conversion.
Hubspot has revealed that those who cut the form field number from four to three get a 50% increase in those users who complete forms. In reality, people don’t have the time and patience to fill out long website forms. So, go one step at a time, get them to commit first by asking to leave their name and email address. You can then follow-up with emails and get more information you need.
Design the Correct Layout
Apart from reducing a list of questions in the form, make sure it has the right layout. There are a few things worth remembering when it comes to building a contact form layout:
- Never use multiple columns in the form
- Give one question in each row
- Place form field labels above or on the right of the input field
- Select the field size to fit the approximate answer length.
Being small things, all of the above rules nevertheless matter and make a difference. The correct layout gives a good reference, a comforting sense, and eliminates unnecessary confusion.
Allow for autofill
Most people don’t fancy filling out identical contact forms. To ease the burden, try to make things a little bit easier for your customers. Browsers can actually complete fields on behalf of people. Back in 2011, Chrome released a new feature that could fill out the fields based on a visitor’s autofill profile. In 2014, when Chrome disabled the feature, the rate for form submissions was down 25%. The truth is that some users will just abandon the contact form unless given some help.
As some people are filling in multiple forms on a daily basis, they just feel tired to enter the same details all over again. Enabling autofill will help customers complete the forms faster and increase your conversion rates.
Clearly Indicate Errors in Submission
People normally make mistakes when they fill out a great number of contact forms on different websites. That is an inevitable case. Therefore, you need to clearly communicate with them to help users fix those fields that are filled out in the wrong way. The errors should be indicated clearly in order to eliminate the need for the users to re-do the form and get even more frustrated.
There exist several important principles to keep in mind when you design your form and the feature for indicating errors:
- The error has to be noticeable and easy to understand
- The field with error should be easily located
- Customers don’t need to memorize the instructions to fix the error
Those fields with errors can be either highlighted in a different color, like yellow or orange, or they can have an automatic warning above it indicating the error.
Select the actionable CTA
When the design of your future contact form is almost ready, there is one more thing utterly important for increasing future conversions. Your CTA button serves as a guide for site visitors and informs them what happens next. The button should stand out and be catchy.
There are a few suggestions for designing a CTA button:
- The text on the CTA. Some texts on the CTA buttons tend to decrease the conversion. Words like “Submit”, “Download” and “Register” feel a little too pushy in comparison with “Click here”, “Let’s Chat”, or “Work with us”.
- The sense of urgency. Some websites practice adding information about the deal that will be closed soon or a promo code that is soon to expire. When people feel like losing a great opportunity, they are more likely to act on it. For example, instead of using “Submit”, some websites add “Submit now – only 12 hours left” to add a sense of urgency and maximize the conversion.
- The button color. There is a list of the most popular button colors that include red, orange, and yellow. Such colors are considered the most attractive ones among others, while black, gray, and brown are neutral and not so strong. Choose your CTA button color based on the background of the contact form and the overall website design. The color should set the CTA apart yet fit the site.
Optimize the form for mobile
Most people nowadays browse from their smartphones. It is particularly important to optimize the contact form and make it mobile-friendly. Those forms that are responsive can boost conversion rates and encourage more people to stick with you longer.
Make sure that the form is easily accessible when browsed from a mobile device, the fields are adjusted to the smartphone screen and the autofill feature is in place. When browsed from the smartphone, users should instantly notice the CTA button and easily click on it without the need to zoom in. Those forms that take time to fill out are a waste of time and money and drastically decrease the conversion.
Keep It Simple
While designing a good contact form might seem tricky, the right UX design pays off with time. When designing a contact form that drives conversion, put yourself in the customer’s shoes, try it out yourself, and test it with your colleagues. One thing you will all notice – the easier the better. Fewer fields, less distraction, a comfortable layout, an autofill feature, and an inviting CTA button can do miracles.
Don’t risk customers getting stressed or wasting their time trying to fill out the form over and over again. Keep it simple and make it clear from the very beginning. Contact forms, designed in the correct way, are an important part of driving conversions, so make sure people can fill them out as quickly as possible.
Guest Author Bio: Zakhar Yung is a technical content writer at Coupler.io, a product by Railsware that allows users to import data into Google Sheets from different data sources. Before the IT industry, Zakhar managed to gain experience in versatile fields beyond IT including industrial facility trade and the nuclear power industry.