Form (Action)

The Form interaction displays a simple, one page form that a visitor can fill out and submit. Values from the form fields can then be written to the visitor's profile. After the visitor submits the form you can send them a confirmation e-mail or display a message. You use the three tabs along the top to define the Form interaction. Follow the links below for complete information.


Form Builder

The Form Builder consists of three tabs that you use to define the form fields that appear on the form, the settings for each of the fields, and what action should be taken after the form has been submitted. You build a form by dragging and dropping form fields onto the form palette from the "Add Field" tab. You have the choice of ten different form fields with which to compose the form. Each form field is described in this section along with its settings. The order that form fields are entered in the form from top to bottom is exactly the same order in which they appear to the visitor on the frontend.

Note: The example forms and form fields shown in this topic use the default BlueConic style. The look and feel of your forms will be different because you will be using your own corporate stylesheet.

To add a form field to the form, simply drag the fields from the "Add Field" tab onto the form palette. For example:



To configure the settings for a form field, click within the field in the form palette and the "Field Settings" tab becomes active. For example:





Add field

The fields that you can add to a form appear on the "Add field" tab. Each of the form fields is described below.

Plain Text
Text Area
Checkbox List
Radio Button List
Date Picker
Single Line Text
Drop-down
Checkbox
Radio Button
Button




Plain Text form field

The "Plain Text" field displays read-only text on the form. Typically this form field is used to explain to the visitor what they are expected to enter into a field on the form and/or the purpose of the form.

Field settings

 

SettingDescription
Plain Text The text to display at the position of the "Plain Text" field on the form.

Example

The following is an example of a "Plain Text" field in a form:





Text Area form field

The "Text Area" field is an input field into which the visitor can enter multiple lines of text.

Field settings

 

SettingDescription
Label The text that appears above the form field.
Identifier The unique internal ID that identifies this form component.
Value If you want to prefill the field with text, type it here.
Description The text that displays to the right of the field. This setting is optional.
Required Field See Common field options.
Link with Profile Property See Common field options.

Example

The following is an example of a "Text Area" field in a form:





Checkbox List form field

The "Checkbox List" field displays a series of checkboxes that the visitor can make selections from. Use this form field to offer the visitor a series of choices from which they can select more than one (if applicable).

Field settings

 

SettingDescription
Label The text that appears above the form field.
Identifier The unique internal ID that identifies this form component.
Description The text that displays to the right of the field. This setting is optional.
Required Field See Common field options.
Checkboxes (value, label) The text that displays next to the checkbox (the option) and the value to be written to the visitor's profile. In the left field (Value), enter the value for the checkbox option. This is the value that will be written to the visitor's profile if they select this checkbox option. In the right field (Label), enter the text that will appear to the right of the checkbox option on the webpage. You specify the profile property to which the value is written in the Store Value option (Field Options).

When you enter text in the Value/Label fields, a new option will appear below the first option. To delete an option, click the 'X' to the right of it.
Direction Specifies whether to list the checkboxes horizontally or vertically.
Link with Profile Property See Common field options.

Example

The following is an example of a "Checkbox List" field in a form:





Radio Button List form field

The "Radio Button List" field displays a series of choices from which the visitor can only select one option. Use this form field in cases where you want to narrow down the choice to a single option such as an age range, gender, a rating, and so forth.

Field settings

SettingDescription
Label The text that appears above the form field.
Identifier The unique internal ID that identifies this form component.
Description The text that displays to the right of the field. This setting is optional.
Required Field See Common field options.
Radio buttons (value, label) The text that displays next to the radio button (the option) and the value to be written to the visitor's profile. There are two input fields: Value and Label. In the left field (Value), enter the value for the radio option. This is the value that will be written to the visitor's profile if they select this radio button option. In the right field (Label), enter the text that will appear to the right of the radio option on the webpage. You specify the profile property to which the value is written in the Store Value option (Field Options)..

When you enter text in the Value/Label fields, a new option will appear below the first option. To delete an option, click the 'X' to the right of it.
Direction Specifies whether to display the radio buttons horizontally or vertically.
Link with Profile Property See Common field options.

Example

The following is an example of a "Radio Button List" field in a form:





Date Picker form field

The "Date Picker" field displays a calendar from which the visitor can select a date. This field can display up to three months at a time.

Field settings

 

