Form-elements

Text input

The "text-input" element is basicaly meant for short data. Like for example a name or an e-mail address. All the settings related to the text-input field are listed below.

• Name*: This option sets the name of the the value inserted in the input-field.
• Caption: This is the name linked to the input-field and visible on the form.
• Obligated: Leave this option blank if the input-field can be skipped by the visitor.
• Format:
  • Normal: This format has no restrictions.
  • Email: Use this format if the data is an e-mail address.
  • Numeric: Set this format if the requested data is a numeric value.
  • Regular expression: If set, you can fill in your regular expression in the input-field right under the setting.
• Min. length: Is the minimum amount of characters needed.
• Max. length: Is the maximum amount of characters allowed.
• Default value: This is the standard value of the input-field.
• Size: This is the size of the input-field expressed in pixels.
• Css class: The reference entered in this input field allows you to style that specific element. To edit the Css go to the Controlpanel and select the "Files" option listed under the "Theme" features.

Big text input

The "Big text input" element is used for data that can not fit into the "text input" element. Like for example a small text, in this case it is best to use the "big text input " in order to improve the usability. The complete text will remain visible to the visitor which makes it way easier to correct it.

• Name*: This option sets the name of the the value inserted in the input-field.
• Caption: This is the name linked to the input-field and visible on the form.
• Obligated: Leave this option blank if the input-field can be skipped by the visitor.
• Min. length: Is the minimum amount of characters needed.
• Max. length: Is the maximum amount of characters allowed.
• Default value: This is the standard value of the input-field.
• Rows: If set this option will determine the amount of rows your big text input is made of.
• Columns: If set this option will determine the amount of columns your big text input is made of.
• Css class: The reference entered in this input field allows you to style that specific element. To edit the Css go to the Controlpanel and select the "Files" option listed under the "Theme" features.

Checkbox

The "Checkbox" element is used for data with only 2 states. You could compare the checkbox to a switch (on / off).

• Name*: This option sets the name of the the value inserted in the input-field.
• Caption: This is the name linked to the input-field and visible on the form.
• Obligated: Leave this option blank if the input-field can be skipped by the visitor.
• Checked: If checked, the checkbox on the form will automaticaly be checked.
• Css class: The reference entered in this input field allows you to style that specific element. To edit the Css go to the Controlpanel and select the "Files" option listed under the "Theme" features.

Select

The "Select" element can be used when the visitor has to select 1 or more (multiselect) predefined values from a large range of choices.

• Name*: This option sets the name of the the value inserted in the input-field.
• Caption: This is the name linked to the input-field and visible on the form.
• Options: The way you have to enter the options of the select is demonstrated in the following screenshot.
  
  
  Every option of the select has to be filled in on a new line. In front of the ":" you got to fill in the value you want to associate with the option of the select element. The option(select) has to be filled in behind the ":".
  Notice that the value "0" won't validate your form if the "obligated" setting was activated.
  
  The default value of the select is allways the option mentionned on the first line. If you want another option to be the default value, you need to add ":selected" at the end of that option. This is how the select would look like with the "Options" settings shown in the previous screenshot:
  
  
  
• Multiselect: This setting should be checked if you want the visitor to be able to choose more then 1 "select-option" (The CTRL button has to be held to select multiple options).
• Size: This value indicates how many select-options are visible in the select list. Remark that if the inserted value for this setting is inferior to the amount of options available in the select, the visitor will have to browse trough the options of the select by meaning of the scroll-down and scroll-up arrows.
• Obligated: Leave this option blank if the input-field can be skipped by the visitor.
• Css class: The reference entered in this input field allows you to style that specific element. To edit the Css go to the Controlpanel and select the "Files" option listed under the "Theme" features.

Radiobuttons

The "Radiobuttons" element could be used when the visitor has to choose only 1 option from the available possibilities.

