/
/
UX usability and accessibility
/
How a contact form should look and be designed

How a contact form should look and be designed

How a contact form should look and be designed

See how to design a contact form ? How to improve inquiry conversion and match business needs.

Customer contact is a vital part of relationship building, which is important not only for your financial success, but also for customer loyalty to your store. That's why it's so important to take care of every aspect that will enable users to contact your company quickly.

Despite the popularity of automated chatbots, it is not worth giving up classic contact forms as they provide an additional opportunity for users to communicate.

A well-designed contact form is a key element that will increase the number of inquiries not only from determined customers, but also those who have doubts, want to inquire about a product or service. The form is a powerful tool that allows customers to quickly establish contact. See how to prepare a form that works. How to tailor it to each stage in the buying process of your target audience.

The contact form is the place where a customer contacts your company. It's worth matching it to the buying process and where your potential customer is right now

Wondering how to find a web designer from New york? - read our article

table of contents:

What to keep in mind when designing a useful contact form

The contact form is a special place on your website, it is worth considering who is coming to a particular subpage and why, e.g.: a product subpage, a blog post, an information subpage, and what concerns they may want to address, what problem they may have. List the potential needs of the user and try to match the fields and header of the form and the CTA text itself to the customer's need.

CTA communication should be tailored to what you care about most, i.e.: the content of the CTA usually at this point is to allow the user to consult their problem, to inquire about the product or service.

CTA to sign up for the newsletter

Where to put the contact form on the website ?

Do you know where best to place the contact form on your site? Finding a balance is key - it needs to be highly visible, but at the same time not dominate other important elements on the page. We usually design sections with Call To Action directing to relevant forms on a sub-page or within a website which greatly shortens the buying process for users who are at the stage of getting to know the company and its products. In such a case, if a user has a question about a product/service or wants to consult their problem, they can quickly leave their inquiry in a dedicated place in the security feeling that no one wants to sell them anything yet.

General form in the contact sub-page, or maybe a dedicated contact ?

For a standard contact form for general inquiries, the best solution is to create it in the 'hero' section of the contact sub-page.

In case your company has multiple departments or you need to separate different groups of contacts within the company, it is worth considering thematic tiles that clearly inform about the possibilities of contacting the relevant department.

Organize the contact into appropriate departments

Explore the possibilities of CTAs in menus - how to invite the user to make a request ?

Examples of CTAs on the menu. An open door to contact your company

In order to allow the user to contact our company quickly, it is worth using a CTA already in the menu in the form of an invitation to cooperate. We can invite the user to contact our company in the form of :

  • free consultation,
  • check out the product demo,
  • order a no-obligation visit to the company,

Is the phone number in the CTA enough ?

A common mistake is to simply put an active phone number in the menu, which is already some kind of option but does not use the potential and possibility of conveying information to the user.

Learn how to design a website dedicated to a specific business and company needs. What are the stages of website development. Get acquainted with our offer:

Call to Action - what do you call what happens when you click ?

Use a short, concise and compelling call to action such as : send, see offer, inquire about product, free consultation, order free sample etc.

Create a call to action that is consistent with your offer, the style of the content on the page, and shows what will happen when clicked.

Make sure the call is clear and effective in encouraging people to send the message.

Well-chosen text on the button can make a big difference - according to statistics, the most emotionally effective phrases are phrases such as learn more, check out the offer, learn about the possibilities.

The ideal CTA is all about showing what is on the other side, what will happen when I click the CTA

Never use 'ask for an offer' in a CTA. It just doesn't work !

Eliminate old reCAPTCHA solutions

We understand that you rely on a variety of spam protection mechanisms, but consider ditching the old versions of CAPTCHA if possible.

For users, this is inconvenient and can be seen especially through a decrease in the number of interactions on the site when they have to transcribe hard-to-read characters from an image to send a message.

The older version of reCAPTCHA, especially the one with illegible captions, is one of the most unwanted forms of verification, effectively discouraging people from using the form.

