The ultimate landing page form guide for 2021

24/02/2021
The ultimate landing page form guide for 2021

A good landing page has one job: inspiring visitors to convert right there, right then. Unfortunately, one of the biggest obstacles to conversions on landing pages are those annoying forms. Master the art of landing page form design and you’ll see an instant uplift in conversions. And, to help you make this happen, we’ve lined up the best practices and examples to learn from today. Because this is what we do 24/7, in order to get the best leads for the European real estate market.

 

Understanding the Basics of Forms 

Before we get into how to optimise your landing page forms, it’s important to gain a deeper understanding of the different aspects that make up a landing page form:

  • Structure: The structure of your landing page form encompasses how your input fields are ordered, the form’s overall appearance (color, size, white space) and layout, and transitional elements (CTA placement; pop-up, sliding, or stagnant).
  • Input Fields: An input field, also known as a form field or field, is the box that a user types in or selects from in order to input information. It’s the individual sections that a user clicks through to fill anything out.
  • Field Labels: Field labels describe the purpose and function of form elements. They let your users know what they are submitting within the input fields. For example, if a form asks for your birthday, a field label is the label “month” next to a drop-down menu of listed months.
  • Assistance: On some landing pages, companies will include explanations, how-tos, or pop-up tips to assist users in filling out a form. This provides a more fluid, helpful user experience.
  • Validation: A validation field allows you to auto-check whether or not the information filled out by a user is valid. A common example of validation is for email addresses.
  • Call-to-Action: Shortened to CTA or interchanged with an action button, a call-to-action is the button at the end of a landing page form. This button allows the user to submit the form.
  • Thank You Message: Once a user properly submits all the necessary information and hits the CTA, a plain-text message is automatically displayed: “Thanks for completing our form.”

    This is a simpler solution than a full thank you page, and it still lets the user know the form is complete. It may even include next steps for the user to take, such as confirming an email address or signing in to complete registration.

These terms are the basics of how to create a landing page form, and each element allows you to optimise this part of your user’s digital experience. By creating an optimised landing page form, you’re subsequently increasing the conversion rate and turning website visitors into quality leads. 

Multi-step forms outperform single-step forms

Multistep form guide

We see multi-step forms outperform single-step versions time and again. We’ve tested this across various landing page forms. The numbers tell us that people find multi-step forms less intimidation, which increases the number of users who start filling them out and the number of those who complete them.

 

Minimise the total number of fields

Every field you ask users to fill out requires some effort. The more effort is needed to fill out a form, the less likely users will complete the form. That’s why the foundational rule of landing page form design is shorter is better — get rid of all inessential fields.

Many designers are familiar with the “less is more” rule; still, they ask additional questions in an attempt to gather more data about their users. It might be tempting to collect more data about your users during the initial signup, but resist that temptation. Think about it this way: With every additional field you add to your form, you increase the chance of losing a prospective user. Is the information you gain from a field worth losing new users? Remember that, as long as you’ve collected a user’s contact information, you can always follow up with a request for more data.

 

The ultimate landing page form guide for 2021

Offer field focus

Auto-focus the first input field in your form. Auto-focusing a field gives the user an indication and a starting point, so that they are able to quickly start filling out the form. By doing that, you reduce the interaction cost — saving the user one unnecessary tap.

Make the active input field prominent and focused. The field focus itself should be crystal clear — users should be able to understand at a glance where the focus is. It could be an accented border color or a fade-in of the box.

 

Use contrast to full effect

Something most landing page form designs fail to do is make the most of contrast. Aside from helping users to navigate their way through a form, good use of contrast can reduce potential distractions from other elements on the page.

Contrast is also another important factor in optimising forms for mobile. Remember people could be outside or in brightly lit places that make low-contrast designs almost impossible to use.

 

Avoid dropdown menus

Dropdowns are especially bad for mobile because collapsed elements make the process of data input harder on a small screen: Placing options in a dropdown requires two taps and hides the options.

If you’re using a dropdown for selection of options, consider replacing it with radio buttons. They will make all options glanceable and also reduce the interaction cost — users can tap on the item and select at once.

 

Use placeholders and masked input

Formatting uncertainty is one of the most significant problems of landing page form design. This problem has a direct connection with form abandonment — when users are uncertain of the format in which they should provide data, they can quickly abandon the form. There are a few things you can do to make the format clear.

Placeholder Text

The text in an input field can tell users what content is expected. Placeholder text is not required for simple fields such as “Full name”, but it can be extremely valuable for fields that require data in a specific format. For example, if you design search functionality for tracking a parcel, it would be good to provide a sample tracking number as a placeholder for the tracking-number field.

It’s vital that your landing page form should have a clear visual distinction between the placeholder text and the actual value entered by the user. In other words, placeholder text shouldn’t look like a preset value. Without clear visual distinction, users might think that the fields with placeholders already have values.

Masked Input

Field masking is a technique that helps users format inputted text. Many designers confuse field masking with placeholder text — they are not the same thing. Unlike placeholders, which are basically static text, masks automatically format the data provided by the user. In the example below, the parentheses, spaces and dashes appear on the screen automatically as a phone number is entered.

Masked input also makes it easy for users to validate information. When a phone number is displayed in chunks, it makes it easier to find and correct a typo.

