Lead forms are essential for capturing valuable user information and growing your business. In this guide, we’ll walk you through all the important details you need to know about working with forms.
Working with Form Fields
Form fields allow you to determine what type of information you want to collect from your landing page visitors. Depending on the type of information you are collecting, form fields may have different settings and properties.
See the list below for a list of commonly used form fields.
| Text | Allow users to enter free-form text, such as names or comments, providing a versatile option for capturing various types of information. |
| Number | Enable users to input numerical values, making it ideal for gathering data like quantities, ages, or any numeric details. |
| Gather visitors’ email addresses for communication purposes, ensuring the email format is correct. | |
| Telephone | Capture users’ phone numbers, a crucial element for businesses needing to connect via phone calls or SMS notifications. |
| Password | Provide a secure way for users to input passwords, ensuring their sensitive information remains protected masking the entered value. |
| Select | Provide a secure way for users to input passwords, ensuring their sensitive information remains protected by masking the entered value. |
| Checkbox | Allow users to select multiple options from a list, ideal for situations where users can choose from various available choices. |
| Radio | Present users with a list of options where they can select only one choice, useful when you need users to make a single selection from multiple alternatives. |
How to Add a Form
Follow the below steps to add a form to your landing page.
- Open your landing page in the visual editor.
- When inside the visual editor, click on Elements from the left-side panel of your screen.
- From the list of available elements, drag and drop the Form element to the desired area of your landing page.
How to Add Fields to a Form
Follow the below steps to add new fields to your lead form.
- Open your landing page in the visual editor.
- When inside the visual editor, click on the desired form and head to the right-side panel of your screen.
- Click Add Field under the form fields settings.
- Define the field Type, Label, Placeholder and check “Field is required” if it is a required form field.
- Repeat steps 3-4 for each field you want to add to your form and you’re done.
How to Remove Fields from a Form
Follow the below steps to remove a field from your lead form.
- Open your landing page in the visual editor.
- When inside the visual editor, click on the desired form and head to the right-side panel of your screen.
- Hover on the desired form field under the form fields settings and click the Delete button that appears on the right side of the form field.
- Repeat step 3 for each field you want to delete.
How to Change the Order of Form Fields
Follow the below steps to change the order of your form fields.
- Open your landing page in the visual editor.
- When inside the visual editor, click on the desired form and head to the right-side panel of your screen.
- Hover on the left side of each form field (over the 6 dots), then drag and drop the form field either vertically or horizontally depending on the position you want to field to be set.
- Repeat step 3 for each field you want to change the order of.
How to Style a Lead Form
A well-designed form not only enhances the visual appeal of your landing page but also plays a crucial role in boosting user engagement and conversion rate.
Below we will walk you through the process of styling your lead generation form using Landerlab’s visual builder through an actual example.
Example: Style the default unformatted form as follows. Make the background dark blue and make match the section height from top to bottom. Make the call-to-action button yellow with blue bold text. Also, make the form fields white using a wider and more rounded font.
Follow the below steps below to make style the form according to the above-highlighted instructions.
Please note that the following instructions are for demonstration purposes only. Also tweaking of different element settings may require re-adjusting some of the previously set parameters in order to match the desired results.
- Open your landing page in the visual editor.
- When inside the visual editor, click on the desired form and head to the right-side panel of your screen.
- Click the Styles tab under component settings to start styling your form.
- Under Appearance settings change the background color to dark blue and color to white.
- Scroll to the Spacing settings and add padding horizontally and vertically to match the height of the section.
- Scroll to the Margins settings and add negative top and bottom margins to make the form match the height of the section.
- Scroll to Text settings and change the font type and size.
- Scroll to the Radius settings to set the default radius to 0 on all corners.
- Re-adjust the spacing and margin settings to get the form within the container top and bottom limits.
- Select the call-to-action button and change its background, color and text settings.
- Re-adjust the spacing and margin to accommodate the latest changes, and you’re done.
Pro Tip!
It is often more convenient to put the form inside a parent container in order to be able to further customize the form title and appearance.
How to Configure Form Submission Settings
Lead form submission settings allow you to define what happens after submitting the form. The below steps will guide you through the available configuration settings.
Show a Confirmation Message on Form Submit
Follow the below steps if you want to show a short message on form submission.
- Open your landing page in the visual editor.
- When inside the visual editor, click on the desired form and head to the right-side panel of your screen.
- Click the Submit tab under component settings to set your confirmation message settings.
- Type the desired confirmation message.
- Apply any additional styling that you like and you’re done.
Pro Tip!
Make sure to add a clear confirmation message to your forms.
If further steps are required after the form submission, make sure to mention that in the message so the lead that submitted the form knows what to expect/do next.
Redirect Visitors to a Different Page on Form Submit
Follow the below steps if you want your visitors to be redirected to another page on form submit.
- Open your landing page in the visual editor.
- When inside the visual editor, click on the desired form and head to the right-side panel of your screen.
- Click the Submit tab under component settings.
- Toggle the Redirect After Submit and add the desired destination URL in the address box and you’re done.
Pro Tip!
Whether you are going to send your converted leads an email, give them a call, or sell them additional services or goods, it is always great to set a clear message and instructions on the confirmation page.
Doing so will increase the likelihood of conversion after the lead submission.
How to Mark Form Submits as Conversions
By accurately tracking conversions, you can measure the success of your campaigns and make informed decisions to optimize your marketing strategies.
Below you will find the detailed steps on how to mark form submissions as conversions.
Before you begin: The following instructions are valid only for landing pages that contain a working lead form. Make sure to apply them to the appropriate landing page.
- Go to your landing pages list and click on the desired landing page.
- Next move to the landing page Settings > Conversions
- Under the landing page conversion settings make enable Track Form Submits as Conversions
- Click Save Changes and you’re done.
Alternatively, you can access the same settings from the visual Editor by clicking on the settings gear button on the left side pannel of your screen.