Integrate your contact form with the latest version of recaptcha v3, which automatically verifies the user and runs in the background.

We are not suggesting that you give up on spam protection, but we encourage you to use other methods. In this context, reCAPTCHA without having to click on different images may be one of the best solutions.

Limit the number of fields in the query form

A form with a minimum number of fields

Most users quickly lose enthusiasm for filling out contact forms if they are too elaborate.

Keep form fields to a minimum. Ask for relevant questions: first name, email/phone number. Other questions will lower conversions - consider whether you really need to separate first and last name into separate fields or ask about budget.

If you need more information from the customer consider the following scenarios :

  • Divide the form into several stages - however, think about where to place such a form. It should not be a general form in the contact sub-page,
  • Additional forms for product sub-pages, blog posts, service sub-pages that can legitimately have more questions for the user
  • A promise in exchange for filling in more fields e.g.: leave us more information about yourself and receive an e-book,

Take care of the aesthetics and design of the contact form on your website

Examples of consistent contact forms

How to make your contact form more attractive. It's simple-design it consistently on every subpage.

Aesthetics and consistency of fields throughout the website are of paramount importance here.

Focus on subtle details that will highlight the form. It's not just a matter of appearance, but also functionality.

An ideal contact form should have designed and consistent all possible states and notifications for the user

‍For better readability of the forms, we suggest :

  1. Highlight the name of the field and differentiate the field for entering content,
  2. Define the type of buttons ie: primary and secondary / e.g.: return button or select box,
  3. Define erroneously filled field and error messages
  4. Give a clear indication of which field is currently displayed, e.g. by highlighting it,
  5. For fields that require descriptions, use balloons / tips that appear when you hover over the information icon, e.g: 'i',

It's important for the user to know which fields are used to enter content, which are drop-down fields, where is the button to move on, to return to an earlier step. Define the states and primary buttons in your forms

Do not be afraid of new trends but apply them with caution, new does not always mean better.

In designing forms, apply the principle of sticking to the rules to which users are already accustomed

Full-screen contact forms does it make sense ?

This solution makes the form the centerpiece of the page, remaining highly visible without distracting elements. This is an excellent way to focus users' attention on the opportunity to make contact, however, it requires testing and seeing if your target audience responds well to this unusual form of contact.

Effective forms use step-by-step disclosures


Progressive disclosure is what they often like to call the "onion" approach. When I say it, I'm referring to the progressive disclosure of content, as if discovering successive layers in an onion.

This is a basic but important issue, involving the gradual disclosure of information in logical stages rather than all at once. Using this approach is important when creating forms.

The key here is to reveal only a few steps or tasks at a time in the forms. This maintains a logical sequence of steps and minimizes the amount of information the user has to assimilate at once. This maintains efficiency and avoids cognitive overload.

Since all the questions appear at the same time, the entire form becomes quite voluminous, which can give the impression of an excess of data to fill out. In addition, it is not always clear why it is necessary to provide certain information, such as date of birth.

Effective forms show progress


Have you ever gone into the registration process and each step made it seem endless? Question after question, and you lose patience, seeing it take forever.

But you know, this can be remedied. It's about something that shows where you are in the process - it's about showing progress. This is in addition to progressive disclosure. It gives the user information about how they're doing in registering or filling out a form. This not only helps maintain interest, but also gives clarity on what's going to happen in the next few minutes.

Visualize progress / progress in step form /.

Learn How to Find a Web portal development

To whom to entrust the design of the contact form, will the agency do it well ?

Without special attention to the business aspect, your forms will be standard - just like everywhere, installed from a Wordpress plugin.

Typical forms, mismatched to the customer's stage in the buying process, lack of proper CTA communication and the use of communicative 'ask for a quote' are fighting windmills. Usually, an agency that develops a site implements the typical forms available in Wordpress without thinking about the business analysis of their use in different places on your website.

A form designed by agencies without knowing your business won't work

