Description

Form Constructor is a simple tool which saves the precious time and creates a modern form in two clicks. The code of the form could be easily copied and inserted into third-party websites.

To enter the Subscription Form Constructor, go to “Contacts” –  “Forms”. To create an order form, go to “Store” – “Order forms”.
The opened window will show the ready-to-use forms developed by our designers.
To select an empty form, choose the one that fits your needs and click “Create”.

Key elements

Here is a screenshot to illustrate the functions of the buttons.

Every widget has a control panel with the buttons “Edit”, “Copy”, “Delete”.

Exit from the Form Constructor

When you click the button, a confirmation box will appear. When you exit the constructor, the changes you made in the form will not be saved.

To create a template

The system does not save the forms, therefore saving can be done by creating your own template. If you have already created a subscription form and want to use it later (not to lose it), then click “asterix”. Type in the name of the form in the appeared model window and save the template.

How to find your template?

Next time you enter Form Constructor, a new tab “My subscribe forms” will appear. This tab will show the forms you have chosen as a template.

If you point a mouse at your template, three buttons “Create”, “Edit”, and “Delete” will appear.

  • Create — a new form is created in your template. In other words, the form will be similar to this template, and you can edit it with no impact on the parent template.
  • Edit — in comparison with “Create” button, this edits a template, but does not create a new form.
  • Delete — your created template will be deleted. Be careful, because the deleted template cannot be restored.

Publish

When you click this button, you will see a window with the code of a newly created form.

JavaScript-code

Copy this code and insert it into the required page. Please note that if you save a form as a template, in case of editing, the form published on the website will be edited together with the template.

HTML-code

In comparison with JavaScript-code, if published on a website, a form on the website will not be edited together with the template.

+Add element

This is the key button to work with the Form Constructor. You can open the menu with the available elements of the form by clicking this button.

Let’s look at each component by creating a real form.

Now let’s describe all components one by one.

Form

This component is enough for creating the simplest form, because it contains the functions you need for the work. It is included in every template, therefore let’s get straight to the form settings.

Settings

This is how “Settings” tab look like:

Add to groups

A contact will belong to the group (list)/category which you check. Please note that in case of checking a category, a contact will appear in all groups (lists) within this category.

To sign up for newslettes

It is crucial to understand how this tool works, because if you fail to use it properly, some subscribers could leave you.

  • If the box is checked, then the form will add this contact into “Contacts” and send an activation letter. Once the contact follows the link in this letter, he becomes activated (subscriber) and can receive the letters from you.
  • If the box is not checked, then the form collects the contacts (responses), the activation letters are not sent, therefore the contacts are not activated. This can be done if the subscription is optional.
Actions
  • Show message — when you fill in the form, a modal window with your text will appear.

  • Open link — clicking an action button (“Subscribe”, “Participate” or any other word) will direct a visitor to the specified page. If no action button is given, then a visitor will go to your default page with a request to go to a personal mailbox and follow the link in an activation letter to start receiving the letters.
  • Order product — clicking an action button (“Order”, “Buy” or any other word) will place an order for a product, and the users will go to the page with payment methods. If the form settings presuppose a user to check several products, then a user can decide which product should be used to place an order when filling in the form.
Delete from groups

A contact will be deleted from those groups (lists)/categories which you check. This option is helpful when a subscriber can subscribe to group A  and unsubscribe from group B.  For example, subscription to a group “Losing weight. Girls from 50 to 60 kilos” unsubscribes from a group “Losing weight. Girls from 60 to 70 kilos”.

Advertising tags

They work the same as in “Reports” — “Channels” — “Add ad tag”, the difference is that these parameters will not be displayed in the link to the page, they will be inserted in the form code. You can track the efficiency of your advertising campaigns by these codes in “Reports” — “Channels”.

Design

This tab sets the graphics of the form, colors of the elements, background, etc.

Quick settings

[Form view] can be horizontal, vertical, or it can be displayed in a modal window.

  • A vertical form will look like this on a page:
  • A horizontal form will look like this on a page
In modal box

If you check “In modal box”, then you should click a button to call a form. Two additional tabs for form settings will appear:

Window opening button style

  • Form button is the button which opens a form. Here you can select a type of a button which will open a subscribing form.
  • Filling is the color of the button.
  • Width is stated in percentage which is calculated from the basic size of the form.
  • Border — to illustrate, the screenshot shows a “dotted” type of border and a big size of the border. You can select any border type you like and customize the size.
    Border works for all form elements in the same manner. In other words, you outline the element you are setting.
  • Curve — the screenshot shows the forms with rounded edges, the maximum rounding is chosen for illustrative purposes, but you can adjust this parameter by moving a slider.
    Curve works for all form elements in the same manner, that is why we will not go into details here.

Action when hovering over call button

This enables you to select the color of the filling. In other words, the color of the button will change when pointed.

Field label

When you check the “field label”, each field will have its name. We will give the details of how to set the field labels below.

Form designer

It enables/disables and sets the fields for the form.

When you move the slider to the right (green), you enable the field, and it will be shown in the form. If you move the slider to the left (grey), you disable the field, and it will not be displayed  in the form.

Each field has its description. Description is the text which is shown at the background of the field (see the screenshot).

If you check “required”, a visitor can send these forms (click the button) provided he/she fills in all the required fields.

