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
bold/italic/underlined

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

Advertisements

Creating a Roll over effect in the form builder

You can create a background roll over effect in the form builder in which an area has a certain color and it changes when the user’s mouse hovers over it.
In order to create a roll over effect you will need to use the “container” element.

following are steps to create a roll over effect:
1- Select a container in your web form.
2- Go to the container settings on the right.

3- Enter a color in the ‘Mouse Over color’ textbox, and a different color in the ‘Mouse Out color’ textbox.

4- Press on ‘apply’ and save the form.

The result of this action will look like this:
On Mouse over (in this example the color will turn red when the cursor is on it)

On Mouse Out (in this example the color will turn green when the cursor is not on it)