It takes knowledge and understanding of the customer's needs at a specific stage of the purchasing process to be able to plan where to leave the user contact options and how they should be designed (matching fields and CTA communication). A typical form that contains 4 to 6 fields will work, but only in the contact sub-page (as long as it is correctly implemented and does not contain obstacles in the form of an older version of reCaptcha or problems with its submission on the server side).

See also:

How to study and analyze how users use forms?


Once the form is developed, collect data on its performance using various analytical tools such as Google Analytics, HotJar or Yandex Metrica.

Google Analytics provides basic information about user engagement, such as views, clicks and form completion steps. However, advanced metrics on user behavior can be analyzed more closely with other tools. Heat maps indicate areas of greatest user interest, and form-focused reports provide information on time spent on individual fields and which fields are most frequently abandoned. Such analyses provide a better understanding of how users interact with a form and what elements may need improvement.

Find out What is Google Analytics

Conversion analysis from a contact form ?

Testing the effectiveness of contact forms is a key process in online marketing. It allows us to assess how well the forms are doing their job and enables us to adjust them to generate more customer inquiries. The simplicity and clarity of forms is a key factor in their effectiveness. The fewer fields to fill out, the greater the chance of more inquiries.

The location of the form on the page is equally important. It is best to place it at the top or side of the page, where it is easily accessible to users. In addition, clear field labels help users fill out the form.

And don't forget to properly verify forms to avoid spam and erroneous submissions. Quick response after submitting a form also matters. The sooner a user receives confirmation that a form has been submitted, the greater the chance that it will prompt them to leave an inquiry.

Contact form conversion analysis is extremely valuable. Thanks to it, we have a chance to accurately assess the effectiveness of our actions and make appropriate modifications that will increase our effectiveness in attracting new customers. It is worthwhile to devote enough attention to optimizing forms to make them as effective as possible for our users.

How to practically optimize the contact form on the website ?


Optimizing a contact form to attract more customer inquiries is an important issue for many companies looking to facilitate communication with the service department. The latest trends and form tips suggest what to look out for.

The key aspect is simplicity. The fewer the fields, the greater the chance of using the form. Excessive fields discourage people from filling out the form, so focusing on the most important data is key.

Another important element is the readability of the form. The user should quickly find the necessary fields and fill them in. It is important that the form is also optimized for mobile devices, which are increasingly used for browsing.

Automation is another asset. Automation tools assign inquiries to the appropriate departments or employees, reducing response times and improving customer service.

Placing the form in a prominent place on the page, ideally in the "Contact Us" section, and highlighting it graphically, attracts the attention of potential customers.

In summary, the key to optimizing a contact form is simplicity, readability, automation and proper highlighting. The contact form is a key element of customer service, so it is worth taking care of its proper presentation and functionality.

Find out How to choose a website development company ?

What distinguishes the best contact forms?

An example of a well-optimized contact form

The contact form is a key element of any website, allowing direct contact between users and the site owner. It is the place where they can submit questions, comments or cooperation proposals. That's why it's so important that it's optimized, attracting as many inquiries from potential customers as possible.

The ideal contact form ?

If there is one, it should be a simple one tailored to the user's intentions and his stage in the buying process. We envision it as perfectly designed and visible on the website, giving clear information about why it is there and what the user will gain from sending it.

Technically, the form should be concise, clear and easy to use.

Avoid overextending it with questions that are not crucial. Users are looking for quick and specific answers or want to ask precise questions.

The best forms are characterized by simplicity, clarity and aesthetics, blending perfectly with the rest of the site. Aesthetics are key here, encouraging users to use it. An example of a successful form is the one on Apple's website. Minimalistic but clear, with clear questions, it provides quick information and increased inquiries.

In designing a form, it is important to match it to the stage at which the user is in the buying process and the intent and nature of the sub-page on which it is located.

It is worth testing various options of the form, i.e.: appearance, number and descriptions of fields and placement on the website. Verification of our assumptions by users gives us completely new ideas and knowledge about how they find our solutions and use the functions we designed