Provide matching keyboard

The ultimate landing page form guide for 2021

Mobile users appreciate apps and websites that provide an appropriate keyboard for the field. 

This feature prevents them from doing additional actions. For example, when users need to enter a credit card number, your app should only display the dialpad. It’s essential to implement keyboard matching consistently throughout the app (all landing page forms in your app should have this feature).

 

Set HTML input types to show the correct keypad. Seven input types are relevant to landing page form design.

  • input type=”text” displays the mobile device’s normal keyboard.
  • input type=”email” displays the normal keyboard and ‘@’ and ‘.com’.
  • input type=”tel” displays the numeric 0 to 9 keypad.
  • input type=”number” displays a keyboard with numbers and symbols.
  • input type=”date” displays the mobile device’s date selector.
  • input type=”datetime” displays the mobile device’s date and time selector.
  • input type=”month” displays the mobile device’s month and year selector.

 

Use a single-column layout

Several studies found that single-column forms are faster to complete than multi-column forms. Test participants were able to complete a single-column form an average of 15.4 seconds faster than a multi-column form.

Multiple columns disrupt a user’s vertical momentum; with multiple columns, the eyes start zigzagging. This dramatically increases the number of eye fixations and, as a result, the completion time. Moreover, multiple-column forms might raise unnecessary questions in the user, like “Where should I begin?” and “Are questions in the right column equal in importance to questions in the left one?”

In a one-column design, the eyes move in a natural direction, from top to bottom, one line at a time. This helps to set a clear path for the user. One column is excellent for mobile because the screens are longer vertically, and vertical scrolling is a natural motion for mobile users.

 

Immowi form design

We are always on the look out for the best form design that fits our clients’ needs. In order to ensure real estate lead quality we do include more questions than the average marketeer. We could just ask for contact information, but if you enlarge your list of questions the people that are willing to fill in the whole form will in the end be more involved and more interested in the product, especially concerning real estate. An Immowi landing page form is therefor always a bit longer than the simple contact forms you find across the internet.

 

Are you ready to break down that wall?

Register for free and get access to your MyImmowi account where we help you set up everything you need to increase your sales.

Happy, clients, contracts, sales, selling, real estate, agreement, collaboration, immowi, myimmowi
Real Estate, leads, lead generation, sales, revenue, support, marketing, online marketing, big data, Immowi, MyImmowi

Immowi Assistance

There is often an invisible wall between marketing and sales. Companies invest in marketing campaigns to generate leads, but do not take the right actions to turn those leads into customers. To remedy this shortcoming, the strategic online lead generator Immowi is adding a new extension: Immowi Assistance. Until now, we delivered high quality leads thanks to online marketing, but with Immowi Assistance we significantly increase the chance of these leads actually becoming customers. Thanks to this approach, companies that do business with us know how to convert their leads and have a platform where the leads are offered on a silver platter, ready to be converted into valuable customers.
Extremely result-oriented
We could make it easy on ourselves and be happy with just bringing in high-quality leads. But it’s frustrating when your hard work doesn’t follow through. Immowi’s great strength has always been that we are very results-oriented. Many marketers have a reputation for selling hot air, because they can’t substantiate their returns. We did that right from the start, and that’s why we were able to grow from one to more than 10 full-time employees in a very short period of time.
With MyImmowi we just go one step further than what classic lead generators do. We go to the point where a lead becomes a valuable prospect. We help our customers convert their leads into customers.
Entrepreneurial mindset always in mind
MyImmowi builds the bridge between marketing and sales. We Make it as easy as possible for the client to contact the lead. You have to keep them warm. If you let a few days or even weeks pass between the moment a lead shows interest in your product and the moment you contact that lead, you will lose him. Then your success ratio will remain low. So, we try to immediately set an appointment in the diaries of our clients’ salespeople. You have to strike while the iron is hot.
Letting sales people do what they do best
Sales people like to sell, but they thoroughly hate administration. They keep track of their leads, their appointments and their deals in Excel, or even with pen and paper. They only keep track of their own prospects. Many companies do not have a sales pipeline. So, you risk sending a quotation to a customer after a successful meeting, but ultimately missing the customer because you forgot to follow up on the quotation. You’re almost done, but because of the lack of a decent digital process you miss out on a customer – and therefore also on turnover.
We pick the low-hanging fruit for our customers. We automate the entire process from lead to customer, and put it into one clear dashboard. This way, as a business manager, you can follow everything from A to Z. How many leads does a campaign produce? How many of those leads drop out along the way? How many become customers? What stage is each lead in? The personnel cost of sales people is very high in many companies. If sales people do not lose time calling leads and recording appointments – which we do – they can focus on what they are really good at. And that is still selling, closing deals.
Measuring ROI to the euro
We bring marketing and sales under one roof. That way, you can make your campaigns much more effective. Imagine that your campaigns for one brand on Facebook and on Google both generate 10 leads, but that 8 of those 10 Facebook leads become customers and only 2 of those 10 Google leads. If you’re purely marketing, you won’t get that information and so you’ll continue to put the same amount of effort into Facebook and Google.
If you also include the sales part and you do get that information, then you can turn the right buttons, redirect your budgets and generate much more turnover.