Skip to content

Design

15 Minute Read

How To Make Contact Forms That Convert

Last Updated: August 12, 2022

FeaturedImage How To Make Contact Forms That Convert

Home » How To Make Contact Forms That Convert

If you have a B2B website, contact forms are absolutely critical for your inbound marketing and lead generation efforts.

They’re what translates your hard work generating traffic into business opportunities.

So why do so many companies settle for underperforming contact forms?

A nice-looking, well-performing contact form is a critical part of web design. Yet, many marketers for B2B businesses often overlook the importance of both the contents and style of their contact forms.

They assume that if someone is interested enough in the offer they’ll fill out anything. That is simply not true.

Just think about it — how many times have you abandoned a bad contact form experience? Most likely too many to count.

Contact forms that…

  • Ask too many questions
  • Don’t make it obvious what’s required
  • Don’t make it obvious when you’ve completed something

These poor decisions with contact forms hurt your business more than you’re probably even aware of.

If you’re a marketer tasked with improving lead quality or volume for your business, improving your contact forms should be your first main objective.

Even small changes can have a huge impact on both the volume of inquiries you’ll receive and the quality of those opportunities.

In this article, we’ll be sharing research-backed conversion tips on how to improve your contact forms. We’ll also discuss more advanced ideas that B2B businesses can take advantage of to reduce the need for certain fields while still getting all the information you need from a prospect.

Ready to take your contact forms to the next level? Let’s dive in. 

CHAPTER ONE

10 UX Best Practices for forms

Before we dive into the more advanced conversion tips, let’s cover some general contact form best practices from a user experience perspective. These tips are easy to understand and implement and are an effective way to improve your website without a full redesign.

Keep Your Forms Short

Keep Your Forms Short@2x

Attention spans around the world are decreasing with every passing year, so the pressure is on your contact form to keep them engaged. The most straightforward way to accomplish this is to keep your form structure short.

By limiting the number of fields the user has to fill out upfront, the likelihood of form completion goes up by as much as 50%, as verified by a study from Hubspot that tested the effect of reducing the number of fields from 4 to 3. In addition, Quickspot found that the conversion rate with only 3 fields was 25%, compared to 20% for 3-5 fields and 16% for 6+ fields. Keep in mind, however, that indiscriminately deleting fields might hurt your conversion rate instead — you need to know what fields your users want to fill out.

Make Sure Fields Are Consistently Sized

Make Sure Fields Are Consistently Sized@2x

Our eyes follow the motion of our reading, so if your fields are inconsistently sized or unnecessarily long, it makes the experience of filling out your form less user-friendly.

Making sure your form fields are presented with a consistent size is part of form best practices. This improves the rhythm in which the user can easily read, understand, and progress through your forms.

Your site visitors and potential customers are not super likely to complete any long forms and will decrease your average conversion rate. Having optional fields can help lessen the intensity of a form’s appearance.

Users Can Tab Through Fields

Being able to easily tab through contact form fields in their intended order is incredibly helpful for your desktop users. This improves the speed at which they can complete your form.

This way potential customers and qualified leads can lead the conversation to only what fits for them and they want to get out of filling out your form. This can make things quicker for users do not have to fill out unnecessary form fields and shorten the overall form.

Keep Labels Visible

Use Placeholder Text Effectively 1

If you’re trying to project a sleek, minimalist image on your business website, you may be tempted to remove labels in favor of just keeping placeholder text for form fields. Don’t do this — it hurts the user experience when they forget what field they’re filling out. It adds friction to the process when they have to erase their answers to verify they’re filling out the right field.

According to this study from Google, the most usable web forms have field labels above the corresponding input fields for quick reference.

Use Placeholder Text Effectively

Instead of using the placeholder text to repeat the label name, you should instead use it to present ideal formatting clues. This will ensure that the data entered in the fields better matches your ideal, making it easier for you to sort the information you’ve gathered.

