Form Design for High-Converting B2B Landing Pages
In previous articles we’ve looked at the overall information architecture of a B2B lead gen landing page and considerations around the call-to-action.
Once those parts of your landing page have done their job there’s one crucial step remaining – you need the visitor to complete and submit a form.
In this article we’ll look at how to design your B2B landing page forms to get the best possible results.
The form’s place in the user journey
Remember that the form is a step in a user’s journey that started – probably just a few seconds ago – with a search engine.
Your enemy is – still! – the back button. If you present a visitor with a form that is too time-consuming, or too intrusive, or that undermines the impression of your brand, they will abandon your landing page and try somewhere else. You’ll lose conversions to your competitors.
Let’s look at some ways you can maximize the results from your lead gen forms.
Choosing form fields: keep it simple
User experience research has shown that adding more fields to a form reduces average conversion rates. This makes sense: each extra field increases the time and effort that your visitor must commit to fill in the form so increases the risk they’ll hit the back button instead. If you want more conversions from your forms, keep the number of fields to the absolute minimum.
As well as using as few fields as possible, some other tips that will help with conversion:
- Don’t make a field compulsory unless it is really essential that you gather that data. An optional field still adds to the complexity of the form, but at least the visitor knows they can choose to skip it.
- Make sure that field names and labels are easy to understand. With technical B2B subject matter you might have some jargon terms that don’t make immediate sense to every valid prospect. There’s almost certainly a clearer way to ask the question.
- Make sure that your forms are coded so that the autocomplete functions in a web browser can operate correctly. (There’s no substitute for testing this on a real device!)
- Consider using a single open-ended question (like: “Please tell us about your requirements”) rather than a whole list of specific questions.
Consider where to put the form
An important design choice is whether to embed the whole form in the landing page, or whether to keep the form off-page in a lightbox or pop-up (with just a button on the main page to trigger the pop-up).
Both approaches can work. But for most B2B lead gen pages we prefer the lightbox/pop-up approach, for several reasons:
- It frees up space on the main page for other, more persuasive design and copy elements
- The lightbox can be used to show other information (for example, to set expectations about how and when someone will receive their sales follow-up) that helps support the conversion action
- A single lightbox can be reused across many different landing page layouts, whereas an embedded form has to be integrated with the other design elements.
However, if your form is VERY simple – say, just a single field with an email address for a newsletter signup – you might get more conversions by embedding it in the page so that it’s immediately apparent to the visitor just how simple you’ve made the conversion journey.
Wherever you choose to locate the form, give some thought as to visibility of the submit button. It’s easy to create a tall form where the input fields push the submit button below the fold. This has two bad consequences: it implies that there are more fields, perhaps MANY more fields, which is a deterrent to a person even starting to fill in the form; and it introduces confusion and doubt about how to actually submit the form. Both of those will harm conversions. Make sure your submit button is visible above the fold!
Remember your form is still part of the conversation
Marketing is a conversation and B2B buyers are, on the whole, pretty smart people. Technical choices you make about your form will communicate things to your intended audience. And they are likely to be things you didn’t really want to say to them. Here’s a real-world example (I won’t name the offending site):
What does that say to a visitor from, say, the United Kingdom? “We’re a US company and, if you’re from the rest of the world, alphabetical order is all you deserve.” Great news for prospective buyers from Afghanistan and the Aland Islands. Not so helpful if you’re from Great Britain, England or the United Kingdom. You might as well have gone with this:You might as well have gone with this
Another example from that same site – what does this say to the prospective software buyer?
“Our sales team have asked us to make it clear to you that they don’t even want to talk to you unless you need at least 50 licenses.”
Here’s how that looks to the visitor:
Think how crazy this is – at this lead gen stage, a person enquiring probably
doesn’t even KNOW how many licenses they need! “THAT’S WHY I WANT TO
TALK TO SALES!!” There isn’t even a default “not sure yet” option here.
Your visitor is smart and they are going to make judgements about your
company based on the way you talk to them. Your website forms don’t get a
pass in this respect. Think about the questions and the implied messages they send.
Styling the form
The visual style of your form also communicates something to your visitor. Are the fonts, colours and spacing congruent of the form with the rest of your visual branding? Or do they look like throwbacks to the early days of HTML?
There are often technical trade-offs here. If your form is a connection to a back-end CRM system, it might be more technically convenient for you to directly embed a form that’s designed and styled within that CRM system. Those types of system often offer only limited control over fonts, styles and layout.
Alternatively if you design and build the form within the same CMS or page builder that you are using to build the landing page itself, you’ll get a lot more control over the visual appearance. But you’ll have a more complex technical integration task.
There’s no single right or wrong answer here. You might choose to accept a few visual compromises in return for a lower implementation cost. Or you might decide it’s worth the extra implementation effort to give the very best experience of your visual brand to the prospective customer. It’s worth actively evaluating the trade-offs when you’re planning your landing page design.
Testing and maintenance
It’s horribly easy to implement a form that looks good at design time but, erm, doesn’t actually work on the live site. Or to have a previously-working form break during a harmless-seeming site update. Perhaps a validation rule is wrong, or an API connection has gone adrift, or some privacy-related browser function is blocking the form submission.
B2B lead gen forms are particularly vulnerable to this type of failure because the frequency of form submission is low. It’s easy for a few days, or a few weeks, to pass without a form submission. No one notices that the form is broken and that conversions have been lost.
Some testing suggestions:
- Test your form on the live site as soon as it is deployed – on both computer and phone
- Repeat your live site tests at intervals and whenever there is a site update or a material tech stack change
- Use a screen recording tool like MS Clarity to monitor form usage and look for submission failures
Form design tricks for B2B conversion superheroes
Here are some of our very best B2B conversion tricks that don’t fit naturally into the discussion above.
- Multi-step forms: Ask a few questions and allow the form to be submitted. You have a lead! Now: have the form reload and use the same space to ask some more questions. Some people will be happy to give you additional information. And you’ve kept your form small and simple.
- Web-to-phone is still an option: Show a phone number in the form lightbox with opening hours. A person might decide to call instead of going to the trouble of filling in the form. You still get a lead!
- Don’t use a form at all! Chatbots are an emerging alternative to conventional forms and their conversation style can be easier for the user, especially on a mobile device. You can offer both, with a chatbot overlaid on a conventional form.
Our favourite form design
To wrap up – here’s an example of some of those best practices in action:
We’ve put that form in a lightbox so it’s easy to integrate with any other digital content.
We only ask for a single input field. And that’s left us plenty of space to that the action button is visible and we can provide some supporting messages about the benefits of subscribing.
And we’ve styled everything with our visual branding for a coherent, branded look.
So that’s a great reminder that if you’ve found this blog useful, sign up for our newsletter!
The final part of this series on landing pages will look at landing page platforms and some of the governance considerations that arise in managing landing pages over time.
Have more questions about high-performing landing pages, or B2B marketing in general? Please get in touch, one of our consultants would be happy to chat!
Are Google’s “AI Overviews” relevant for B2B?
Are Google’s “AI Overviews” relevant for B2B?
