06 Sep, 2016

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.

input display

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

size of the item

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

color of the field

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


Here is an example where 5 color fields have been configured with the smallest size and we added icons: colors and icons

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

help text

help option

help text

  • Click on Confirm to save your configuration.

Customise your separators.

  • Go to the options of your separator then in the Display tab.
seperator display
  • 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. seperator size color and icons

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-".
  • 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 back office
  • Then, click on Confirm.

Here is the result on your mobile/tablet: T2 (13)-1


Go digital today!

Create an account to test the Kizeo Forms App Free of charge for 15 days !

We are available to answer your questions, suggestions, remarks, etc
Would you like to subscribe to our Newsletter?