SettingDescription
Label The text that appears above the form field.
Identifier The unique internal ID that identifies this form component.
Description The text that displays to the right of the field. This setting is optional.
Required Field See Common field options.
Show Date Picker Specifies how to display the date picker in the form. Select "On focus" to show the expanded date picker only when the Date Picker field has the focus (user clicks it). Select "Inline" to always show the Date Picker expanded.
Picker Offset Specify the date that has the focus in the calendar. If you do not specify a date, the current date will have the focus in the Date Picker.
Language Specify the language to use for the calendar. The options are English and Dutch (Nederlands).
Calendars Specify the number of calendars to display side by side. By default, one calendar is shown. You can display up to three calendars from left to right.
Link with Profile Property See Common field options.

Example

The following is an example of a "Date Picker" field in a form:





Single Line Text form field

The "Single Line Text" field allows the visitor to input one line of text.

Field settings

 

SettingDescription
Label The text that appears above the form field.
Identifier The unique internal ID that identifies this form component.
Value (Optional) The default text that appears in the Single Line Text field.
Description The text that displays to the right of the field. This setting is optional.
Required Field See Common field options.
Validation The validation that is performed on the text entered in the Single Line Text field. The options are:
  • E-Mail Address — Validate that the string entered by the visitor conforms to a valid e-mail address.
  • Number — Validate that the string entered by the visitor contains only numbers.
  • Regular Expression — Validate the string entered by the user using a regular expression..
Validation failed The message that will appear if the string the visitor fails validation.
Regular Expression The regular expression to use to validate the string the visitor enters. For information about regular expressions, see http://en.wikipedia.org/wiki/Regular_expression.
Link with Profile Property See Common field options.

Example

The following is an example of a "Single Line Text" field in a form:





Drop-down form field

The "Drop-down" field displays a drop-down list which the visitor can expand and make a single choice from.

Field settings

 

SettingDescription
Label The text that appears above the form field.
Identifier The unique internal ID that identifies this form component.
Description The text that displays to the right of the field. This setting is optional.
Required Field See Common field options.
Options (value, label) The options that appear in the drop-down list and the value to be written to the visitor's profile. There are two input fields: Value and Label. In the left field (Value), enter the value for the drop-down option. This is the value that will be written to the visitor's profile if they select this option. In the right field (Label), enter the text for the option. You specify the profile property to which the value is written in the Store Value option (Field Options).

When you enter text in the Value/Label fields, a new option will appear below the first option. To delete an option, click the 'X' to the right of it.
Link with Profile Property See Common field options.

Example

The following is an example of a "Drop-down" field in a form:





Checkbox form field

The "Checkbox" field displays a single option that the user can select or leave clear.

Field settings

 

SettingDescription
Label The text that appears above the form field.
Identifier The unique internal ID that identifies this form component.
Value The value that is written to the visitors profile if they select the checkbox. You specify the profile property to which the value is written in the Store Value option (Field Options).
Description The text that displays below the checkbox. This setting is optional.
Required Field See Common field options.
Link with Profile Property See Common field options.

Example

The following is an example of a "Checkbox" field in a form:





Radio Button form field

The "Radio Button" field displays a single option that the user can select or leave clear.

Field settings

 

SettingDescription
Label The text that appears above the form field.
Identifier The unique internal ID that identifies this form component.
Value The value that is written to the visitors profile if they select the radio button. You specify the profile property to which the value is written in the Store Value option (Field Options).
Description The text that displays below the radio button. This setting is optional.
Required Field See Common field options.
Link with Profile Property See Common field options.

Example

The following is an example of a "Radio Button" field in a form:





Button form field

The "Button" field is the submit button for the form.

Field settings

 

SettingDescription
Label The text that appears in the button ("Submit" by default).

Example

The following is an example of a "Button" field in a form:





Common field options

The following options, common to most form fields, are explained below.

Required Field

To make a form field mandatory, select the "Required" option. An asterisk will appear next to the field indicating that it is a required field. While most visitors understand the asterisk notation in online forms, it is a good idea to add an explanation about it somewhere on the form in a Plain Text field. The following example shows form fields that are required:



Set/Add value of profile property

Select this option if you want to store the value derived from a form field in a visitor's profile. You can either add the value to the profile property (comma separated) or set the value (replace).

To select the profile property to which the value is written upon submission of the form, follow these steps:

  1. Select "Set value of a profile property".
  2. Click the "pick profile property" link. See Profile properties for complete information on working with profile properties. When you have selected a profile property, its name appears next to the "Store Value" option.
  3. To overwrite any existing property value or values with the new value, select "Overwrite existing property value(s)".

