How do I add a form on a landing page?

In the Landing Pages editor, on the left side under Blocks, you will see the Form option.

Add_form.png

 

With your mouse, drag the Form block onto the canvas. Next you will see:

  • On the right side, you will see form options, such as setting a title, a button and what should happen to a contact after filling out the form.
  • On the left side, you will see options for form blocks.

Form added.png

 

Form options

In the form options, there are several elements to set, such as:

Form

Here, you customize texts related to the form. Think of a title and a button text.

Form_settings.png

Here, you also set a success or error message as a result of submitting the form. This text appears on the page after submitting the form. It is not possible to set another URL as the “Thank You” page.

Success Message.png

In addition, you have the following settings:

Extra form options.png

  • Border color for invalid input: Here, you specify the color to be displayed around a form field that has not been entered correctly.
  • Recaptcha: Recaptcha detects website abuse without the user realizing it. This tool from Google measures how likely a user is to be spam-sensitive (or a “bot,” for example).
  • Recaptcha score: A score of 1.0 is most likely to be a user; a score of 0.0 is most likely to be a bot. Therefore, the average score that can be used is 0.5. Subscribers with a score lower than 0.5, will not be added to your database.
  • Place contact in group after confirmation: When the form is sent, the contact can be placed in a group.
  • Place new contacts in opt-in group: Checking this checkbox places contacts in the opt-in group after form submission. They will enroll in the opt-in procedure.

 

Button

On the right side, you will see options to change the styling of the button. For example, you can give the button a background color and change the font size.

Button.png

 

Styling

Under the Styling heading, specify the width of the form, the alignment and the background color.

Styling.png

 

Form blocks

The different form blocks are placed on the canvas by dragging with your mouse or by clicking on the plus sign on the canvas. When you select a form block on the canvas, you will see different options appear.

blok_opties.png

  • With the arrows, it is possible to change the position of a block. Up or down.
  • Use the arrow in the square to move your form block directly down or up.
  • With the cross, you remove the block.
  • You can easily duplicate the form block by using the duplicate page icon.

 

Form block options

There are several form blocks to choose from:

Form-opties_03.png

Text field
With a text field, collect email addresses or other short text/number-based pieces of information here. For example, first name or phone number.

Form-opties_04.png

Datepicker
With a date picker, the respondent can choose a date using a date picker or fill in their own. For example, birthdate.

Form-opties_06.png

Text area
With a text area, the respondent can enter a text consisting of several lines.

Form-opties_07.png Checkbox
With a checkbox, you can show multiple options. The respondent can also check multiple options as answers. For example, interests.
Form-opties_08.png

Hidden field
With a hidden field, it is possible to enter predefined data that is not visible to the page visitor. For example, language or customer number.

Form-opties_09.png

Dropdown
With a dropdown, the respondent can select an option from a predefined list of options. For example, education level.

Form-opties_10.png Radio
A list of predefined options. The respondent can select one of these options. For example, gender.
Form-opties_11.png

Single check
You can use this form block for (dis)agreeing in a form. For example, accepting terms and conditions.

Form-opties_12.png Single opt-in
You can use single opt-in when a confirmed opt-in is not required.

Additional setting: option to prevent submission if the checkbox is not checked.

 

For each form field, it is possible to adjust styling settings and apply additional settings.

Settings applicable for all form blocks:

Label

Name your form field. For example, First name.

Link to database field in Webpower

Select in which database field the entered value should be stored.

Field is mandatory

Indicate whether the field is required to be filled in.

 

Settings depending on the form block:

Placeholder

This text populates the input field as an example and disappears when the input field is selected.

Field is read-only for known contacts

This field does show, but is not editable if there is already a value present. Only if the field is empty, the respondent can fill out a value.

Validate field

This option is default.

Min. # of option(s) allowed

For a checkbox field, specify the minimum number of options required to choose.

Max. # of option(s) allowed

For a checkbox field, specify the maximum number of options allowed to be checked.

Action for existing contacts

Indicate with Overwrite whether you want the value known in the database to be allowed to be overwritten. So, if the checkbox isn't checked, the answer will be emptied. If you don't want this, then select Append. This way, only a checked option will be added to a contact.

 

Things to pay attention to when working with forms

There are a few concerns regarding forms and landing pages:

  • You can place only one form per landing page.
  • A form is added within a column of a layout. Padding allows you to narrow fields.
  • A form is added within a column of a layout. If you want to display a form on the left or right side of a page, first select a 2-column layout for the page and place the form in one of the two columns.
  • Fields in the form are always linked to a database field in the campaign.
  • You can prefill contact data in the form that is already known in the database. 
  • When the form is submitted, the fields are populated in the database. Existing data are overwritten.
  • New contacts (based on unique fields, by default the email address) are created as a new contact in the database.