Documentation / Getting Started

Managing Fields

form-edit

On the left hand side of the screen you will see a dashed box that says “Drop field here to add to the form” , this is the field dropzone, to the right of that is a list of fields under the title “Available Fields”.

Add a field

Click and drag the field that you want to add to the form from the right hand column into the field dropzone on the left hand size, If there are fields already added you can hover above or below to insert the field in the correct order you require.

Once you have dropped the field in the dropzone, a field panel should appear allowing you (as shown in the next image) to set attributes such as the field label, depending on the type of dropped field different options will be available.

form-first-field

Once a field has been dropped, you can easily reorder the list of fields by click and dragging on the top bar of the field panel, to make this easier you can toggle the display of the field panel by clicking on the up/down arrows at the top right corner of the field (highlighted below).

field-show

General Field Options

field-general

All fields have the following fields:

  • Label – Text displayed before the field.
  • Placeholder – Text displayed on the field before any data is inserted.
  • CSS Classes – Used when styling the form via CSS

Text Field Options

field-text

 

Text fields have the following fields:

  • Default value – Text entered here will populate the field when the form is loaded.

Textarea Field Options

field-textarea

Textarea fields have the following fields:

  • Rows – How many rows of text will be visible (alters the height of the textbox)
  • Default value – Text entered here will populate the field when the form is loaded.

Select Field Options

field-select

select fields have the following fields:

  • Empty Text – This text will appear as an empty option
  • Select Type – Allow the field to accept single or multiple options.
  • Values – Values can be add/removed via the plus and minus icons on the right hand side, each row makes up an choosable option.
    • Label – Text visible to the user
    • Value – Value of option, not visible to the user
    • Default – Check this to make to make the field pre populate with this selection.

Checkbox Field Options

field-checkbox

checkbox fields have the following fields:

  • Values – Values can be add/removed via the plus and minus icons on the right hand side, each row makes up an choosable option.
    • Label – Text visible to the user
    • Value – Value of option, not visible to the user
    • Default – Check this to make to make the field pre populate with this selection.

Radio Field Options

field-radio

radio fields have the following fields:

  • Values – Values can be add/removed via the plus and minus icons on the right hand side, each row makes up an choosable option.
    • Label – Text visible to the user
    • Value – Value of option, not visible to the user
    • Default – Check this to make to make the field pre populate with this selection.

File Field Options

field-file

File fields have the following fields:

  • Maximum files size – Set this to the size limit of files you want to allow users to upload, enter this in megabytes as an integer (check that your php server settings “post_max_size” and “upload_max_filesize” are greater than the value you enter, otherwise this can cause problems.
  • Allowed Extensions – type all the file extensions you want to allow users to upload each separated by a comma “,”.

Field Validation

Adding field validation rules is as easy as clicking on the “Add Validation Rule” on the field panel, once clicked a dropdown will appear allowing you to choose the type of validation you want to add. Once selected extra options will appear depending on the chosen value, by default all validation rules allow you to customise the message displayed when the field is invalid, leave the message blank to use the default validation message.

field-validation

Remove a field

Fields can be deleted by clicking on the delete text at the top right of each field.