A Discussion on the Importance of the Good Contact Form User Experience on Your Website

What is a Contact Form?

A Contact Form is an element on a page where you would find a set of questions asking for information such as the name, contact details, with a space for your visitors to leave the website a message.

Its main purpose is to generate leads from your website. Often, it is used to ask for feedback, for visitors to leave you an enquiry or even to encourage people to sign up for a free gift or newsletter. It’s also a convenient way for visitors to leave you a message anytime. As a result, it doubles as a salesman.

However, there is more to a contact form than meets the eye. This form serves as a conversation tool that connects your visitor to your website, hence, to your products and services. When strategically crafted right, this can generate leads down to your sales funnel.

Understanding the Importance of Good Positioning and User Experience in Contact Forms

As mentioned earlier, the contact form’s main purpose is to generate leads from your website. Whether you’re running a corporate website or an eCommerce platform there needs to be a well-strategised and designed experience implemented in the contact form for this can make or break things with a potential lead or customer.

Imagine browsing online for home appliances and you reach a particular website that catches your attention. You now have a few enquiries in mind so you go straight to their ‘Contact Us’ page. As soon as you get there, you see this complex contact form that asks for unnecessary information such as your gender, phone number and even your birthday. You then start to wonder how these are relevant when you only want to enquire about a product on their website. How sure can you be that these pieces of information are securely stored? Later on, you encounter a glitch as you try to submit the form and it doesn’t tell you what went wrong and so you have to re-do everything again.

Poor positioning and the lack of consideration of the user’s experience can frustrate a potential customer, leading them to stray from your website. In fact, there are a lot of other psychological factors that can affect your user in the process of filling out and submitting the contact form.

It is important to know first to whom the form is for — who is your target audience? Are they filling out the form to get a free gift, to sign up for a discount voucher, to enquire about your services? These types of information narrow down how you would want to approach your potential customer in terms of ensuring good user experience (UX) in the contact form. It also helps in identifying which information is key, eliminating the unnecessary questions to reduce user effort.

Practising this kind of approach eases the process for the website visitor as they fill out your form.

Positioning of the Contact Form

As mentioned above, the placement of the contact form plays a pivotal role in generating leads from your website. It’s not enough that it exhibits good design and copy; its positioning needs to be well-thought–out so that users will be encouraged to engage your brand.

Understanding the Fold and its Purpose in Web Design

The term ‘fold’ originated centuries ago in the newspaper industry where it has been the rule of thumb that the most important content is placed somewhere visible. Back then, the vital headlines and advertisements were placed ‘above the fold’, referring to the upper part of the newspaper when it was folded in half. This was considered the most visible part of the newspaper; hence, editors would take advantage of this to encourage bystanders to buy the paper.

In web design terms, ‘above the fold’ refers to that part of the site that is visible without scrolling. Anything not visible and would require the visitor to scroll down the page would be seen as content ‘below the fold’.

Read more about the concept of the fold here.

Placing the Form Above or Below the Fold

Newspaper printing companies used to prioritise the area above the fold with leading headlines of breaking news. The same goes for marketers in websites trying to cram all possible information that would capture attention above the fold for they don’t want to miss any opportunity of making a conversion. This used to be the norm back then but we have to understand that a website is completely different from a newspaper.

Placing the contact form above the fold doesn’t always guarantee that it will be filled out by the visitor. A visitor might second-guess their decision to fill it out if they still don’t know all the valuable information they need about your product or service. This will lead to a conversion friction. At the same time, forcing to put everything above the fold will not do it justice either. You need an optimised landing page that is visually appealing, responsive and easy-to-digest.

Hence, it’s important to understand that everybody scrolls and it’s your job to convince your potential customers that your website is worth the time and effort to scroll down. In order to do this, you need to be strategic in optimising your page to get visitors interested enough to make a conversion.

According to Google’s report in ‘The Importance of Being Seen: Viewability Insights for Digital Marketers and Publishers’ , above the fold is not always the most viewed, but often it is the content below the fold. 

In conclusion to this argument, there is no single formula in determining if contact forms are to be placed above or below the fold; several factors must be taken into consideration such as the company’s industry, its products, and services.

Make sure to briefly explain what the company does first and to assert that you are a reputable and trusted brand, before expecting visitors to convert. Fahad Muhammad of Instapage said in this article that the rule of thumb is to place your contact form below the fold if your product is (1) expensive, (2) needs more explanation, and (3) requires a high commitment.

