Skip to Main Content

5 rules to create a perfect contact form

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

You are doing everything you can to build a website that will drive visitors to conversion. When you study analytics, you're delighted to find that the user journey you've created is supported by its visitors, time after time. However, there is something that prevents them from being converted.

The contact form is an essential part of your visitors' journey. Even if you actually have almost everything a website can offer, a contact form could ruin the experience if not used correctly. “Broken” buttons, confusing fields, too many steps, a disorganized interface… even the placement of the contact form could disrupt the user experience.

There are many things that can go wrong.

5 rules for building the perfect contact form

A Google eye tracking study published in 2014 showed that following the most basic usage guidelines for form design will significantly improve the user experience. Specifically, when a contact form meets all the rules, 78% of users can fill them out and submit them in one try. When a contact form violates these rules, however, only 42% are able to do so in one attempt.

Curious about what these rules are? So keep reading.

Rule # 1: Focus on alignment

As you'll see in other rules here, people are often concerned about the length of contact forms, which often leads to poor design choices. Take the question of alignment, for example.

You might see a form like this on the BrainTraffic website and think: Hmmm… but isn't that a bit too long to complete?

fill in form.png

One way to think about solving this "problem" is to move the labels to the left and place the answer fields to the right. However, UX experts will tell you that this is a major no-no as it compromises the ability to scan the form. The same goes for if you thought about placing the fields next to each other horizontally.

If you want your contact forms to meet the alignment standard, here's what you need to do:

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

  • Left-align all labels, form fields, and the primary call-to-action button.
  • Never align related fields horizontally. You can structure the form logically, but each question or field should be stacked vertically.
  • Any field with multiple-choice questions (with fewer than six options) must be displayed in a vertical list of points or check boxes, not in a drop-down menu.

Rule 2: Include all relevant fields

When it comes to designing contact forms, you might think the shorter the better, right? It's not always the case. What matters most is that you provide users with all the necessary and relevant fields.

Michael Aagaard, Senior Conversion Optimizer for Unbounce, did a presentation in 2015 which addressed this issue. He and his team wanted to know what would happen if they shortened this contact form:

example of contact form court.png

As you can see, they removed what they believed to be unnecessary fields in order to streamline the process of filling out the form. However, upon conclusion of the test, they found a 14% drop in conversions with the shorter form.

Rule # 3: Simplify Fields

It doesn't matter if your users interact with your contact form using a desktop or mobile device, or if they need assistive technology to help them, the form should be equipped. to simplify the entry process.

Here are some techniques you should know:

For desktop users and those with accessibility issues, make sure your contact form has logical tab ordering enabled.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Input masks
Rather than forcing users to guess how you want certain fields to be formatted, you can add them with input masks that automatically format them.

formatting fields html.png

Google Autocompletion
Rather than coding each field so that it is formats automatically according to the standards to be respected, activate autofill using the Google addresses autofill plug-in. Not only will this save you from having to deal with spelling mistakes and incorrectly filled out addresses, it will save your visitors from typing in most of this information.

Rule # 4: Exit All

While I realize this rule will go against the basics of minimalism, it is a rule you should pay close attention to in order to avoid unnecessarily frustrating your visitors.

Let me explain: You have a contact form that looks pretty straightforward. Your users fill it out based on what the labels suggest and they click the submit button. Then they get this horrible red message: “You didn't do it right! Go back, correct the form and send it back! " 

You've probably encountered it as a user and you know how frustrating it can be, especially if some of the information you entered gets deleted when the error is thrown. So rather than leaving users guessing what needs to be fixed and how, don't let it get to this point. Spell everything on the way:

  • Provide a focus in the field (especially on mobile) so that users know exactly where they are filling out a form.
  • Write down all formatting requirements if you are not using input masks to automatically format fields.
  • Explicitly indicate when a field is "Optional" (use the word, not the red asterisk).
  • Give users the option to show or hide the password field as they enter it.
  • Display an error message as soon as the user is engaged in a field. Don't wait until the end to do it.

form wordpress.png error

Rule # 5: Do not Hide Advice

The board text in a contact form looks like this:

field with tips.png

See how Target places the labels in the field? In some contact forms, these labels / indications simply disappear when a user clicks on a field. The target handles this a little differently and moves the label to the top of the field box (see "email address").

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Regardless of how this is handled, the usability experts, like the group Nielsen Norman, will tell you that this is bad design practice because:

  • This is problematic for multitasking, distracted, or too fast-paced users in the next field. When the clue disappears, users must leave the field in order to rediscover what they need.
  • Tips that disappear also prevent users from returning to a form to check their work or correct an error without completely deleting the response to see what is below.
  • The lighter gray text used for placeholder tips is not ideal for easy reading.
  • Fields with hint text can be confused with fields that have already filled in data, leaving users to ignore them, submit the form, and receive an error message.
  • Some screen reading tools are not able to read hint text.

According to the NNG, users find empty fields more attractive than those that contain clue text. Even if your forms seem longer to place these labels or descriptors above the field, it will improve usability.

That's it for these tips I hope they will help you build better contact forms.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top