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
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.
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.
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.
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
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.