This is especially relevant for fields that deal with information that can be formatted in many different ways, such as dates. Do you want them to enter January 3, 2022, 01/03/22, 03/01/2022, or 01-03-2022? Alternatively, you can also utilize dropdown menus to lessen confusion over formatting.

Have Clear Active States

Clear Active State@2x

When your user is actively editing a form field, make sure there are clear visual cues for them to know what they’re editing. You can accomplish this by highlighting the current field in a different color, making the lines more prominent, etc.

Have Clear Error States

Have Clear Error States

If your user makes a mistake while filling out the form, make sure they know right away and it’s clear what the error is.

For example, if you are asking for their email address and they messed up the domain name, your error message can say “Please use standard domain format, e.g. [email protected]” rather than “Invalid email address.”

Users tend to get frustrated from unclear error messages so by creating a clear and direct error message this will lessen the headache for you and your customers.

The Button Must Stand Out

The Button Must Stand Out

If the dominant color on your webpage is green, what should the color of your “submit” button be? If you think it should be green to match the rest of the page, then stop right there.

The best color for a call to action button, as reviewed by OptinMonster, is one that stands out from the rest of the page. In our previous example, the best color would be red, as it’s the complementary color on the opposite side of the color wheel. This helps draw attention and make the button obvious and visible to your users.

You should also ensure that the button has clear states for hover and click for even more visibility.

An additional tip for increasing the effectiveness of your call to action button is adding a testimonial within the page. A good testimonial might just be the final push for someone to make that click as social proof can boost the number of sign ups your form gets (and your sales team will thank you later!)

Optimize Your Fields for Mobile

In 2020, 68% of global website visits came from mobile instead of desktop. This means that when you want to make a truly great B2B website, you need to make sure it looks good on a mobile device.

Make sure your contact forms are optimized and you’re taking advantage of the right mobile keyboard functions per field and a user can easily cycle through the fields on their device. Since to make your short form mobile friendly you have to find of how mobile responsive your form is, due to this you might need to create a mobile version of your form that allows mobile users the ease of use when they are answering your form.

This may end up differing from the desktop version of your web form.

Make Sure There’s a Clear Confirmation

It’s frustrating when you click submit on a contact form and the website doesn’t tell you whether or not it worked. Should you wait and see if it gives you any confirmation? Should you fill it in again?

When your user completes the form, it should be obvious to them. An entirely separate “thank you” page is the most preferable option as well as one of the form design best practices for form completion.

CHAPTER two

What Form Fields You Actually Need

Now that we’re done with the general conversion tips, you might be thinking “Everyone says ‘make your form shorter,’ but what fields do I actually need to keep?” Let’s start with what people don’t like filling out:

What Form Fields You Actually Need@2x

In the era of data privacy concerns, people are more and more hesitant to give out information like phone numbers and address information. Even if you leave a note that says “We value your privacy. Your information is safe and will never be shared,” the person filling out your form has to take that promise at face value because you haven’t earned their trust yet.

If your contact form is currently asking for personal data, you’re likely putting yourself at a disadvantage. Asking for this information runs the risk of scaring off your users but it remains a common website mistake

In reality, most B2B contact forms only need the following information:

  • Name
  • Email Address

Seriously, that’s it.

If that doesn’t feel like enough information, let’s talk about how you can gain more while still keeping your form as short as possible.

CHAPTER three

How To Improve Lead Quality

So, you now have a name and an email address. That’s plenty of information to start with — provided you use the correct tools.

Use Email Automation To Further Qualify

Getting people to fill in your contact form is the initial goal, but your overall goal is to nurture your leads and eventually convince them to buy your product or service. The first step to getting more information out of an email address is setting up email automation.

By using email automation to follow up on form submissions, you immediately accomplish two things: you ensure that the email address they submitted is valid and you begin the sales process. 

