Each OSM 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:
“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 design of the OSM Form 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.