Help Center

In the BlueConic content editor, you can use the Forms Toolbar to build forms that your customers and users can fill out. You can even pre-fill information from existing profile properties. When a user submits the form, that content will be stored in profile properties of the customer's or user's profile.

BlueConic CDP Use Case: Adding a form to your pages with the BlueConic content editor

BlueConic customers use the Forms Toolbar for content gating use cases to collect customer information in exchange for viewing premium content on your site.

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

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

The following tabs appear on the lightbox with Forms controls:

• Add field
• Field settings
• Styling
• Submit settings

Add field

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

You use this tab to add these fields to your form:

• Plain text
• Single line text
• Dropdown list
• Paragraph text
• Multiple choice
• Checkboxes
• Date picker
• Button

Choose any field to add it to the form canvas, and then switch to the Field settings tab where you can edit the details.

Field settings

This tab opens automatically when you click on a field in your form. Here you can edit the details of each field. Available details differ based on the field you selected, as detailed below.

Plain text

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

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 the 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 the 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

This 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 the 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 field provides the user with a list of radio buttons from which they can select a single option.

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 the 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, a user can select only one. 

Date picker

The Date picker lets users 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 the 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 lets users submit the form.

 

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 might 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.
• Click tracking - Any click on a button that has been placed in the Form will track a 'Click' event for the dialogue the form is part of. Use the "Count every click as a click event for the dialogue" button to turn this default click event tracking on (checked) or off (clear) for each form button click.
• 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 the 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. You can choose the default conversion tracking (for each successful submission of the form), or choose not to register a conversion when a user submits the form.

Conversion tracking

BlueConic automatically registers a 'Conversion' event for the dialogue when a user successfully submits the form. You can use the "Count every successful submit as a conversion for the dialogue' button to change this default behavior. Selecting the checkbox (default) registers the conversion event when the submit is successful. Clearing the checkbox (empty) means a conversion event will not be registered for this dialogue when the user submits the form.

Click the Add action button to add one or more of the following actions. Some actions might 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 "Feel free to send us a message, or give us a call" 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: 

Click any field to open its field settings in the Forms 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 has a handle bar on the right side. You can use this bar to reorder the fields by 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.

Testing and troubleshooting dialogues

For tips on testing your dialogues with the BlueConic Simulator, see the tips in Testing Your Dialogues. Also see the troubleshooting dialogues section.