A crucial component to the latter objective is sending a personalized email instead of a dry general email. This immediately starts building trust and start to increase conversions. You can even use it to ask 3-5 additional questions you may need to know to qualify the prospect.

Here’s an example of an e-mail we automatically send after someone fills out a form:


Hi First_Name,

To make sure we understand what you’re looking for, please share some information about your project:

  • Are you looking for a single project or ongoing work? Or both?
  • What are the biggest challenges/obstacles with your current website?
  • What’s the project timeline/level of urgency?
  • How much are you looking to invest in this project/engagement?

If you’ve already prepared some useful information, such as an RFP or scope of work, please feel free to attach it to your reply, we’d love to see it.

Looking forward to your response!

Cheers!

Jack Morrin

Sales Coordinator


This simple touchpoint allows us to quickly create an additional touchpoint with the prospect and ask a few additional qualifying questions that are super important for our sales team.

Protip

Review the email follow-up questions above. Would you answer those if it was part of the initial form? Probably not. Keep the initial experience concise and engage more after the form has been submitted.

Use 3rd Party Tools To Augment Data

You can use an email address for more than just sending emails — it’s 2022, technology is available to help you get data on prospects even if they didn’t personally submit that data to you. You can integrate a tool like ClearBit with your CRM to automatically pull information based on an email address, such as insights like their full name, job title, and company demographic information.

jeff linkedin profile

“It’s 2022, you shouldn’t need to ask people in your form where they came from. Use analytics for attribution and tools like Clearbit to know both more about where they came from and who they are.”

– Jeff Gapinski, Co-Founder

CHAPTER four

Why & When To Use Multi-Step Forms

Mult step Form Example@2x

So, as we’ve previously established, you should be keeping your contact forms as short as possible and to roughly one page. However, what if you absolutely need that data? Applying contact form best practices to a form that requires more than 10 entries requires the use of multi-step forms with multiple fields. 

After being told that you only truly need a name and an email address on the contact form, you might be confused as to why you would ever need a form long enough that it requires multiple steps. The reasoning is simple — it depends heavily on the purpose of your contact form.

Imagine that you’re shopping around for an estimate on the value of your house. You see a real estate agency that promises a free online estimate, but the only thing their form asks is a name and an email address. What insight could they possibly offer you with only that information?

Multi-step forms are amazing solutions for longer forms, such as an application or registration form. They’re also a good way to get more information from your leads — starting with “low-friction” or “low-threat” (e.g. what service are you looking for?) fields.

These can engage them and allow you to ask more sensitive questions near the end when it’s less likely for them to back out because they’ve already invested time and effort. Multi-step forms that include a progress bar are also effective at getting users to complete forms, due to the “endowed progress effect.”

When making a multi-step form, the same conversion tips apply. You should keep each batch of fields short so you don’t overwhelm the user.

A case study from Venture Harbour saw a 53% increase in conversion rate when they formatted 30+ questions in a four-step form. Data from Formstack backs this up — multi-step forms have a completion rate of 13.85%, compared to 4.53% on a single long form.

CHAPTER five

Why & When To Use Embedded Forms

Many businesses keep separate service pages and contact form pages. However, forms that are directly embedded in landing pages tend to outperform CTAs to open a separate contact form page. The reasoning is, as always, convenience. 

Whenever you can, you should try and incorporate a contact form directly on key landing pages, ideally above the fold of the page and again at the bottom of the landing page. It should also stand out from the rest of the web page elements so your user can find it easily. 

If you’re following the previously highlighted conversion tips (i.e. keeping forms concise), then this should be relatively easy to accomplish from a design perspective.

CHAPTER six

How To Keep Forms Secure (Without Hurting Conversions)

On paper, Completely Automated Public Turing test to tell Computers and Humans Apart or CAPTCHAs are a great way to reduce spam and ensure you’re getting quality information from your form, but did you know that visible CAPTCHAs actually hurt conversion rates

How To Keep Forms Secure@2x