• Name*: This option sets the name of the the value inserted in the input-field.
• Caption: This is the name linked to the input-field and visible on the form.
• Options: The way you have to enter the options of the radiobuttons is demonstrated in the following screenshot.
  
  
  
  Every option of the radiobuttons has to be filled in on a new line. In front of the ":" you got to fill in the value linked to the name of the radiobuttons element. Behind the ":" you got to set the name of the "select-option" that is visible for the visitors.
  
  Add ":checked" at the end of an option's line if you want that option to be selected by default.
  
  This is how the radiobuttons would look like with the settings shown in the previous screenshot:
  
  
  
  
• Obligated: Leave this option blank if the input-field can be skipped by the visitor.
• Css class: The reference entered in this input field allows you to style that specific element. To edit the Css go to the Controlpanel and select the "Files" option listed under the "Theme" features.

Checkboxgroup

The "Checkboxgroup" element can be compared to the multi-select (Select element whiches multi-select setting was activated). To choose multiple options you need to keep the "CTRL" button pressed while selecting the options.

• Name*: This option sets the name of the the value inserted in the input-field.
• Caption: This is the name linked to the input-field and visible on the form.
• Options: The way you have to enter the options of the checkboxgroup is demonstrated in the following screenshot.
  
  
  
  
  Every option of the checkboxgroup has to be filled in on a new line. In front of the ":" you got to fill in the values of the available options of the checkboxgroup element. Behind the ":" you got to set the names of the "checkboxes" that are visible for the visitors.
  
  Add ":checked" at the end of the line of the "option-setting" if you want one of the checkboxes to be selected by default.
  
  This is how the checkboxgroup would look like with the "Options" settings shown in the previous screenshot:
  
  
• Obligated: Leave this option blank if the input-field can be skipped by the visitor.
• Css class: The reference entered in this input field allows you to style that specific element. To edit the Css go to the Controlpanel and select the "Files" option listed under the "Theme" features.

Title

The "title" element is meant to insert a title between 2 elements.

• Name*: This option sets the name of the form-element.
• Caption: This is the data visible for the visitor. This is also the only data they will see as the "title" element is not meant to be used as an input-filed but to add titles to your form.
• Css class: The reference entered in this input field allows you to style that specific element. To edit the Css go to the Controlpanel and select the "Files" option listed under the "Theme" features.

Text

The "Text" element allows you to add some text to the form.

• Name*: This option sets the name of the form-element.
• Css class: The reference entered in this input field allows you to style that specific element. To edit the Css go to the Controlpanel and select the "Files" option listed under the "Theme" features.
• Content: Fill in your data in this area. You can also add data in HTML, thefore you need to select the "HTML" button in the top-right corner of the input-field.

Hidden input

The "Hidden input" element should be used for data that has to be sent along with the form but that shouldn't be visible for the visitor.

• Name*: This option sets the name of the the value inserted in the input-field.
• Value: Here you can set the value linked to the "hidden input" field. Notice that a hidden input field will never be visible for the visitors.

Date

Select the "Date" element if the user has to submit a date. The "Date" element has a built-in feature that triggers the "Datepicker" if the visitor clicks on the input-field of the date element.

• Name*: This option sets the name of the the value inserted in the input-field.
• Caption: This is the name linked to the input-field and visible on the form.
• Obligated: Leave this option blank if the input-field can be skipped by the visitor.
• Format:
  • All dates: This format has no restrictions, the visitor can pick any date.
  • Past dates: This restriction prevents the user to set a date that follows the current date.
  • Future dates: This restriction prevents the user to set a date that preceeds the current date.
    
• Default value: This option allows you to set a default date for the date element. The default value can still be overwritten by the visitor.
• Css class: The reference entered in this input field allows you to style that specific element. To edit the Css go to the Controlpanel and select the "Files" option listed under the "Theme" features.

File uploader

This type of element is needed when you expect the visitor to submit a file to the form.

• Name*: This option sets the name of the the value inserted in the input-field.
• Caption: This is the name linked to the input-field and visible on the form.
• Obligated: Leave this option blank if the input-field can be skipped by the visitor.
• Allowed extensions: Set the file-extensions that are allowed to upload. The syntax of this setting is demonstrated in the following screenshot.