“BUILDER” is the part of the menu where you create the actual design of the OSM campaign form as well as set the position of the form on the screen. Let me remind you that you need to choose one of several dozen templates in the “FORM TYPE” menu to begin with. There is a great variaty of templates to chose from. 

Having selected the template, you can now customize your form in the “BUILDER” depending on your campaign goals and the website style.

IMPORTANT: there are temaplates that are used to collect your website visitors personal information, that's why do not forget that there will be two parts to edit, the actual "Form" and "Success" template. You can find the "Success" part on the top of the screen.

The "Form" itself:


The "Success" part:

IMPORTANT: the form editing is separate for Desktop & Mobile versions. 

 

 

This feature is very useful taking into account the fact that nowadays the percentage of mobile visitors has extremely increased. The builder was specially designed for separate editing of desktop and mobile versions of the form, it gives you the possibility to change the design completely; remove, add and customize any of the elements described below for each version separately. Separate editing gives you the possibility to approach the desktop and mobile visitors in a different manner if necessary.

IMPORTANT: the “Undo” / “Redo” on the top of the menu allow you to undo or redo the last action done when editing one particular element in the form:

 

Each form template is made of blocks and elements inside them. Due to the form structure the design process of the form in “BUILDER” can be divided into 3 main phases:

  1. General Form Design
  2. Block Design
  3. Element Design

Let’s look at each of them separately.


PHASE 1: General Form Design

 

The General Form Design (or the general form parameters) is done in the “GENERAL SETTINGS”. They are the first to be seen once you select the template and press the “select & edit” button.

 

Here you will set the general form design such as:

DESKTOP

  • Desktop position- the choice of the position of the form when shown on the website - 9 positions for the desktop

  • Border Radius – the borders of the form can be “not rounded”, “slightly rounded” and “medium rounded”

  • Underlay theme color -the form background color scheme – “dark”, “light”, or “none” (without background lightening at all,)

 

  • Close button size – the choice between “small”, “regular” or “big”
  • Close button colour

Do not forget to set your mobile settings by switching to “MOBILE” version:

       

MOBILE

  • Mobile position - 2 for the mobile version 
  • Blocks order
  • Border Radius
  • Underlay theme color 
  • Close button size
  • Close button colour



PHASE 2: Block Design


When you set the general parameters of the form in the the “GENERAL SETTINGS” it is time to review the blocks (sections) that the form is made of. This can be done in the “BLOCK SETTINGS”. To access them you need to click on the form avoiding clicking on the elements of the block:

To come back to the “GENERAL SETTINGS” after all you need to do is to click on the background of the form:

 

The “BLOCK SETTINGS” consists of:

  • Section background - Hhere you can set the background color of the entire section (block), or add a background image
  • Padding – this is the setting of external indents of the block for all the elements inside 

IMPORTANT: please remember that the blocks (sections) cannot be deleted.

 

PHASE 3: Elements Design


Each form template is made of blocks and elements inside. We have already reviewed the “GENERAL SETTINGS” of the form as well as “BLOCK SETTINGS” so the next step is to see how the elements of the form can be edited inside the “BUILDER” menu. 

If are satisfied with the elements set by default in the form template you have selected  you can simply   “Go to display settings” to continue setting your OSM campaign:

 

All the elements in the form can be edited, deleted and dragged with the mouse to the right place in the block section. To select items for editing, you need to click on it.

If you are happy with the elements general settings but need to edit the text inside then all you need to do is to select the element you want to update and click on the “pencil” icon:

By doing this you will access the “Text visual editor”:

 

The editor has 2 panels:

Top panel

  • Font weight
  • Font slope
  • Strikethrough font
  • Underlined font
  • Font size
  • Change the font from the list
  • Insert links to text


  The bottom panel

  • Align text to the left
  • Align text to the right
  • Center the text 
  • Align the text lines
  • Add a side indent to the left
  • Adding a side indent to the right 
  • Add line spacing
  • Change text color
  • Reset all set text styles

To set the above settings, you need to select the text and click on the selected action in the editor.

 

IMPORTANT: to edit the text on the button or the link please go to “BUTTON SETTINGS” and “LINK SETTINGS” accordingly. 

To “delete” or “move” the element please select the “bin“ or “move cross” icons:

You can customize the existing elements which are set in the form “by default” or you can add new elements in your form in the “Add element” menu:

 

To add an element to the form, you need to drag it with the mouse to the right place in the block.

If you need to update other parameters of the element which do not include text editing and deleting or moving the element then you need to use the settings which are available on the left side of your screen each time you select the element in the block:

 

 

