The Form Element and how you can use it to design your landing page

Our platform's Landing Page Designer provides you with countless options to design your landing page and make it as beautiful -and as effective- as possible. After you have selected the Structure of your landing page, you can begin adding Elements to it. One of the most useful elements you can add to your landing page is the Form element.


A Form Element is a Signup Form that lets visitors on your website subscribe to your Email Marketing newsletterTo add a Form Element to your landing page, follow the steps below:

A. Adding a Form element

1. Click on the Elements button located on the left side of the Landing Page Designer page.form_element_and_use_1.png


2. Drag and drop the Form element, from the Elements list to a container inside the Designer page.form_element_and_use_2.png


Once you have added a form element to your landing page, hovering over it will reveal a toolbar on the upper left. This toolbar comprises items allowing you to RemoveMove, or Duplicate your form element, or go to the Settings for this element to refine its features.


B. Setting up the Form element

To edit your recently added Form element, click on the Settings icon to reveal the Form element's settings on the left side of your Designer page.form_element_and_use_3.png

You have the following options:

  • Background Color
    Select a background color for your Form out of a color palette. The default background color is transparent but you can choose any color from the vast range available to you.

  • Form Width
    Use the up/down arrows to specify the desired width of your Form. Alternatively, you can also type the desired number directly into the area next to the arrows.

  • Form Type
    Choose whether you want the Form type to be Normal or Inline from the drop-down menu.

  • Form Align
    Choose your Form's alignment from the drop-down menu. You have three alignment options: Left, Center, and Right.

  • Border Width
    Use the up/down arrows to set your Form's border width. Alternatively, type the desired number directly into the area next to the arrows.

  • Corner Radius
    Use the up/down arrows in this option to choose how rounded you wish your Form's corners to be. Alternatively, type the appropriate value directly into the area next to the arrows.

  • Border Color
    Select a color for your Form's border out of a color palette.

  • Padding 
    Use the Padding option to play with the distance of your Form from the top of the Container you have placed it in. You can do this either by using the up/down arrows or by typing the appropriate value directly into the area next to the arrows. Clicking on the lock icon reveals more Padding options; namely, Padding Top, Padding Bottom, Padding Left and Padding Right.form_element_and_use_4.png

Once again, use the up/down arrows to specify the amount of padding of the Top, Bottom, Left, and Right of your Form Element (or type the desired number directly into the area next to the arrows).

  • On Submit
    Use the drop-down menu to choose what happens when visitors subscribe to your email list. You can also preview how the selected message looks inside your form by clicking on the corresponding check-box.form_element_and_use__6.png

Your choices are:

a) Display success/error message 
You can use the pre-set message or type your own into the appropriate field.

b) Redirect to page
 Redirect subscribers to the landing page of your choice, by choosing it from the drop-down list.

Please note that in order to be able to select a landing page here, it has to be published.

c) Redirect to external URL
  Fill in the URL that you would like visitors to be redirected to, in the appropriate field.

  • Select Email List
    Use the drop-down menu to select the appropriate email list for your Form Element.form_element_and_use__7.png

    Please note that if you make any changes to the selected email list's custom fields, the form will not be automatically updated to reflect these changes. To include any such changes, you will need to re-select the email list for the Form Element you have added to your landing page.


C. Editing the Custom Fields 
You have the option of adding Custom Fields to your Form Element, if you so desire.

1. Click on the Edit Custom Fields button to the left of your Designer page when you are in the Form Element settings.

2. Choose to show one or more of the available Custom Fields in the pop-up that appears, by toggling their corresponding switches to the right.form_element_and_use__8.png


If you want, you can change the placeholder text that will appear in the form for this specific field.form_element_and_use__9-new.png

You may also, if you wish to, add a pre-filled value for this specific field. This means that even if the user does not type in a value when subscribing to the form, the pre-filled value will still be added.

Note that there is no default pre-filled value added in any of the fields; it must be added by you, if you wish to have one.


Click the asterisk to the right of each field, if you want to make it required for this form. Alternatively, click the eye icon to its' right to hide it from users if you prefer to do so. This means that this field is still enabled in your form, but hidden.form_element_and_use__10.png

A good reason why you may want to do this, is to pass some field values by using URL parameters.

Note that any future changes to the settings of your email list or to the custom fields of your email list cannot be applied automatically to your form, as the designer creates the form based on your email list as it currently is at the time you create the form. In order to apply your changes, you will need to re-select your email list in the form's settings inside the Landing Page Designer.


If you don't have any Custom Fields saved, or if you simply want something different, you shouldn't be troubled, as is is so easy to create one.

3. To create a new Custom Field, click on the Create Custom Field button at the bottom left of the Edit Custom Fields pop-up, to create it then and there, and include it in your Form Element.form_element_and_use__11.png


4. Fill in the necessary details and then tap on the Create button.

You will have to add the following details: 

  • Name
    Fill in the name that you want your new field to have.

  • Data type 
    Select the data type of your new custom field from the drop-down menu. You can choose any of the options available: Text, Number, Date Time, Single-select Drop-down and Checkbox.

  • Check the Required checkbox to specify whether you want this field to be obligatory when filling your subscription form.

  •  Check the Hidden checkbox to specify whether you want this field to appear when recipients updating their profile through the Update Profile link.

Note that the custom field you will create here, will also be created in the email list you selected to connect your form with.


D. Additional Editing Options

There are several more options within the Form Element Settings menu, allowing you to adjust your Form Element to your needs.form_element_and_use__12.png


Click on each option to expand its menu. You have the following editing options to choose from:

Clicking on the above links will give you as much information as you might need for each style, including some details which you might deem useful.