A field can be hidden. If you check “hidden”, the field will not be deleted, but rather will be unseen by the users. The only exception is when you hide a “Name” field, a name “Dear friend” will appear by default, that is, the contacts of each person who fills in the form with the hidden “Name” field will get into your “Contacts” with a name “Dear friend”.

Design settings

This menu can be used to personalize the interface of all form elements (button, form, fields, field labels).

Button
  • Samples — 10 preset colors, the color of the button changes upon clicking the colors.
  • Own color — it helps to customize the color from the palette. To open the palette, click the color.

    If you select “Own color”, you can adjust the gradient. Check “gradient”, select the appropriate gradient type, and set the starting and the ending color.
Border

The border will be applied to the button. You can select the style, size, and the color of the border.

Text and font

You can select the color, size, font, and width of the text on the button.
In this case the text size is 20, font is Open Sans, the width is Bold.

Text settings are similar for all form elements, therefore we will no longer focus on that.

Inside and outside indents

Inside indents are used to set the spaces from the element borders to its content. Let’s me explain with the screenshot.

  • Inside-left-indents (red arrow) is 150 pixels, that is why the text of the button is moved by 150 pixels from the left border of the element.
  • Inside-top-indents (green arrow) is 150 pixels, that is why the text of the button is moved by 150 pixels from the upper border of the element.

The same principle is true for the outside indents, but we need them to adjust the spaces between the elements. For example, if the outside indents bottom is 150 for the fields of the form, then the distance between the button and the fields of the form will be 150 pixels.

Inside and outside indents are applied to all elements in the same manner, therefore we will no longer focus on them.

Form

Now we will move straight to the field settings, as all settings which deal with the changes in the form design have already been illustrated by changes in the button.

Fields

The field settings include “text alignment” setting responsible for text positioning inside a field. The screenshot shows that the text is centered, because “center” has been chosen. The text can also be aligned by the right or left sides of the fields.

Signatures

This tab will not be displayed unless you check “field label” we spoke about above.
Text alignment affects the field label position. Just like with fields, the text can be aligned by the center, left and right sides.

Action when hovering over submit button

This helps to customize the color which will be displayed when pointing at the button. For example, the button “Send” is originally red, while when pointed it turns green.

html/css

Here we register class, the rule for it is added to head or other place on the page, for example, before the form code. In our example, we have shadow class, the rule for it has already been inserted in head, now the button has a red shadow.

We are done with the settings of the basic and the most challenging element, now it’s time to find out the purposes of the other elements.

Text

Click “+Add element”, press “Text” by the left mouse button, hold down the button and drag the element to the required area in the form (the text is typically added at the top and at the bottom).

When you have dragged the text, the text “Your text” will appear. Click the text for editing. A default editing panel will open (highlighted by the red frame).

List

Click “+Add element”, press “List” by the left mouse button, hold down the button and drag the element to the required area in the form.
The screenshot shows that the list is added at the top.

List editing

List widget enables you to change the color of the text, picture, margins, and background.

Lines

To add/delete a line of a text, move to widget editor and follow the steps in the list constructor:

  • Click “+” to add a new line.
  • Click “-“ to delete the line which has been previously highlighted for deletion.
Image

The image shown on top of the list can be edited, if required. If you click the image path, you will be prompted to upload an image from a computer. If you click “Choose from library”, you will be offered a collection of the appropriate images.

Social buttons

Click “+Add element”, press “Social buttons” by the left mouse button, hold it down and drag the element to the required area in the form.

Social buttons settings

The settings of this widget enable you to change the icon types, alignment, margins, as well as to delete or to add the social networks

Design

Icon types

You can select from two types of icons: social-icon-pack-1 — rounded (see the screenshot), social-icon-pack-2 — square.

Settings

The widget displays the social buttons which are checked in its settings. To place a link to your social network, place the mouse cursor over the name of the social network to see “cogwheel” which will open the menu to add the link to a social network.

Indent

Click “+Add element”, press “Indent” by the left mouse button, hold it down and drag the element in the required area in the form.

Unlike other widgets, this one has no Edit button. It can be vertically adjusted only. To change the indent, press the black dot (highlighted by the arrow on the screenshot), hold it down and pull up or down. This can be helpful when you have no time to match the pixel size for the margins, that is why it could be easier to add “Indent” widget and to adjust it visually for a couple of seconds.

Image

Click “+Add element”, press “Image” by the left mouse button, hold it down and drag to the required area in the form.

General settings of the form

The form has the settings for the widgets and the general settings (we have illustrated them above) which can be applied to the form on the whole rather than for a particular element.

The form width should be paid special attention to. It is set in pixels. This is required to adjust the form width for better interface of your page.

You need no more than 5-7 minutes to create the simplest form with all widgets, because there is nothing technically complicated about it, the interface is user-friendly and intuitive.

The screenshot below gives the form as an example, the process took less than 10 minutes, and mind that the form was completely customized.

If you have already set the payment methods, then a buyer will have the access to the payment options upon form completion.

FAQ (frequently asked questions)

Create separate pages where a subscriber or a client is redirected to upon subscription (payment) and install the metrics codes, pixels on this page, add the page links for analytical purposes. These links should be inserted in the Form Constructor in the appropriate fields.

Rate article

1 star2 stars3 stars4 stars5 stars (No votes)
Loading...