Landing pages - Part 4: Add a form & use advanced options

When you're comfortable enough with the landing page settings and arrangement, you can use the advanced options described below.

We've created a series of articles to help you build your landing pages. 

💡 Good to know
Landing pages are available for Premium and Enterprise plans.

In this article we'll see the following advanced options:

Add a form to create a lead generation page

Forms will allow you to retrieve email addresses and automatically sort them into your lists in Sendinblue.

If you are creating a lead generation landing page, start by adding a Form element:

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.
Form_1.png form_2.png

Manage Fields

In this part, you will choose where to store the contacts you'll retrive with the form, and the form itself: add and order fields, make them mandatory or not, add help text, etc.

To access the settings Manage Fields, click your form in your the landing page editor. We'll describe below the different options you will find there.

Choose your contact list

Edit_form_-_lists.png
  1. Click the form to open the Edit Form panel on the right
  2. In Manage fields, you will set up where the collected emails will be stored in your Sendiblue account:
    • Select a list folder from the first drop-down
    • Select a contact list from the second drop-down

For each form, a corresponding contact list will be created in the Contacts platform on the Lists page (it is autosaved when you type the name of your form). All lists created by your landing pages can be found in the Landing Pages folder that is automatically created for you. That list will have the same name as the initial name of your form.

Note that the form created with the landing page builder will not appear on the API & forms page of your Sendinblue account.

❗️ Important
If you want to update the contacts from your list when they fill the form, you need to tick Update existing contacts on form submission in Form Subscription Controls.

Set up the fields

Next, for the data you wish to collect, you will add the different fields to your lead generation form. 

mceclip1.png
  1. Add a contact field: you can add pre-existing fields to your form from this drop-down.
  2. Create a new field: If the contact attribute does not exist yet, you can create one from here.
  3. Reorder the fields: Simply click on = then drag a field to reorder it.
    Delete a field:  You can remove the fields using the bin icon.

    Click the field and pick its settings:
  4. Label: display the label above the field.
  5. Hidden: click on the toggle to create a hidden field or one that is visible on the form.
    You can add a hidden form field when you want data to be filled automatically by passing this said data in the URL with query parameters.
  6. Required: choose of the field is mandatory to submit the form of not.

7. According to each field, you will have different settings:

  • Label: change the name of the label that is displayed above the field
  • Placeholder: type the text that is displayed in your field. By default, it is the same text as your label.
  • Help text: type the text that is displayed underneath your field. This can be useful for suggestions.
  • Default value: this is the value that will be synchronized in your SendinBlue contact list if your visitor does not fill the field.
  • URL Param: this is the value that will be automatically inserted into the form field. Your user may override, if they choose.

❗️ Important
If you add a phone number in your form, the only working format will be the international format like so:  +447911123456 for the UK, +12025550101 in the US or +33655678834 in France.
Please use the Placeholder to help your users put the correct format.

Redirection when submitting the form

In Redirect Options, you can choose where your users will be redirected when they submit they contact details (when they click the Call to Action button): 

  • Page in the funnel = Select Funnel page in the dropdown list
  • External URL = Type the link of the page.

Double opt-in

With the double opt-in option:

  1. Your new subscriber enters their email address into your form.
  2. The subscriber must click the link in a confirmation email to be added to your SendinBlue email 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 Sendinblue subscription form. Otherwise, your contacts will receive duplicate double opt-in emails.

Design

The dropdown list allows you to choose the design of your fields: none, outlined, curved outline, underlined with background, underlined no background.

Style_form_gif.gif

Your form can also be displayed as 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.

Form Subscription Controls

Update existing contacts on form submission: from there you can choose to update existing contacts when they submit their forms. It is essential to tick this box if you want to update your contact's information when they fill the form.

You can also disable the re-CAPTCHA.

Javascript Tracking (Facebook Pixel / Google Analytics)

Tracking will give you the opportunity to insert your tracking scripts in certain parts of the page.

Services such as Facebook and Google Analytics require you to have the script in the head tag, while other services may require it to be in the body. Please refer to their directions carefully on where they want the script to be placed.

To access the Tracking part, go to Settings at the bottom-left of your page and click the tab Tracking:

mceclip0.png

Multi pages landing page

If you want to add additional pages to create a funnel, go to the left sidebar and click on the Manage pages tab, then click on + CREATE A BLANK PAGE.

Device based rendering

Once your landing page is complete, the desktop, tablet and smartphone icons at the top right allow you to test your landing page rendering on different devices.

Thanks to the buttons Desktop / Mobile at the top, you can test the rendering of your landing page on desktop, tablet, and smartphone.

Note that if you hide on Mobile or Tablet, the section will show in preview and in the builder in case you need to make edits. However, on the live page after launching, it will not be displayed.

You can choose to display blocks or not according to the device, more details in our article Part 3: Edit the settings of all the elements of your landing page > Visibility.

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

Related articles