Forms (Toolbar)

The Forms Toolbar adds a form insert icon to the toolbar of the content editor. This will allow you to build forms for the user to fill out. You can even prefill information from existing profile properties to aid the user. When the user submits the form, its contents will be stored in profile properties of the users profile.

Adding a form

To add a form at the place of the cursor, click on the icon.

forms.png

Inserting a form will insert an empty form canvas in the editor and will open a tabbed lightbox with form controls. The lightbox itself can be repositioned on the page by dragging it using the drag bar on its left side.

The lightbox contains these tabs:

The following sections will discuss each tab in detail.

Add a Field

On this tab you construct your form by adding fields to the form canvas.

The following fields can be added:

Click the button of the field of your choice to add it to the form canvas and switch to the Field Settings tab where you can edit the details.

Field Settings

This tab will automatically open when you click on a field in your form. It allows you to edit the details of the field. The available details differ per selected field, as detailed below.

Plain text

A plain text field is not a regular input. Instead, it allows you to insert static text that cannot be edited.

Available options:

  • Text - The text to display. Use the editor buttons to add links or profile properties to the text.
  • Field placement - Use the arrow buttons to move this field up or down relative to the other form fields.
  • Delete Field - Click to delete this field from the form.

 

Single Line Text

The single line text input allows the visitor to enter a line of text.

Available options:

  • Required / Optional - Determines whether entering a value for this field is required or optional.
  • Label - The label displayed with the field.
  • Field placement - Use the arrow buttons to move this field up or down relative to the other form fields.
  • Delete Field - Click to delete this field from the form.
  • CSS Class - The name of a class in the page CSS.
  • Predefined Value - A line of text to fill in to field.
  • Instructions for User - Text with an explanation for usage of the field.
  • Field size - Determine the size of the input field: small, medium or large.
  • Validation Type - Select the type of validation that will be done when the user submits a value for this form. Choices are:
    • None - Any text is allowed.
    • Email - Only an email address is allowed.
    • Number - Only a number is allowed.
    • Regular Expression - Enter a regular expression to make a custom validation.
  • Validation Instructions - Enter the message to display when the validation fails.
  • Set or Add value to profile property - Indicate in which profile property the value should be stored when the user submits the form successfully. 
  • Prefill with value from profile property - Indicate from which profile property the initial value for the field should be retrieved.

 

Dropdown List

Use the dropdown list to create a pulldown menu form field with a list of values to select from.

 Available options:

  • Required / Optional - Determines whether entering a value for this field is required or optional.
  • Label - The label displayed with the field.
  • Field placement - Use the arrow buttons to move this field up or down relative to the other form fields.
  • Delete Field - Click to delete this field from the form.
  • CSS Class - The name of a class in the page CSS.
  • Predefined Value - A line of text to fill in to field.
  • Instructions for User - Text with an explanation for usage of the field.
  • Click the [Add] button to add new values.
  • Hover over a value and click the delete icon on the right to delete a value.
  • Values Value - The value that will be used when the user submits the form.
  • Values Label - The text label for the value.
  • Validation Instructions - Enter the message to display when the validation fails.
  • Set or Add value to profile property - Indicate in which profile property the value should be stored when the user submits the form successfully. 
  • Prefill with value from profile property - Indicate from which profile property the initial value for the field should be retrieved.

 

Paragraph Text

A multi line text input field allows the user to enter a paragraph of text.

 

 

Available options:

  • Required / Optional - Determines whether entering a value for this field is required or optional.
  • Label - The label displayed with the field.
  • Field placement - Use the arrow buttons to move this field up or down relative to the other form fields.
  • Delete Field - Click to delete this field from the form.
  • CSS Class - The name of a class in the page CSS.
  • Predefined Value - A line of text to fill in to field.
  • Instructions for User - Text with an explanation for usage of the field.
  • Field size - Determine the size of the input field: small, medium or large.
  • Validation Type - Select the type of validation that will be done when the user submits a value for this form. Choices are:
    • None - Any text is allowed.
    • Email - Only an email address is allowed.
    • Number - Only a number is allowed.
    • Regular Expression - Enter a regular expression to make a custom validation.
  • Validation Instructions - Enter the message to display when the validation fails.
  • Set or Add value to profile property - Indicate in which profile property the value should be stored when the user submits the form successfully. 
  • Prefill with value from profile property - Indicate from which profile property the initial value for the field should be retrieved.

 

 

