How to Build Forms That Actually Convert โ€“ A Guide.

People hate filling out forms. But we’ll show you the exact steps of building click-worthy forms that actually convert. Start getting better form conversions today!

Smartphone lies on a table with the post it notice SIGN HERE

Patrick Mitter /

19.01.2022


If youโ€™re a fellow online marketer, youโ€™ve read your fair share of recommendations to help get more leads โ€“ and better leads โ€“ just by tweaking a few things in your conversion form. 

But what if your form still doesnโ€™t perform well? 

What if, instead of gaining leads, youโ€™re essentially losing customers because of your form?

Letโ€™s pause for a second here, take a deep breath and ask ourselves this question:

Have your conversion forms fallen from grace, because you just couldnโ€™t stop optimizing them? 

Is it possible that you focused on absolutely mistake-proofing your forms, and forgot the one key element of creating anything worthwhile clicking: 

Having some fun along the wayโ€ฆ and doing some testing to know how to get there! Because, as anyone whoโ€™s ever watched Friends knows: We need to control the fun.

Klicken Sie auf den unteren Button, um den Inhalt von giphy.com zu laden.

Inhalt laden

via GIPHY

If we do vigorous testing, we can try out fun features and fall back in love with building conversion forms โ€“ because theyโ€™ll actually convert.  

But for anyone whoโ€™s been scratching their heads for the past minute-or-so, asking: โ€œwhat even is a conversion form?โ€, letโ€™s take a step back, and clarify the fundamental question: 

Whatโ€™s a Conversion Form Exactly?

A conversion form is used by businesses to collect user data (name, email address or other information) to complete a predefined goal (=conversion). 

This could be: 

  • making sales
  • generating leads
  • sales leads
  • and a million other things, depending on what action a business wants their users to take.

Basically, they could be anything from contact forms to feedback forms โ€“ or even research forms.

If you want to track the performance of your form, hereโ€™s a helpful formula to keep in mind:

You can measure performance by tracking your conversion rate:

Screenshot conversion rate

Cโ€™est formidable! Right?

Now that weโ€™re done discussing what a conversion form is, letโ€™s get to the fun part: How to build a click-worthy form.

Klicken Sie auf den unteren Button, um den Inhalt von giphy.com zu laden.

Inhalt laden

via GIPHY

Covering the Basics: How to Build a Good Conversion Form

At this point, Iโ€™m also assuming that youโ€™ve covered all the basics regarding your form: 

  • Youโ€™ve made sure itโ€™s GDPR compliant.
  • It has been adapted to your websiteโ€™s design
  • It doesnโ€™t look like itโ€™s from the nineties, like the one in this example: 

Great! Youโ€™ve managed to create a form that covers all the basics, and up until now everything sounds quite simple. Your form looks nice, and it respects your userโ€™s data privacy. This is where you should start generating leads, right?

Well, there might be a tiny problem that, as much as weโ€™d like, we cannot ignoreโ€ฆ

The problem: Nobody likes filling out forms.

Iโ€™m just gonna say it: People hate filling out forms. 

Hereโ€™s a little summary of my morning: 

  • 08:30: I just want to connect with the hotel wifi to write this blog post, why do you keep saying I have to state my room number to access it? I havenโ€™t even had coffee and you expect me to remember what room Iโ€™m in? Give me a breakโ€ฆ
  • 08:36: Ok, I managed to connect to the internet. Now I just want to watch this music video in peace, but why would you want me to sign up to YouTube Premium?
  • 08:39: Ok, I got the music going, I got my coffee โ€“ letโ€™s do some research. Yes, I want to download your free ebook!
    But why would you need my data for that? Ah, what the heck. I really want to download that ebook. There you go, hereโ€™s my social security number.*

(*Alright, I might have exaggerated in the last example. I didnโ€™t end up reading the ebook, and I didnโ€™t really give anyone my social security number. But you get my point. )

Iโ€™ll say it again: People hate filling out forms. Itโ€™s tedious, and everyone and their mom and uncle and their sister nowadays knows about data privacy (which, by the way: Good for them!). So you, as a web creator, have to give them a reason to jump through all the hoops youโ€™ve set up for them. 

When in Doubt, Follow the Mozart Method.

Ah, Mozartโ€ฆ Classical music virtuoso, Wunderkind. 

You might think: What does this have to do with conversion forms, let alone great web design? But hear me outโ€ฆ

There is one factor that undeniably distinguishes Mozartโ€™s music from his contemporaries: 

His music doesnโ€™t lack any notes. It has all the notes it needs.
But, also, his music has no fluff, nothing unnecessary

This dialogue takes it home: 

EMPEROR Joseph: Too many notes.

MOZART: I donโ€™t understand. There are just as many notes, Majesty, as are required. Neither more nor less.

Of course, this is just a line from a movie, but it describes perfectly how to craft a user-friendly experience โ€“ in this case, a form. 

How to use the Mozart Method for conversion forms:

  • Remove the fluff. 
  • Make it as simple and intuitive for the user as possible. 
  • I also had a third sentence planned, because I love the rule of three. But then I deleted it, because basically it was fluff. You see what I did there?

Basically, the Mozart Method is supposed to help you eliminate hiccups, remove anything the users might stumble upon that might keep them from doing what you want them to. 

After all, you donโ€™t want them to just fill out your form halfway and then abandon it, because of error notices or other minor setbacks that could have easily been avoided. 

