In this article, we will explain how to add a form to your landing page and how to use the advanced options available in the landing page builder.
We've created a series of articles to help you build your landing pages:
- Preface: What is a landing page?
- Part 1: Set up your landing page
- Part 2: Define the structure of your landing page
- Part 3: Edit the settings of all the elements of your landing page
- Part 4: Add a form to your landing page and use advanced options - YOU ARE HERE
- Part 5: Publish your landing page
Good to know
The New landing page editor offers some options that might be different from the Classic landing page editor. Make sure you are checking the right tab based on the landing page editor you are using:
|New landing page editor||
Classic landing page editor
Add a form to your landing page
Add a form element
Forms allow you to retrieve specific information about your contacts and automatically add them to your contact lists in Sendinblue.
To add a Form element to your landing page:
|Either add a new section from Sections > Filter pre-made sections > Forms and choose a predefined section that can be edited to fit your needs.||Or start from scratch by adding a new Form element to your landing page.|
|Either add a new Section > Filter pre-made sections > Forms then choose a predefined section that can be edited to fit your desire.||Or start from scratch by adding a new Element > Form.|
Set up your form
Once you've added a form element to your landing page, you can choose how to set it up:
The Alignment setting is described in the Common settings section in Part 3: Edit the settings of all the elements of your landing page.
The Manage Fields settings allow you to choose where to store the contacts you collect with the form and which information you want to get from them. You can also configure the form itself: add and sort fields, make fields mandatory or not, add help text, etc.
To access the Manage Fields settings, click on your form in the landing page editor.
Choose your contact list
Set up the fields
Add and organize the different contact fields with the information you wish to collect with your form.
7. Depending on the field you selected, you will have different settings:
- Label: change the name of the label that is displayed above the field.
- Placeholder: enter the text that is displayed in your field. By default, it is the same text as your label.
- Help text: enter the text that is displayed underneath your field. This can be useful for suggestions.
- Default value: enter the value that will be synchronized in your Sendinblue contact list if your visitor does not fill in the field.
- URL Param: enter the value that will be automatically inserted into the form field. Your user may override it if needed. To learn more, check out our dedicated article Pre-populate a form in a landing page with contact attributes.
The Redirect Options setting allows you to choose where your users will be redirected when they submit their information:
Use the Form redirect action to redirect your contacts to a page in the funnel (a sub-page of your landing page) or to a specific URL:
The Double Opt-in setting allows you to choose which opt-in method you want to use in your form:
The Design setting allows you to choose the design of your fields: none, outlined, curved outline, underlined with background, underlined no background.
Your form can also be displayed in a horizontal form. If you choose a horizontal form, we recommend removing the labels of your fields.
To change the background color, go to the column settings as explained in Part 3: Edit the settings of all the elements of your landing page.
Here are some examples of the different form designs:
The Spacing setting is described in the Common settings section in Part 3: Edit the settings of all the elements of your landing page.
Form Subscription Controls
The Form Subscription Controls setting allows you to choose how you want your form to work during submission:
The Style setting allows you to define the appearance of your form:
The Tracking setting of your landing page allows you to insert tracking scripts in certain parts of the page.
A tracking script is a code used to monitor the number of users who visit a page. Tracking scripts allow you to analyze how long visitors stay on the page, what’s holding their attention, and how they interact with the content.
To add a tracking script to your landing page :
- In the landing page builder, click Settings in the bottom left corner.
Write the tracking script in the appropriate tag. You can either add a script in:
the Head tag
the After opening
or the Before the closing
</body>tag.💡 Good to know
Services such as Facebook Pixel and Google Analytics require the script to be added to the head tag, while other services may need it in the body. Make sure to check your tracking service's directions to determine where the script should be added.
Multi pages landing page
|If you want to add additional pages to your landing page to create a funnel, go to the Pages panel and click + Create a blank page. To learn more, check our dedicated article Manage sub-pages within your landing page.|
|The Mobile and Desktop options at the top of your landing page allow you to test your landing page rendering on different devices.|
⏩ What's next?
- Part 5: Publish your landing page
- Are landing pages SEO-friendly?
- Duplicate an existing landing page
- Manage sub-pages within your landing page
🤔 Have a question?
If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.