Forms (Toolbar)

You can use the Forms Toolbar to add form objects to the content editor. You use this toolbar to build forms that customers and user can fill out. You can even prefill information from existing profile properties to aid the user. When the user submits the form, its content will be stored in profile properties of the customer's or user's profile.

Adding a form

To add a form at the place of the cursor, click Insert object, then click Forms.

forms.png

Inserting a form inserts an empty form canvas in the editor and opens a tabbed lightbox with form controls. You can reposition the lightbox on the page by dragging it using the drag bar on its left side.

The lightbox contains these tabs:

The following sections discuss each tab in detail.

Add field

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

forms-toolbar-add-a-field.png

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 lets customers or visitors 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 whether the value should be set to or added to a profile property; choose the profile property into which 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.
  • Values: 
    • 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.
  • Link with profile property:
  • Set or add value to profile property - Indicate whether the value should be set to or added to a profile property; choose the profile property into which the value should be stored when the user submits the form successfully. 
  • Prefill with value from profile property - Indicate the profile property from which the initial value for the field should be retrieved.

 

Paragraph text

A multi-line text input field lets customers or visitors 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 whether the value should be set to or added to a profile property; choose the profile property into which 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 if the validation fails.
  • Set or add value to profile property - Indicate whether the value should be set to or added to a profile property; choose the profile property into which the value should be stored when the user submits the form successfully. 
  • Prefill with value from profile property - Indicate the profile property from which 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: With checkboxes, a user can select more than one checkbox on the form, whereas with radio buttons, only one 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 whether the value should be set to or added to a profile property; choose the profile property into which 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.

Action_for_button3.png

 

Available options:

  • General:
    • 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.
  • Action for button - Select what you want to happen when the visitor clicks the button. Choose from:
    • Submit form - The form will be submitted, define what exactly will happen on the "Submit settings" tab.
    • Other actions  - Click Add action and select one or more actions that you would like to execute upon clicking the button. Some actions may be greyed out and disabled if they don't fit the context.
      • Close overlay - This closes the dialogue if it is an overlay, such as the lightbox, toaster, slide-out, or notification bar.
      • Show inline text - This shows the visitor a text message that you enter.
      • Throw event - Throw a BlueConic event that other dialogues can react to according to their When tab settings. Choose an existing event or create a new event.
      • Execute JavaScript - Enter script code to execute in the visitor's page.
      • Refresh page - Reload the page so new interactions can be loaded.
      • Redirect - Load another URL.
      • Consent / refuse objective - Set one or more objectives as consented or refused for privacy management.
      • Set / add value into profile property - You can add or set a value or a timestamp into an existing profile property. Note that the value must be of the correct data type for the profile property or it will not be stored. For example, if the data type of the profile property is "text" any value can be stored. Time and date values can be added to existing profile properties of the "date time" data type. Learn more about profile property data types.
  • Advanced options:
    • CSS Class - The name of a class in the page CSS to apply to the button.
    • Instructions for user - Text with an explanation for using the form button.

 

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.

Submit settings

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

 

Click the Add action button to add one or more of the following actions.Some actions may be greyed out and disabled if they don't fit the context.

  • Close overlay - This closes the dialogue if it is an overlay, such as the lightbox, toaster, slide-out or notification bar.
  • Show inline text - This will show the visitor a text message that you enter.
  • Throw event - Throw a BlueConic event that other dialogues can react to according to their When tab settings. Choose an existing event or create a new event.
  • Execute JavaScript - Enter script code to execute in the visitor's page.
  • Refresh page - Reload the page so new interactions can be loaded.
  • Redirect - Load another URL.
  • Consent / refuse objective - Set one or more objectives as consented or refused for privacy management.
  • Set / add value into profile property - You can add or set a value or a timestamp into an existing profile property. Use this setting to set a profile property storing information that a form was sent, which form, and at what time. You can also use it to set a profile property when a certain button is clicked. Note that the value must be of the correct data type for the profile property or it will not be stored. For example, if the data type of the profile property is "text" any value can be stored. Time and date values can be added to existing profile properties of the "date time" data type. Learn more about profile property data types.

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 standard plugin.