Contact forms of all sorts still remain one of the most important channels of interaction with the client in the network. And this channel can prove to be very effective if you find the right approach to its implementation.
To achieve the goal set and develop a successful online communication tool, it's crucial to pay attention to such things as basic form usability, intuitive design, functionality, a user-friendly interface, and much more. Sounds a little complicated, right? Not to worry! We're ready to help you since we know a great deal about the matter. And we're pleased to share our experience with you in our blog post.
After reading the article, you'll learn the key features of the best contact forms and find out what to consider when creating input fields. You'll be able to build the perfect communication channel with your customers and increase your company's profit.
So, let's go!
Reasons to create a contact form
Designing a great contact form can be a daunting task... is the game worth the candle? We'll do our best to convince you the answer is yes, it is certainly worth it!
What tasks does the contact form solve?
-
Getting user contact information. It’s the first and most obvious role of forms: you get the contact details of your potential customers. And we guess there is no need to explain to you what to do with such data in order to boost your profits.
-
Keeping in touch with your audience. Using the form, you can communicate with your clients and receive feedback from them, which gives you a real opportunity to better meet their needs.
-
Call to action. All the best contact forms have a clear call to action. And this action is beneficial to each party in the process. Your customer gets a cool bonus (say, a discount on online purchase or participation in a prize draw), and you, as a resource owner, receive his contact information.
Contact Form Types
Contact forms can be of different formats and have different tasks. What's more, each type has its own characteristics and features, including the number or essence of the fields.
Let’s take a closer look at the issue.
Registration forms
We’ll start with a very popular type of contact form. Usually, it’s located in the header of the site, and it is with it that the visitor’s journey through the resource often begins.
By the by, it’d be better to separate the registration and authorization forms, otherwise, you run the risk of confusing the user.
Authorization forms
As we've already said, these two types of contact forms should be separated, for registration and authorization are similar but not identical processes. We discussed the first option above, now let's talk about authorization.
So, the form in question should contain only 2 fields: “Email” (or login) and “Password”. Also, it'd be smart of you to provide the possibility of authorization through social networks.
Callback order
Here we're dealing with a very effective contact form, which should be added to all commercial resources whose owners are interested in increasing conversions. Your site visitor may be too lazy to call you with his questions, and the idea of asking you to dial him instead might interest him in such a case. Don't miss the chance to turn a potential customer into a real one.
Of course, you mustn't show the input fields immediately (why clog the site with unnecessary details?). Display the form after the user clicks on the corresponding button (as the example below demonstrates).
Consultation forms
Sometimes a user gets a little lost and cannot find the information he needs on the site. At that rate, a consultation form will come to his aid. As to the number of fields, keep it small: the user’s name and email (or phone number) are just enough.
However, if you don't want to create a contact form of this type, replace it with a chatbot or an online consultant (in the latter case, you must hire employees who should be online 24/7).
Ordering services or goods
Obviously, the order form must be placed on the target pages, namely:
-
The product order form is best shown on the basket page when the user has decided on his choice. By the by, it is better to work out two forms: for authorized and unauthorized users.
-
The second version of the order form should be located on the service page, after a description of the work required, results expected, and prices offered.
To provide usability of contact forms (we mean ordering ones), specify the following fields:
-
Order Details:
-
the type of service and the date of its execution (say, booking an appointment in a beauty salon);
-
type, characteristics, and the number of goods ordered.
-
-
Order cost;
-
Name of the client;
-
Phone number;
-
Delivery address (if it is a product order);
-
Email (optional field needed to duplicate information about the order to the client);
-
Commentary (the client may want to make some clarifications).
Newsletter subscription
The form is a wonderful opportunity to offer the user to stay updated on the news of your company. We recommend placing it on the Home page.
In the subscription form, only the “Email" field is required (naturally!): in general, it's enough. However, you can also ask for a name to make letters personalized.
Of course, we've listed far from all types of contact forms. There are also such options as payment forms, booking forms, and many others.
Components of effective contact forms
Basic form usability implies that there are the following components:
-
Structure. We're talking about the form layout and such things as the arrangement of the fields and the logical connections between them.
-
Input field. The main elements of the input field may include:
-
Input text fields coupled with containers (i.e. a virtual text input area);
-
Password fields (usually it's designed with asterisks);
-
Checkboxes, sliders, radio buttons;
-
Any other fields for entering user data.
-
-
Field labels. They are intended to explain to the client what a particular input field means (so it’s a field name of the sort).
-
Call to action buttons. We’ve already mentioned them, and we’ll discuss them at greater length below.
-
Feedback. It notifies the user about the result of filling out the form (whether it was successful).
-
Icons. They accompany the fields and give them visual appeal. You might think the functional contact form doesn’t need them, but in fact, no one should neglect the icons. Here are a few cool examples:
-
Leading icon visualizing a field type;
-
'Clear ’icon designed to erase text (if a user has made a mistake while typing);
-
Eye icon. Password fields actively use these icons;
-
Voice input icon, which tells the site visitor that he can use voice typing.
-
-
Now we’re going to figure out how to design a user-friendly form.
Rules of the best contact forms
Are you ready to learn the secrets of well-designed contact forms? Well, then carefully read what you should do to get the result you want.
Give preference to single-column form layout
We'll start by discussing one of the key features of contact forms, namely, their structure. Which layout should you choose, multi-column or single-column? Let's compare them!
Multi-column form layout
The first layout option would seem visually more attractive, and many site owners prefer it when building a contact form. Alas, the strategy, despite its appeal, is incorrect.
After testing multi-column forms, a lot of research companies have come to the conclusion that such a way of presenting information confuses users. There are several reasons to explain customers’ irritation:
-
Poor multi-column readability. The user's gaze runs from column to column, which makes readability difficult.
-
Confusion. The user begins to doubt which field to fill out first, what is important, and what isn’t.
-
Unhandiness. When there are two or more columns, a site visitor may get a feeling that it would take too much time to do what you want from him.
As a result, the user is annoyed and refuses to fill out fields in a contact form.
Single-column form layout
So, forms with multi-column designs are a losing option, as you understand now. But what about the single-column format? What factors make it so effective and, therefore, positively affect the usability of contact forms?
Let’s list them:
-
Good contact form readability;
-
Concise and modern design;
-
Higher form field usability.
Use a clear form header
The main task of the header is to make a contact form understandable to the user, convey its purpose in just a few words. And that’s why it’s important to avoid flowery phrases and complex sentences. The ideal option implies that the visitor to the site casts a glance at the header and gets an idea of what he gets when filling the form out.
By the way, a header alone is sometimes not enough, and then it’s helpful to add an informative description to further motivate users and convince them to perform a few simple actions.
Minimize the number of fields
It’s time to discuss another good tip related to designing web forms for usability. It's about minimizing the number of fields.
A large number of fields scares users away, which is due to the following:
-
extra work. We are just too lazy to fill in such a number of form fields;
-
privacy issue. Users have no desire to provide too much information about themselves;
-
time factor. Filling out additional fields takes time, while we prefer to spend it more rationally.
Therefore, here are a couple of recommendations intended to help in solving these problems of form design:
-
use only those fields, which are crucial to your business: name, email address, the message itself;
-
avoid duplication of the requested information (say, “Email” and “Confirm email”);
-
don’t abuse requests for personal data including phone number, address, and company name. If, however, these fields are present, inform the user about his personal data being protected.
A reasonable approach to field labels
Each field must be accompanied by an explanatory name (the so-called label). Moreover, it is best that these names are located above each field with the left alignment approach. Technology is called eye-tracking, for it gets your user's eye to track the contact form in an easier way (to be precise, it's about increasing form field usability).
If you want to make a contact form more compact, labels can be placed inside the fields aligned to the left (namely, they act as placeholders).
Make meaningful calls to action
Also, you have to pay attention to the call to action buttons. They should be informative, catchy, clear.
In other words, drop such wordings as “OK”, “Send”, “Continue”, “Complete”. They don’t tell the user anything specific. A working call to action has to be:
-
associated with the content of the form;
-
showing what a user will receive after clicking on the CTA button.
So, instead of “OK,” write “Get the catalog”, “Receive your discount”, “Register”, and so on.
Use proportional container size
Focusing on form field design, don't forget about proportional container size either.
Everything seems obvious here, however, some developers neglect such a rule, which is a mistake.
Let’s say, if you ask the user to enter his last name, make sure the input field is able to contain it (sometimes our last names consist of too many letters and therefore are long). The user is unlikely to be happy if he has to scroll through the input line to see the whole phrase he has just typed.
Use custom input format
Users love variety: this makes the process of filling out forms less boring and more fun.
But what is meant by variety when it comes to designing a great contact form? It means you don't have to limit yourself to simple text fields or another data input format.
Data input examples:
-
various radio buttons (say, if a user needs to indicate his sex type or age group);
-
pull-down menus and lists with answer options;
-
and so on, just use your imagination!
However, avoid too long drop-down menus. A large number of possible options in your list makes it difficult to find the necessary information, which can provoke the visitor to leave the page.
Remember to highlight input fields
Design text fields with a highlight effect.
Simply put, highlight the field the user is currently filling out with some color (except for red). This is an important condition for functional contact forms.
By the by, there is another excellent trick to force the user to the conversion action, namely: automatically place the cursor in the first field to fill in.
Provide helper text that really helps
In theory, the contact form is universal and easy to fill out. However, sometimes it isn't possible to provide its automatic intuitiveness. And in such a case, the friendliness effect must be achieved through special helper text.
To put it otherwise, show the visitor what exactly he needs to write in each specific field. It can be done using the following techniques:
-
microtext, written in a translucent font and disappearing when the user begins to type his answer;
-
tooltips needed to tell the user how to submit information;
-
automatic placement of unconditional elements (say, brackets in a phone number).
In addition, give a clear example in which format the visitor is better to specify the data you require. It’s especially true in cases of phone number field design.
Point out errors clearly
If your helper text didn't work, and the user still made a mistake when entering information, tell him how to fix it in the simplest way possible.
First, point out the user error by highlighting the necessary field in red. And be sure to indicate what exactly went wrong and how to correct the situation.
Remember, all successful well-designed contact forms follow such a simple rule.
Use the progress bar if you have several stages
As you should have already understood, an effective contact form implies a simple structure and a single-column format. But what if your contact form includes too many fields and you cannot reduce their number? In this case, an excellent solution is to resort to the progress bar and divide the process of filling out the form into several stages.
Group related information
Another way to simplify a form with multiple fields is to group related information. Still further, each group needs to be visually highlighted (using subtitles, delimiters, empty spaces, etc.).
Mark optional fields instead of required
Typically, the contact form consists of a number of fields, and most of them are required and marked with an asterisk (sometimes a red one). However, we would advise you to do otherwise and indicate which fields are optional (as in the example below). This approach is much more efficient.
Pay attention to the style of the form
One of the important requirements of a great contact form is its readability, which can be achieved by avoiding the use of too exotic fonts. Besides, pay attention to the correct color scheme: say, light gray text on a white background won't be readable. Try more contrasting options.
Take care of mobile platform compatibility
Mobile traffic is growing steadily, which is important to consider when building a contact form. Put it in another way, your form must be adapted for smartphones of different operating systems. What looks good on personal computer screens may not justify itself when it comes to iOS and Android devices.
Conclusion: what makes a contact form effective
Willing to design an effective form, remember that it must have the following characteristics:
-
Clear and understandable purpose;
-
The ease of the process of filling out the form;
-
High readability;
-
Relevance;
-
Focus on a specific target audience.