There are 8 element types that can be added in the form:

  • Header
  • Text
  • Image
  • Video
  • Button
  • Link
  • Input
  • Divider

Let’s see what settings are available per each element from the menu.

“HEADER” and “TEXT”

These 2 elements have the same settings, as they both relate to the text.

Padding- adjust the indent for each side inside the text element

Vertical space - one-time indent over the text element and the choice of its size.

Block background - the background color of the entire text element, the background image can be added here as well. 

IMPORTANT: to edit the text inside the element please use the “Text visual editor” available by clicking on the element in the block (explained earlier in the article already).

“IMAGE”

Drag the “Image” tab to the form area and then select and load the desired image of any format.

If the image was added in the form by default you can change it in 3 different ways:

  • Click on the “upload image” button and load the picture from the computer
  • Click on the “file” icon in the form and load the picture from the computer
  • Insert the link from any resource to the image

 

 

Having added a picture, you can choose “Border Radius” here as well.

Other “IMAGE” settings are:

Padding-adjust the indent for each side inside the picture element

Block alignment - align the picture itself inside the picture element

 

Vertical space- one-time indent over the picture element and the choice of its size

Width- adjust the size of the picture element in the block section of the form

 

“VIDEO”

You can only add the video from Youtube, please enter the URL in the requested field.

You can set “auto play” in the same section for the video as well:

 

The “VIDEO” settings are almost the same as for the “IMAGE”:

Width- adjust the size of the video in the block section of the form

Block alignment - align the video itself inside the picture element

Vertical space- one-time indent over the video and the choice of its size.


“BUTTON”

Add the button to redirect visitors to other pages or close the form. You can add multiple buttons with different settings in one form or simply edit the button in the chosen template.

The button settings in the left panel are:

Button action – here you set the action to be done when the website visitor clicks on the button

The following options are available:

  • Open URL - here you insert the link to the redirected page, you can set as well whether to open it in the current or new tab
  • Close form – when enabled, the form will be closed once the client clicks on it, i will not redirect the visitor to another page.


Padding - set the indent for each side inside the button element

Button design- like it was said previously you can only edit the button text and design in the “button design” settings.

This is what can be updated:

  • Text inside the button
  • Text Color
  • Text font
  • Font weight
  • Background color or image 
  • Button width
  • Button position inside the Button element
  • Text position inside the Button element
  • Button Border Radius
  • Border Style
  • Border Color

Vertical space - one-time indent over the button and the choice of its size

 

“LINK”

Drag the “LINK” tab to the form area and then add the “URL link” and set the “link action”.

Link action – here you set the action to be done when the website visitor clicks on the link.

The following options are available:

  • Open URL - here you insert the link to the redirected page, you can set as well whether to open it in the current or new tab
  • Close form – when enabled, the form will be closed once the client clicks on it, i will not redirect the visitor to another page.

 

Padding - set the indent for each side inside the link element

Link design – here you can edit the text in the link:

  • Link text
  • Text color
  • Font family
  • Font size
  • Font weight
  • Text alignment

Vertical space - one-time indent over the link element and the choice of its size

“INPUT”

The “INPUT” element is set to collect the data from your website visitors. When it comes to the background color and text settings please remember that the “INPUT” is actually the “input form” with “input fields” that’s why separate settings are available. 

Input Form Padding - set the indents for each side of the input element

Input Form Design - set the background color or the background image inside the Input element, outside the input fields and the button

Input Field Design – here you can adjust the data entry fields in the input form

Button design - all the design settings are the same as in the “BUTTON” element, described above

Button action - here you set the action to be done when the website visitor clicks on the button

The following options are available:

  • Open URL - here you insert the link to the redirected page, you can set as well whether to open it in the current or new tab
  • Close form – when enabled, the form will be closed once the client clicks on it, i will not redirect the visitor to another page.
  • Lead to success -when this action is selected, the visitor will see the welcome window “Success Form” with some information promised or related to the data sent earlier in the form.

Input Fields setting - the section where you set the data entry fields.
 There is a whole list of input fields available to select the data you need from your website visitors.

Simply enable the necessary field in the settings and it will appear in your “input form”:

If you need to change the order of your “input fields” please first click on the field in the settings then drag the necessary field on the required place with the help of “move cross” icon that will appear on the field:

If you want to make the fields "obligatory" please click on the enabled field first and select "lock icon" which is appeared on the top:

 

“DIVIDER”

This is a small design element to separate the form elements with a line. 

The main settings are:

  • Divider color
  • Size
  • Vertical space

 

IMPORTANT: After setting up the OSM Forms for Desktop & Mobile, click on the “Go to display settings” button, and proceed to setting up the Triggers & Conditions of the campaign.

You can read more about this here.