Let’s get social

Design Growth Strategy

How to design high conversion lead generation forms7 min read

October 30, 2019 5 min read


How to design high conversion lead generation forms7 min read

Reading Time: 5 minutes

I’m so fussy about what I subscribe to. Simply because I don’t want to trash my inbox a couple of times a day and to be overly full with unnecessary emails again.

Sо now you understand why it’s so tough and important, at the same time, to design forms that really convert and capture more leads. No matter what you are working on, it will always pop the question “But how to do it actually?”.

You need to follow a handful of rules, which we determined during our years of experience. It’s as simple as that.

01. Form position

Place your form above the fold

If you want your users to fill out the form, why don’t you place it somewhere where it’s easy to find and use? Place your form straight above the fold.

This way, it doesn’t matter what your bounce rate is and where the users start dropping off your website, the form will be the first thing they will see when entering your website.

Place CTA that triggers the form above the fold

If you need more space to convince users to fill out your form, you can place it behind a trigger button. You will be able to reduce the distractions by designing a dedicated page, where to put your form.

Try to avoid putting navigation or any other distraction, the focus should be on the form itself.

02. Write a descriptive call-to-action copy

The content of your CTA’s should be really well-crafted. It not only determines whether users will take action or not, but also how many. Just please go further than “Submit”.

Know your audience

In fact, the most important thing when you write a text of a call-to-action button is to understand whom you are talking to. Whether the language will be more formal, or more casual, depends on the product and its users, not by your opinion or mood of the day.

Not necessary to be one-word-only

We all know the basic rule to “keep it short and simple”. However, sometimes disregarding the rules is the best you can do!

Just be direct and concise when guiding your user and talking to him or her, nothing more. It’s not wrong, if your CTA isn’t foolishly short.

03. Reduce the amount of input fields to bare minimum

Leave only required fields

When you see many fields for filling, you will most probably skip. First, because your time is precious, and second, because you’re lazy in typing, let’s admit it finally. You are not your user, but in this case, this rule engages all human beings.

Conclusion: show only the required fields in your form, and leave the not-to-die-for information for later.

Split long forms in multiple steps

Well, if you do have many fields which are required or just can’t be skipped, the simplest solution is to just split the form in multiple steps.

This way users will not be overwhelmed with many fields at a time.

04. Let the user complete easy tasks first

Whether your form is long or consists of a few fields, you should always start with the ones that are easy to fill.

Don’t you feel satisfied, when you complete a task? It’s the same feeling you’re giving to your users, when you’re allowing them to complete an easy task, or showing them they’re almost to the finish line. The chances to convert are this way much higher.

Users are tasks-oriented, so the forms should have a beginning and an end. They should know where they are at each step of the journey. If you have something easier like Radio buttons or checkboxes, you can start with it.

05. Collect sensitive information at the end

Following the fact that it’s satisfying to complete a task, forms should collect sensitive information at the very end.

This way it’s much more likely for the user to give that delicate data.

06. Use containers and directional clues

The purpose of your form is to stand out of any other content on your page. The easiest way for that is to put it in a container and style it differently.

It doesn’t need to be too catchy, sometimes changing the colour background of a container works perfectly fine.

Directional clues are a way to improve your conversion rate, since they’re focusing user’s attention on the right path, meaning where to go next.

07. Reduce frustration with instant validation

Validate each field

The data in the form should be instantly validated. This way you’re showing the purpose of the form to your users clearly. You can do it by confirming if the given information is correct.

Reduce the risk of error

Use Select 2 or Typeahead, when possible.

08. Solve a real problem

It’s even more satisfying, when your design shows a direct solution.

Cheat sheet: you can lead your target user through a short quiz, which copy promises that the results of it could double the performance of your website.

To receive the personalised results, the user should only fill a simple form with name and email at the end. Tempting, right?

09. Add a social proof

If you want users to download that fuckin’ ebook you wrote by leaving personal information like name and email, you have to directly show them how this book will help them and what they will learn from it. People trust numbers, for example.

Adding a social proof in forms is a key way for optimising their usage and purpose.

10. The perfect input field

Input fields are the core element of a form. It’s the element user interacts most with, and should be carefully designed. Here are some best practices.

Best practices

  1. Make sure user can understand the state of a field immediately. Disabled or in focus mode? They both are important to use.
  2. Use leading icons. Even though it’s not necessary, they improve the UX for sure.
  3. Write clear and precise placeholder texts, and make sure they have a contrast to avoid misunderstandings.

Big No’s

  1. Do NOT design input fields to look like buttons. They are two different things and should be styled differently.
  2. Do NOT write long sentences for labels. If you have to explain an information, just put it as a helper text. Only that helper text is okay to be on multiple lines.

You guys enjoyed our article? If you found helpful lines here, well… Go subscribe into out form now.