UX Design
10 min read

The UX Behind Contact Forms - How to Create a Kickass SaaS Contact Form

Written by
Saad Arafat
Published on
August 6, 2022

Overview

If you’re in the B2B SaaS space using a demo, free trial, free consultation, or any similar onboarding strategy for your SaaS business that requires your prospects to sign up a form to book it, this article is for you! Since your contact form is what will help take the hard work you've put in capturing leads (Whether organically or paid) and turn it into business opportunities.

This means that during your redesign process, taking into account the UX aspect of the contact form is as important as understanding the UX of your hero section and should be part of the overall marketing funnel, not just an afterthought.

So having a well-designed, well-thought of form will improve your conversion rates by capturing the attention of the prospects and removing any friction or doubt from reaching out to you or booking the demo you’re offering.

In many cases, when you’re working on improving your lead funnel, the first and easiest thing you can start with is your contact form. And if you think about it, it makes total sense to start there. Since in many cases, the previous steps in your lead funnel are all working perfectly, but the contact form is what’s working poorly in it.

So in this article, you’ll learn how you can quickly improve your contact forms based on your goals and how you can improve your conversion rates without rethinking the entire flow of your marketing funnel.

Let’s get started!

Principles to stick to before redesigning your contact form

At UNIMA, we like sticking to a few best principles when working on any part of a website. These tips help guide our work and ensure we're not overdoing the redesign.

1. Show them what the form is for

How many times while browsing a SaaS website you’re interested in and ready to click on the (Get a Demo) button find yourself being sent to a general contact form that is used to (Contact) them? Frustrating, right? Even from the SaaS owner's standpoint, it creates a mess in their inbox. Using the appropriate form for the related call to action button is step one in improving your contact forms. Plus, that way you'll be able to clearly communicate which form your visitor is filling out.

Show them what the form is for

2. Keep the form SHORT

You want them to hit that submit button with their name and email at a minimum. So always avoid long forms when possible. Depending on the form's purpose, you will need to customize the form's fields, but you always want to keep it short. See the below example for reference.

Keep the form SHORT

3. Give the option to click “TAB”

When filling out the forms, most of us are used to just moving to the following field using the Tab button, it’s easier and faster, and we just got used to it. So make sure that your prospects can do the same with your forms.

Give the option to click “TAB”

4. Consistent design always looks better

Consistent just feels good. Our minds are used to identifying patterns, so red flags are raised when it's broken. So this is a simple principle that'll make filling out the form a bit more pleasant.

Consistent design always looks better

5. Ideally have clear labels

Having clear labels will make it easier for the prospect to always know which field they’re on and not get lost when they leave the page for a moment and get back to it later. In some situations, you might opt for a more minimalistic design (Left form). This form will work fine if you don’t have too many fields. So if your contact forms are relatively long (6+ fields) I’d opt for the design on the right with always visible labels.

Ideally have clear labels

6. Explain the input with Placeholder texts

Using the placeholder space to explain what you expect the visitor to type in the field is another great way to reduce friction when filling out the form. So, use it to your advantage and make their life easier.

Explain the input with Placeholder texts

7. Show them what they clicked on

Make sure you help the visitor know that they clicked on the field and can fill it out. This is done by highlighting it with a more prominent color.

Show them what they clicked on

8. Show them when they make an error

Errors will happen, so it’s better for the user to catch them early before hitting the submit button. So make it easy for the user to know when they’ve made an error and what the error is so they can fix it immediately. Some of the common errors are: not a valid email address, only professional domains are accepted, not a valid number, or this is a required form.

Show them when they make an error

9. The form should look damn good on mobile

At least 50% of your visitors will take action from their phones. This means that if your form is not responsive or doesn't look good on phones, your visitors will have a hard time using it, which will lower your conversion rate.

The form should look damn good on mobile

10. Have a clear “Submit” button

Your button should stand out from the rest of the form. Usually, it might be similar to the rest of the call-to-action buttons you have on the rest of the website. BUT, Hold up, if you have a couple of other call-to-action buttons within the same screen-view, then it should be in a different color to make it stand out not just from the rest of the form's content but also from the content of the page itself.

Have a clear “Submit” button

11. Confirm that the message has been sent

Your visitor should know that they’ve successfully filled the form. You can achieve it in multiple ways, displaying a pop-up or sending them to a thank you page. You can additionally send them a confirmation email with extra details for them to go through later in the day.

Confirm that the message has been sent

So, what do you actually need to ask from your prospect

It doesn't matter what you need from your prospect before hopping on a call with them or giving them the demo, the principles will always be the same.

What will change is the content of the fields and how you’re going to lay it out.

In some cases, you only need text-based forms. In other cases, you need a mix between checkbox, short-form, and long-form text.

And in FEW cases, you'd require to form the user to upload a file (Not recommended unless it’s an absolute necessity).

But most B2B SaaS businesses require the following

  • First Name (Always necessary)
  • Email (Professional email)
  • Company Name (So you can research them)
  • Position (So you know if they’re decision makers or not)
  • Company size (To know which solution package is the best fit for them)

Any extra fields are just going to do more harm than good. Yet again, in some very niche cases, you might need more. But those 5 fields are more than enough.

What type of form do you need?

Depending on how many pieces of information you need from the visitor, the form type will differ from one website to another. Let’s discuss each one of them and when to use them.

1. Simple forms

This is what you’d see in straightforward contact forms. It’ll have 3 - 5 fields that are all text-based, or you might have one dropdown field, but that’s it. In most cases, it’s better to use a simple form because it’s straightforward & low friction.

Simple forms

2. Multi-step forms

Multi-step forms are used to lower the associated friction and create a seamless experience even when you ask them to fill out 15 fields since it feels less intimidating than having 15 of them laid out one after the other on one page. Check out the example from NerdWallet. You can clearly see how good of an experience they’re offering their visitors with this multi-step form.

Multi-step form

What to do after they fill out the form

Now you designed the form, deployed it, and they filled it out. What can you do next to keep an enhanced positive experience? Here are 4 things you can do.

1. Send them more value!

With the confirmation email you sent out, you can also send them a piece of extra helpful information. A quick tip or guide on a solution they can implement themself and see value out of it. This will help position you as a thought leader and build a slow yet good level of trust even before meeting them over a video.

2. If they did not attend the demo, read the report or are not ready to buy yet, do this

If they opted in to receive your newsletter, then that’s great!! Use it to your advantage and keep pumping out valuable content to stay on top of their minds and to be their go-to solution provider even if they did not become your client after the demo or sales call.

3. Understand them, use the data (Need to do)

If they did not opt for your newsletter, you should try to understand why they did not hop on the call or why they did not buy the solution. This data will help you get an idea of the type of people you’re getting through your funnel and will make it easier for you to refine it as you go.

Also, you need to know why they bought your software so you can use their words to capture more leads.

4. Track performance, and test (Need to do)

As with everything, you might get instant results from tweaking your contact form, or you may not. In both cases, you keep testing new methods and assumptions as you never know what might yield the highest result. If your contact form is working, great for you, then you know you have the leeway to test in other areas of the marketing funnel. If not, then you can keep testing out with different designs.

Final thought

As you know by know, there are multiple ways you can go about creating and improving your existing contact forms. And no matter what type of forms, fields, or designs are used, all should follow a set of principles that'll ensure you have an effective contact form that'll help increase your conversion rate.

Ready to upgrade your website?

Try us out for 7 days risk-free. See firsthand how we work, then make a decision on whether to keep us around.

Book a Call