Changing the Border style in the form builder

The border is an attribute that may change its style in the web form. You can change the form’s border, a label border, an input element’s border or a container border.
All this can be done really easily using the border style options in the upper toolbar – ‘element style’ section in the form builder.

Steps to change the border style:
1- select the element you want to affect its border.
if you wish to change the form’s border simply do not select any element, or even click outside of the white design area.

2- Choose a border style (solid, ridge, outset etc) from the listbox.
Please notice that ‘none’ will make the border disappear.

3- Open the border width listbox and choose the line width.

4- Press on the ‘border color’ picker icon and choose the border color.

5- Save the form.

Related topic:
Read about how to use the ‘auto position‘ feature.

Changing font style in the form builder

When a label or an input element are dragged and dropped on to the design area in the form builder they have a default set of characters, which can be changed.
The style options include:
font family
font size
font color
background color

In order to change the font style you need to:
1- font family – open the ‘font family’ listbox and choose the font you want.

2- Font size – Open the ‘font size’ listbox to choose the size in pixels.

3- Font Color – press on the ‘font color’ icon to open the color picker, and press on ‘ok’ to save the chosen color.

4- Background color – this style option is mainly used to change backgrounds of the form or containers within the form, but it may be applied to labels and input elements as well.
Press on the ‘background color’ icon to open the color picker and press ‘ok’ after choosing your color.

5- Bold – this button controls the font’s weight. Press on the ‘Bold’ icon to make the font weight bold. Pressing on this button again will make the font regular weight again.

6- Italic – this button changes the font style to italic. Press on the ‘Bold’ icon to make the font weight bold. Pressing on this button again will make the font regular again.

7- Underlined – this button changes the font decoration to underline. Pressing on this button again will change the will remove the under line.

In addition to being able to change font style using the upper toolbar you can also change the font style through the element settings in the ‘style’ field. This option is suitable for those who are familiar with CSS and can insert style code themselves.

Related topics:
How to auto position elements
How to make same space between elements