06Sep, 2016
0Comments

Go further in customising your forms

You can customise the input fields of your forms or your separators by modifying their size, color and adding different icons. You can also customise your lists in the choice element.

Customise your input fields.

  • Go to the options of your field to be modified, Display tab.

Display option

  • In the “Size of the item” drop-down list, select “Normal“, “Greater” or “Smaller” to adjust the size of your field.

Size of the element

  • To change the color of a field, click on the “Color” drop-down list:

color

  • To add an icon, click on the “Icon” box and select the one that suits you.

icon

Here is an example where 5 color fields have been configured with the smallest size and we added icons:
6 color fields have been configured with the smallest size to enter the same line on a tablet

  • In the “Help text” box, you can enter information needed to understand your field. It will be materialized by a Tooltip.

help text

It will be materialized by a Tooltip

  • Click on Confirm to save your configuration.

Customise your separators.

  • Go to the options of your separator then in the Display tab.

 In the display tab you can define

  • In the “Height” drop-down list select “Large“, “Medium” or “Small” to set the size of your separator.
  • To change the color of the separator, click on the “Background Color” drop-down list and select the color you want.
  • To add an icon to your separator, click on the “Icon” box and select the one that suits you.
  • Click on Confirm to save your settings.

Three different separators with different icon, color and size.

Customise your choice fields.

  • Go to the Font Awesome Icons website which will allow you to choose your icon(s).
  • Click on the desired icon and note the code corresponding to the icon. This code always starts with “fa-“.

Notez le code correspondant à l’icône qui commence par « fa-».

  • In your form, go to the options of your choice field then in the Features tab.
  • Fill in the “List items (Label or Code:Label)” field.
  • Fill in the “Icons” field with the codes of the desired icons in the same order as the List items entered previously.
    As a reminder, the codes of the icons begin with “fa-“.

Customise your choice fields

  • Then, click on Confirm.

Here is the result on your mobile/tablet:

Customise your choice fields

Do not hesitate to comment on this article!
All your questions, comments and suggestions are most welcome!

Post a comment

Your email address will not be published. Required fields are marked *