Prefill with value from a profile property

Select this option if you want to prefill the form field with the value from one of the visitor's profile properties. This is useful for personalizing the form and/or aiding the visitor in filling in the form by inserting known values in some of the form fields.

To select the profile property from which the value is derived, follow these steps:

  1. Select "Prefill with value from a profile property".
  2. Click the "pick profile property" link. See Profile properties for complete information on working with profile properties. Once you have selected the profile property, its name appears next to the "Prefill Value" option.

Back to top


Form settings

The form settings specify the title of the form and what happens when the visitor submits the form.

Name

Specifies the title text for the form. Enter title text in the "Name" text box. The following shows how the title appears on the form:

Routing

The "Routing" setting specifies what happens after the visitor submits the form. You can either display a message inline or route the visitor to a specific URL.

Display an inline message

To display an inline message after the form is submitted, select "Inline" and enter the text for the message in the text field. The following is an example of an inline message:

Route the visitor to a URL

To route the visitor to a URL after the form is submitted, select "Go to URL" and enter the URL in the text field.

Back to top


E-mail options

You can send an e-mail to the visitor after they submit the form. The e-mail options are described below.

Send e-mail

To send an e-mail to the visitor after they submit the form, select "Send an e-mail when the form is submitted".

From E-mail Address

Enter the address that will appear in the "From" field of the sent e-mail message. You must use a plain e-mail address like susan@example.com.

Note that BlueConic sends its mails via Amazon Simple Email Service. If you use an e-mail address unknown to Amazon SES, you will receive a verification mail that contains a link to verify this new e-mail address. No mail will be sent out unless you click the verification link!

E-mail Subject

In the "E-mail Subject" field, enter the text that appears in the subject of the e-mail. You can combine text with values retrieved from one or more profile properties. This makes it possible to create a subject for the message that is personal to each individual visitor.

To enter the subject of the e-mail, follow these steps:

  1. Click in the "E-mail Subject" field. A cursor appears.
  2. Type the text for the subject of the e-mail.
  3. To enter a profile property that will be included in the subject, click the "Select Profile Property" button. See Profile properties for complete information on working with profile properties. After selecting the profile property, a placeholder for it appears in the subject text surrounded by a dotted blue box within curly brackets. For example:



    When the message is sent, the value retrieved from the specified profile property will appear at that position of the text.

E-mail Message

You compose the body of the e-mail message using the text editor. For complete information see Text editor.

Back to top


Styling

The style settings determine the way of displaying and the look and feel of the form when it displays for the visitor.

Display form

This option specifies where to display the form in the channel. The options are:

Inline (Use Position)

The form will appear 'in' the page instead of 'on top of' the page (as is the case with the Lightbox option. There are three options to place the form in the page; each option is related to the position defined right below the dialogue subnavigation. The three options are:

  1. Prepend — The form will be inserted at the beginning block of the specified position. The content that is currently shown at the position shifts down.
  2. Append — The form will be inserted at the end block of the specified position. The content that is currently shown at the position appears above the form.
  3. Replace — The form replaces the content at the specified position.

 

Lightbox

The form will appear in the center of the screen over the existing page in a lightbox. The lightbox has the following options:

OptionDescription
Trigger lightbox if Determines when the lightbox is made visible to the visitor. There are two moments:
  1. Visitor enters a page — The form will appear in the lightbox when the visitor enters a page in the specified channel.
  2. Visitor clicks an item — The form will appear in the lightbox if the visitor clicks the specified item. Enter a valid JQuery Selector in the "Selector" field. For complete information on jQuery Selectors, follow this link: http://api.jquery.com/category/selectors/. To select the specified item using the Visual Picker, click the "Visual Picker" link.
Show Lightbox after X seconds Specifies the number of seconds of delay before the lightbox containing the form appears.
Hide lightbox X seconds after submit Specifies how many seconds after the submit the lightbox disappears.
Show a black overlay over the page Specifies whether to surround the lightbox in which the form is shown with a semi-transparent black overlay.



Show Labels

Specifies whether to display the labels horizontally aligned with the form input fields.

Custom CSS URL

Use this option to specify a custom CSS to use for rendering the form. Enter the full URL where the CSS file is located. Enter the URL for your custom CSS in the "Custom CSS URL" field and then click [Save].

Custom CSS

Use this option to enter custom CSS. The CSS that you enter here is loaded after the CSS from the Custom CSS URL.

The Form Action is a standard plugin.