Less steps = better conversion rates, we all know that. 

But also: Less steps = less opportunity for setbacks.

Letโ€™s see how we can identify the hiccups, so you can start having fun designing your forms. 

How to Fall Back in Love With Your Forms and Get Better Form Conversions

What Really Matters for Your Form Conversion

Now comes the technical aspect of everything I described above. Up until now everything sounded more or less visceral. Keep your notepads ready.

Hereโ€™s exactly how to make yourself fall back in love with your forms and please your website visitors along the way. 

(Please them, so theyโ€™re gullible. And theyโ€™ll give you your social security number for your free ebook. Insert evil laughter here.)

  1. Study heat maps to identify user behavior, and most importantly, any hiccups.
  2. Build a thesis.
  3. Perform A/B-tests to test your thesis.
  4. Work with the outcome.
  5. Repeat.

Itโ€™s as simple as this. 

But enough with the theory โ€“ letโ€™s go to some practical insights. I want to show you some conversion forms Iโ€™ve found that I think are noteworthy โ€“ and might help you gain some ideas. 

Conversion Forms: Best Practises

Example 1: Hootsuite

A few days ago, I was comparing Content Automation platforms. And thereโ€™s one that stood out โ€“ not actually in terms of functionality, but in terms of this glorious piece of conversion form youโ€™re going to witness here:

Screenshot website Hootsuite

Whatโ€™s beautiful about it: 

It evokes emotion. It catches you off guard by reminding you that a human being wrote the lines youโ€™re currently reading, because it talks to you like a human. And, of course, in combination with the cute dog that looks right at you, it makes you think: Well, Iโ€™ve got nothing to lose. Letโ€™s start the trial and get this content automation party started. 

Example 2: NetrixDigital

Another beautiful example (on an overall beautiful website) I found is the contact form on the NetrixDigital website. Letโ€™s have a look:

Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklรคrung von Vimeo.
Mehr erfahren

Video laden

Whatโ€™s beautiful about it: 

This contact form is just fun to use. Like the example above, it manages to partly remove the barrier between the screen and the person filling it out. 

This time, they do it by creating an organic feel within the very digital experience they offer. The lines are written on what feels like paper, and when you click a button it looks like youโ€™re, imperfectly, outlining it with an orange pen. 

Itโ€™s a very pleasant experience.

Even if you donโ€™t want to work with them: You kind of want to hit that โ€œSendโ€ button just to see what happens.

Example 3: Multi-Step Form Done Right

This next conversion form is a nice example for multi-step forms (which can be quite boring to complete) that manage to keep the user engaged. 

How do they do it? 

Well, for anyone whoโ€™s not fluent in German, Iโ€™m talking about a form that lets users obtain an offer for photovoltaic systems. As you can imagine, the process is a bit more complicated than, letโ€™s say, subscribing to a newsletter. 

But the designers managed to make filling out the form a pleasant experience by using images. Without them, the whole process could be a bit dry, even dull. 

Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklรคrung von Vimeo.
Mehr erfahren

Video laden

Choosing between different kinds of housing conditions or the various kinds of roofs is not only easier, but also more fun when you can just click an image that speaks more than a thousand words.

How to Build Conversion Forms in WordPress

Now that youโ€™ve gained some โ€“ hopefully very helpful โ€“ input for your form conversions, can we just take a second and rant about conventional ways to create any types of forms within WordPress?

Weโ€™ve talked about why you should purge your WordPress contact form plugin before. 

Many of them are not exactly GDPR compliant, and more often than not youโ€™ll have to use another plugin if you want to use double opt-in.

Or youโ€™ll have to pay for the premium version of a contact form plugin to be able to style the form according to your website (or, ugh, use custom CSS to match the design manually).

If youโ€™re like me and you would rather focus on content instead of code, GREYD.SUITE is the answer for you. 

Bottom Line

Creating conversion forms has never been easier, but creating good forms that actually convert might not be as easy as it sounds. 

Remember these things to fall back in love with your conversion forms: 

  • The Mozart Method: Remove any hiccups that might occur within your conversion forms, so that users actually stay interested and complete the form.
  • Identify user behavior by studying heat maps and adjust accordingly. 
  • If youโ€™ve had enough of subpar contact form plugins, try GREYD.Forms instead.
  • Donโ€™t forget to have fun along the way!

By Patrick Mitter

Patrick loves good texts. Preferably about topics concerning online marketing and WordPress. Having built websites by using well-known page builders on his own and being very experienced in the SEO industry, he is very familiar with any kind of problems regarding those plugins. This is the reason why he adopted Greyd’s mission to simplify work for web designers as well as agencies.

Recent in Learn

A split collage showing partial screenshots of the websites for WP Umbrella and ManageWP, separated by a question mark. The image hints at a comparison between the two WordPress management tools.

Which WordPress management tool is best for you?

Read more

Close-up of hands typing on a laptop keyboard, representing the simplicity of performing a keyboard accessibility test.

Accessibility 101: How to perform a keyboard test

Read more

What To Do, When Your WordPress Site Got Hacked

Read more

A pen rests on top of a stylized table grid with the HTML tag prominently displayed in bold white text, symbolizing the structure of tabular data in web development.

Use Case Tutorial: When to use a table instead of a div

Read more

greyd sustainable websites blog

10 Tips for Sustainable Websites

Read more