Search

Landing pages - Part 4: Add a form to your landing page and use advanced options

đź’ˇ Good to know
Landing pages are available for Business and Enterprise offers.

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:

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:

mceclip6.png

mceclip5.png
New landing page editor

Classic landing page editor

Add a form element

Forms allow you to retrieve specific information about your contacts and automatically add them to your contact lists in Brevo.

To add a Form element to your landing page:

New builder Classic builder
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.

Set up your form

Once you've added a form element to your landing page, you can choose how to set it up:

Alignment

This setting is only available in the New landing page builder.

The Alignment setting is described in the Common settings section in Part 3: Edit the settings of all the elements of your landing page.

Manage Fields

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

 
  1. In the form, click Edit Form.
  2. From the Manage Fields setting, select in which folder and list the contacts you collect will be stored in your Brevo account:
    • Select a list folder from the first drop-down.
    • Select a contact list from the second drop-down.
❗️ Important
If you want to update existing contacts from your list when they submit the form, make sure to check the Update existing contacts on form submission option in Form Subscription Controls.

Set up the fields

Add and organize the different contact fields with the information you wish to collect with your form. 
  1. Add a contact field: add pre-existing contact attributes to your form.
  2. Create a new field: if the contact attribute does not exist yet, you can create one from here.
  3. Reorder the fields: click the = icon and drag and drop a field to reorder it.
    Delete a field: click the bin icon to remove a field.

    Click a field to select its settings:
  4. Label: display the label above the field.
  5. Hidden: choose if the field should be hidden or visible in the form.
    You can add a hidden form field when you want data to be filled automatically by passing the data in the URL with query parameters.
  6. Required: choose if the field is mandatory to submit the form or not.

  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 Brevo 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 contact can override it if needed. To learn more, check out our dedicated article Pre-populate a form in a landing page with contact attributes.
❗️ Important
If you add a phone number in your form, the only working format will be the international format with a + sign and country code: +447911123456 for the UK, +12025550101 in the US, or +33655678834 in France. Use a Placeholder to help your users use the correct format.

Redirect Options

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:

  • Page in the funnel: select to which funnel page you want to redirect your contacts.
  • Link to a URL: enter the link to the external page you want to redirect your contacts to.

Double Opt-in

The Double Opt-in setting allows you to choose which opt-in method you want to use in your form:

  • Single Opt-in:
    1. Your new contact enters their email address in your form.
    2. They are added to your Brevo contact list.
  • Double Opt-in:
    1. Your new contact enters their email address in your form.
    2. The contact must click the link in the confirmation email they receive to be added to your Brevo contact list.
❗️ Important
There are two ways to create a double opt-in subscription. Make sure to only use one of the two methods available: enable double opt-in subscription through Marketing Automation OR through a Brevo subscription form. Otherwise, your contacts will receive duplicate double opt-in emails.

Design

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:

Style_form_gif.gif

Spacing

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:

  • Update existing contacts on form submission: this option is useful if you want to update existing contacts' information when they submit their forms. 
  • Disable reCAPTCHA: disable the default built-in Google reCaptcha on your published landing page.
  • Disable URL Parameters on form submission:
    By default, URL parameters are displayed on form submission. Additional data about the contact, such as /thank-you.html/?firstName=Jane, may then display in the URL. This feature is useful, as your contacts do not have to fill out the same information on the second page if you collect multiple sets of information with a series of landing pages in your funnel. However, if you run Google ads and receive a notification from Google about URL parameters being displayed on form submission, you can disable this feature and republish your landing page.

Style

This setting is only available in the New landing page builder.

The Style setting allows you to define the appearance of your form:

  • Border style and color: add a border to your form and select its color.
  • Border width: define how wide the border of your form should be.
  • Border radius: select how rounded the borders of your form should be.

Enable JavaScript tracking (Facebook Pixel/Google Analytics)

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.

đź’ˇ Good to know
Google Analytics and Facebook Pixel are the most commonly used tracking scripts, but any tracking script can be added to a Brevo landing page.

To add a tracking script to your landing page :

  1. In the landing page builder, click Settings in the bottom left corner.

  2. Select Tracking.

  3. Write the tracking script in the appropriate tag. You can either add a script in:

    • the Head tag <head>,

    • the After opening <body> tag,

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

  4. Click Done.

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.

Device-based rendering

The Desktop and Mobile options at the top of your landing page allow you to test your landing page rendering on different devices.
❗️ Important
You can hide some sections or elements of your landing page according to the device they are displayed on. To learn more, check our dedicated section Visibility in Part 3: Edit the settings of all the elements of your landing page.

⏩ What's next?

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

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo expert partner.

đź’¬ Was this article helpful?

9 out of 23 found this helpful