How to Build a Form on Your Landing Page that Boost Conversions

landing page form

Building the right form on your landing page is a crucial factor. Let’s dive deep into this process.

Marketers have always put in a lot of effort towards achieving the correct keywords, creating ad copies that are persuasive enough and coaxing prospective customers to click on advertisements, but this is always not enough. When it comes to customer conversion, building the right form on your landing pages is a crucial factor.

Web forms are an integral part of most websites, and they show up all over the internet today. Their main benefit is to aid both users and businesses in achieving their targets by initiating a conversation between them. However, so many advertisers still get them wrong. Here are some key factors to consider when building a form on your landing page.

Where to display a form

Given that the landing page is all about trying to increase customer engagement and getting them to trust you, its ability to influence is vital. That is why you need a web form on the landing page. And, since engaged time usually peaks above the fold, your best shot at getting the most conversions form is to place the form above the fold. That is the part of the page visible without having to scroll.

how to build a landing page form

With your lead gen form and CTA accessible without having to scroll, your work of convincing potential customers becomes minimal, and there is little risk of losing the prospect. In fact, one study by Nielsen Group found that regardless of the user’s screen size, the average disparity in how they treated information above vs. below the fold was 84%.

However, there are a few cases where placing the form and CTA below the fold generated a higher conversion rate. If you are not sure what will perform better for your target audience, split testing is the best way to clear all doubts.

How to design a form

Wondering how you can design a suitable form for your landing page? Follow the steps below.

  1. The first thing you want to do in developing a web form for your landing page is to determine the kind of info you need to capture within the fields of the form.
  2. Next, you’ll want to go ahead and arrange the information types in a logical sequence. The goal here is to ensure an elaborate flow from one field to the next.
  3. Convert your arrangement into a form template. You can use a software application for this part and the next ones.
  4. Customize the fields you have created. Most software for creating forms also enable you to adjust the dimensions of each area as well as limit the data types that go into each field.
  5. Use drop-down menus as appropriate. If you don’t know how to add drag down lists, you will most likely find the guidelines in the support content that comes with the software. The menu will often require making a table and linking it to the appropriate field. Examples of areas that may need a drop down menu include age and zip codes or country.
  6. Perform a usability test. Take some time to enter information on your form and ensure that it works alright before releasing it for general use.

Here are some general good practices for creating an efficient form:

  • Keep it simple by only asking for information that you truly need and is indispensable.
  • Make it clear what kind of info you expect by providing examples besides the field. (e.g.,
  • Offer some smart defaults. These defaults are significant as they could fill in 90% of the blanks, resulting in faster fill-ins and less probability of users giving up along the way. An excellent example of a smart default is a language drop down:

how to build a landing page form

  • Make the error messages as elaborate as possible. i.e., be specific about your error message and use adequate spacing between fields so the user can easily relate the respective form field to the error. Also, save the part of the data that’s correct, so the user doesn’t have to start all over again.

Why should someone fill out my form?

Tempt users to complete your form by providing benefits. For instance, offer an option for free download after filling out the form, or an option to receive a game demo upon completion. Either way, the user always feels as if they have given up some level of privacy sometimes even as though it’s something they are going to regret because of junk mail and so on. That’s why you have to make it worth their while.

how to build a landing page form

Autofill form fields

Most browsers can autocomplete fields on behalf of the customer by using the users Autofill profile or google play store purchases. By incorporating autocomplete attributes in your form fields, you help the user submit the required information as fast as possible (up to 30% more quickly), and maybe even spend more time going through other things on your website.

An example of how you can hint to the browser that you are expecting, say street address, is using autocomplete=”address-line1”. This command enables the browser to fill in the address part, and also directs it to the specific field where the information is required. There are numerous other auto-fill attributes that you can employ to create the smoothest user experience.

Naming of input fields

Always provide clear and visible labels for each part. You risk getting a poor review if the user cannot see which area corresponds to what name. That is why it is also a rule of thumb to use a big enough font size. Usually, the size will depend on the context (desktop or mobile?) and how many other things have to be displayed. Whenever you doubt yourself, use a larger and fancy font.

how to build a landing page form

CTAs (color and text)

Most marketers believe that a call-to-action button is the most significant component of a landing page. It is the tipping point between bounce and conversion. If you design it correctly, you boost conversions. Otherwise, you risk page abandonment. Here is what you should keep in mind:

  • Color: you want the color to contrast with the rest of the page so it “shouts,” making it as easy as it gets for visitors to convert. Attractive colors such as green, orange and blue never fail to grab users’ attention.
  • Size: shouldn’t be so small that it becomes illegible or so huge it scares users off. The ideal size should blend in with the landing page perfectly. There are more than a few cases where making the CTA larger caused a rapid decrease in conversion rates and vice versa.
  • Text: the text on your CTA should be as simple and precise as possible. It should be direct to the point and tell the user exactly what they get by clicking on the button.

Special considerations for forms on mobile

In this technological era, there are many devices and platforms for visiting web pages as well as social media, meaning screen sizes are continually changing. Users want to have a great experience whether they are using a computer or a smartphone. It is unfortunate that so many marketers ignore mobile web forms while assuming that people don’t ever complete those forms. Although this might have some truth, it is not a limiting factor of such devices.

If you only design your web forms for desktop, you miss out on an excellent opportunity to convert mobile customers. It would be wise to plan your landing page forms to be mobile friendly, be it designing an entirely independent mobile landing page or using responsive web design.

how to build a landing page form

Final word

So much focus on the above-fold issue has left most marketers scrambling to put their lead capture forms above the fold in fear of missing a conversion opportunity. You must realize, however, that everybody scrolls (some even before the page finishes loading). Placing a form too early on the page could result in conversion friction and cause the visitor to second guess. It is essential to give some useful information about your product before expecting visitors to give up their personal information.

Other popular articles