According to this case study from Moz, having CAPTCHA on reduced the amount of spam conversions by 4.1% but companies could actually lose out on 3.2% of genuine conversions. This is likely because CAPTCHA has become too difficult and confusing, in an effort to combat the increasing sophistication of spambots.

It simply isn’t user-friendly — who wants to take the time to puzzle over a distorted set of letters or numbers and painstakingly type them out? 

Instead of using CAPTCHA, you can look to alternatives that are convenient or invisible to the front-end user but still keep spam and brute force attacks at bay. One such example is Google’s reCAPTCHA, which can be as simple as clicking a checkbox.

CHAPTER seven

Tracking Performance & Making Improvements

Whenever you make any type of changes to your contact forms, it is downright impossible to truly understand their impact without tracking performance. Here are three key tests and methods you should be using to track improvements:

Set Up Goals

Using Google Analytics (or your preferred analytics tool), make sure each form on your website has a unique goal attached to it for completion. This will give you a better understanding of the success rate of filling out these forms.

Use Behavior Tracking

Using tools like Hotjar or LuckyOrange will provide you with a better understanding of how people are interacting with your contact forms in real-time. This could help you identify drop-off points or even bugs within the forms themselves.

Split Test

Tools like Optimizely, VWO, and Convert allow you to easily and effectively set up split tests. In these scenarios, you can run variations of form configurations side by side and understand how they truly are performing.

Split tests can help you pinpoint which elements of your contact forms help or harm your conversion rate. The more tests you perform, the better optimized your form will be by the end. 

CHAPTER eight

Wrapping Up

That finishes our rundown of contact form best practices. Contact forms are one of the biggest opportunities for businesses to improve both the quality and quantity of leads, so make sure you never neglect to optimize them. Pay attention to contact forms as an integral component of any web development effort, and always keep these three conversion tips in mind: 

  • Keep them as concise as possible.
  • Use other methods to get the additional info you need.
  • Test and monitor all of your improvements to maximize your results.

Remember, at the end of the day a good contact form is one that provides a pleasant user experience, and you can’t have that with clunky fields or long pages. We hope this article helped you learn some great ways to improve your contact forms and generate more conversion. For more in-depth articles on the ins and outs of digital marketing, check out other posts on our blog.

Meet The Author

Jeff Gapinski is the President of Huemor where he helps plan the long-term strategic growth of the agency. Jeff is passionate about UI/UX, demand generation, and digital strategy.

Originally Published

March 8, 2022

What Do You Think?

Have feedback? Maybe some questions? Whatever it is,

we'd love to hear from you.

2 Comments

  • Ray L Best 03/12/2022 4:15 pm

    Our site www.unavida.co.uk looks dated, it is fronted by a video and been designed with old code (not CMS), we have downloadable-books but have only just discovered that the auto responders were not properly set up. We asked our web master to quote for providing two interactive tools - she said - go find a graphic designer, We want a modern contemporary look and feel to any re-design - with better use of video - interactive tools - downloadable e-books - so we can set up ppc. A local web designer provided a quote of about 10 lines which does not provide any indication of how they will go about improving the site. We would like to know :- Where are we now with analytics How can improve the site so it is highly responsive and that we receive monthly feedback RL Best

    • Jeff Gapinski 03/16/2022 12:18 pm

      Hey Ray! First of all, thanks for reading the article and taking the time to reply. Secondly, I can understand your frustration. Not everyone is equipped to handle a redesign, and it sounds like you're unhappy with the state of the current site. This process should be really well thought through and executed to not only ensure you get an end result you're happy with but something that actually moves the needle in terms of your goals. I'd start by checking out our article on how to plan for a website redesign. If you're interested in learning more about how we can specifically help you out feel free to reach out to our sales team to book a consultation.

Leave a Reply

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

blog footer graphic

Are you ready for a memorable website?

Find out how we can help you achieve your goals by setting up a call with Mike, our co-founder.