Implementing Good User Experience Design in Contact Forms

A contact form is the most important tool for user-service interaction. It is essential to make the most of this opportunity by implementing web page design practices that improve the overall experience of the users.

Keep in mind to keep things intuitive, meaningful and enjoyable for your potential customers. The more accessible and user-friendly your contact form is, the higher the chance that this gets you positive results: better conversion rates and improved brand credibility.

9 Best Practices to Improve Click-Through Rates (CTR) on Your Contact Form

1. Maintain a single column layout

Presenting the form fields in a single column layout makes it easier for visitors to view and fill out the form as everything is in a straight line. Forms with an inconsistent placement of fields can slow down the comprehension of visitors and might lead them to second-guess their decision to fill out the form altogether.

2. Keep question in a logical and intuitive sequence

 Ask questions in a logical and intuitive order. Look at it from the user’s perspective and make sure one question next to the other has a decent and smooth flow that resembles a conversation. If there’s no possible meaningful sequence, ordering them alphabetically can be your next option.

Found this article useful? Before reading on, Don’t miss other articles on this topic:

The Difference Between UI Design Vs. UX Design

7 Fool-Proof Tips in Creating An Effective Landing Page That Converts

3. Ensure field size is proportionate with the input data

The width of the input field should fit the data required. Users must be able to see the full entry of the information needed from them, but the field should not exceed that. Studies show that some users tend to be confused and start to wonder if they entered the wrong data if the field is too short or too long. This is especially the case too when it comes to being asked about credit card details as these are sensitive information that a user will be extra cautious about.

4. Minimise input fields and reduce user typing effort

Ask only what is needed because forms with too many questions may cause conversion friction. Don’t assume that your visitor has a lot of time filling out your contact form by asking them a lot of information; this may lead them to stray from your website.

Other than limiting the number of input fields, don’t stress out your visitor with too many data input. In creating a good UX Design for your form, user effort should also be considered. A lot of typing can cause errors and may be time-consuming, so try to minimise this as well by using tick boxes, drop-down menus, and so on.

5. Labels should be above the input fields

Your contact form should be easily skimmable. To do this, it is better to keep everything in a vertical order by placing labels above the input fields. This is good because it eats up less space, which would benefit the UI of the website’s mobile version.

6. Be more flexible when it comes to formatting

There are fields that require specific presentation of information. However, forms with a strictly confusing format can confuse the visitors even more. You need to make sure that it still follows good UXD principles such as it is intuitive, meaningful and enjoyable for your visitors.

An example is the numerical information needed when asked for credit card details. Rather than using numerous fields to ask for the card number, be flexible and just use one to prevent any mistakes and confusion.

7. Avoid using the placeholder text as input field label

 The placeholder text is usually a hint or an example of the information required from the user in that specific field. This is very helpful for sometimes the visitors may not be sure what kind of information is required from them by just looking at the label. However, refrain from placing this inside the input field label as it immediately disappears when the user clicks on it. Instead, you can opt for a floating label, where the placeholder text fades out and is moved on top of the field as soon as it is clicked.

8. Differentiate optional and required fields

 As much as possible, try to avoid optional fields in contact forms and only ask what is needed from your customer. However, if you think that these questions should be there, make sure to distinguish the optional fields from required ones using labels. Try to limit these optional fields to only one to two questions.

9. Inform users about error messages

As users fill out the form, they tend to make mistakes every now and then. When this happens, it’s important to communicate effectively which parts should be corrected before submitting. Users will get frustrated if they’ve already filled and submitted the form, only to find out that they have to re-do it again because of an error they didn’t notice.

You may use colours or icons to highlight the areas that need to be corrected. Good UX design deals with the understanding of such factors including the user pain points. Therefore, these factors must be considered in the design implementation of the contact form.

There are no ultimate rules when it comes to creating an effective contact form that promises conversion. We cannot do anything if the user hesitates, but minor changes can make a big impact in convincing users to fill out your form. The objective is to make this process as easy as possible by providing a smooth and reliable experience between your visitor and the contact form.

Don’t be afraid to run experiments for in developing effective practices, you must start with trial and errors. Eventually, you’ll find the perfect recipe that works for your brand.

Do you want to know more about how a customised and well-optimised contact form can help boost your conversion rates? Give us a call at 6841 1680 or email us at [email protected] for a free consultation!