Multiple Choice

The multiple choice provides the user with a list of radio buttons from which a single option can be selected.

 

Available options:

  • Required / Optional - Determines whether entering a value for this field is required or optional.
  • Label - The label displayed with the field.
  • Field placement - Use the arrow buttons to move this field up or down relative to the other form fields.
  • Delete Field - Click to delete this field from the form.
  • CSS Class - The name of a class in the page CSS.
  • Predefined Value - A line of text to fill in to field.
  • Instructions for User - Text with an explanation for usage of the field.
  • Field layout - Determine how the selections are arranged visually: side by side or in a column.
  • Click the [Add] button to add new values.
  • Hover over a value and click the delete icon on the right to delete a value.
  • Values Value - The value that will be used when the user submits the form.
  • Values Label - The text label for the value.
  • Validation Instructions - Enter the message to display when the validation fails.
  • Set or Add value to profile property - Indicate in which profile property the value should be stored when the user submits the form successfully. 
  • Prefill with value from profile property - Indicate from which profile property the initial value for the field should be retrieved.

 

Checkboxes

Checkboxes controls are the same as the Multiple Choice controls explained above. The difference is in the presentation on the form: a user can select more than one checkbox on the form, whereas only one radio button can be selected.

 

Date Picker

The Date Picker allows the user to select a date from a selection box.

 

Available options:

  • Required / Optional - Determines whether entering a value for this field is required or optional.
  • Label - The label displayed with the field.
  • Field placement - Use the arrow buttons to move this field up or down relative to the other form fields.
  • Delete Field - Click to delete this field from the form.
  • CSS Class - The name of a class in the page CSS.
  • Predefined Value - A line of text to fill in to field.
  • Instructions for User - Text with an explanation for usage of the field.
  • Show Date Picker - Determine how to display the date picker:
    • On Focus - Hide the date picker initially and show it when the user tries to enter a date in the input field.
    • Inline - Show the date picker instead of an input field.
  • Start Date - Enter the date that will be selected initially. Leave the field empty to not select any date initially.
  • Validation Instructions - Enter the message to display when the validation fails.
  • Set or Add value to profile property - Indicate in which profile property the value should be stored when the user submits the form successfully. 
  • Prefill with value from profile property - Indicate from which profile property the initial value for the field should be retrieved.

 

 

Button

The submit button allows the user to submit the form.

 

Available options:

  • Label - The text displayed on the button.
  • Field placement - Use the arrow buttons to move the button up or down relative to the other form fields.
  • Delete Field - Click to delete this field from the form.
  • CSS Class - The name of a class in the page CSS to apply to the button.
  • Instructions for User - Text with an explanation for usage of the button.
  • Field size - Determine the size of the input field.

 

Styling

On the Styling tab you can modify the look of your form and all its fields.

 

Available options:

  • Label Placement - Where to place the text label of a field relative to the field itself: above or before the field.
  • Custom CSS URL - Optionally add a URL where custom CSS is located.
  • Custom CSS Code - Optionally enter CSS code to overrule page CSS and CSS of the custom CSS URL.

After Submit

On this tab you specify what happens after the user clicks the button to submit the form.

 

 Available options:

  • Redirect to Web Page - Enter the web page URL where the user will be redirected after successfully submitting the form.
  • Inline Message - Edit the message to display after successfully submitting the form. The form fields will be replaced by this message.
  • Close Lightbox - When the user successfully submits the form, it will close the lightbox it is in. This assumes that you placed the form in a dialogue of the type "Lightbox".

Form canvas

The form canvas holds all elements of the form together in the inline editor. When you hover over the canvas or one of its fields, the outline of the canvas or field will light up.

In the example below the line "Get in touch with us" is regular content of the inline editor. The form canvas lights up with a blue background. Hovering over the "First Name" field lights up its outline: 

canvas.png

Click any field to open its field settings in the form controls lightbox. Now you can edit the settings for the highlighted field. You will see the effect of any changes you make in the settings.

The highlighted field had a handle bar on the right side. This bar allows you to reorder the fields be dragging the highlighted field up or down. Note that you can also reorder fields by clicking the Field Placement arrows on the Field Settings tab.

The Insert Template Edit Toolbar is a certified plugin.