Topics

Form


In This Guide

A form is a module that enables visitors to submit data to your website. You can use forms to collect contact information from a visitor, prompt a visitor to provide additional information about special interests, and generally increase engagement with your website.


Creating a contact form

A contact form is a common vehicle for enabling visitors to leave contact information, often for a sales, consultant, or technical support representative to initiate further discussion with the visitor.

Contact form example.svg

To create a contact form:

  1. Create or open the item to which you want to add a contact form.
  2. Toward the right of the widget, select more_horiz> Overrides. The Overrides widget appears.
  3. Expand Layout Overrides. Drop-down lists AboveAside, and Below appear for the module’s position. For an illustration of these positions, see the diagram in the Module overview topic.
  4. From one of the drop-down lists, select Replace. For an explanation of the possible selections for module placement, see Setting the site layout.
  5. Click add_circle_outline, and select Contact Form. A Contact form appears. Depending on your version of Brightspot, the form may already be populated with some fields.
  6. In the Title field, enter a title.
  7. In the Description field, enter a description for the form.
  8. From Items, design your form by clicking add_circle_outline and selecting one or more of the following fields:
    • Captcha Field—Creates a CAPTCHA field.
    • Choice Field—Creates a drop-down list, radio button, or checkbox field.
    • File Upload Field—Creates a field for file uploads.
    • Group—Creates a widget containing a group of fields.
    • Text Field—Creates a field for entering text.

      See Types of form fields for details on each.

  9. Under Actions, configure what Brightspot does with the submitted data; click add_circle_outline and select one or more of the following:
    • Data Collection Action—Saves the submitted data into an external file. An external application can read the file into a database.
    • Email Action—Sends an email containing the form’s data to a specified address, such as an email address for a sales representative.
    • External Submit Action—Submits the form data to an Internet address.

      See Form submission actions for details on each.

    Your form looks similar to the following:

    Contact form content edit form completed.png

  10. Complete your site’s workflow, and publish the form.

Creating a custom form

This feature requires the Express: Form plugin.

You can design a custom form using a variety of fields and messages. (If you want to create a contact form, consider using Brightspot’s contact form; for details, see Creating a contact form.

Custom form example.png

To create a custom form:

  1. Create or open the item to which you want to add a custom form.
  2. Toward the right of the widget, select more_horiz > Overrides. The Overrides widget appears.
  3. Expand Layout Overrides. Drop-down lists AboveAside, and Below appear for the module's position. For an illustration of these positions, see the diagram in the Module overview topic.
  4. From one of the drop-down lists, select Replace. For an explanation of the possible selections for module placement, see Setting the site layout.
  5. Click add_circle_outline, and select Custom Form. A form appears.
  6. In the Title field, enter a title.
  7. In the Description field, enter a description for the form.
  8. From Items, design your form by clicking add_circle_outline and selecting one or more of the following fields:
    • Captcha Field—Creates a CAPTCHA field.
    • Choice Field—Creates a drop-down list, radio button, or checkbox field.
    • File Upload Field—Creates a field for file uploads.
    • Group—Creates a widget containing a group of fields.
    • Text Field—Creates a field for entering text.

      See Types of form fields for details on each.

  9. Under Actions, configure what Brightspot does with the submitted data; click add_circle_outline and select one or more of the following:

    • Data Collection Action—Saves the submitted data into an external file. An external application can read the file into a database.
    • Email Action—Sends an email containing the form's data to a specified address, such as an email address for a sales representative. For details, see Email.
    • External Submit Action—Submits the form data to an Internet address. For details, see External submit.
    • User Generated Upload Action—Displays a field that visitors can use to upload a file from their laptop or device.

      See Form submission actions for details on each.

  10. In the Success Message field, design a message that appears when Brightspot successfully ingests the form's data.
  11. In the Error message field, design a message that appears when Brightspot cannot successfully ingest the form's data.

    Your form looks similar to the following:

    Custom form content edit form.png

  12. Complete your site's workflow, and publish the form.

Types of form fields

The following sections describe the different types of fields available in forms.

Drop-down lists

In a drop-down field, a visitor selects one or more choices from a list of related items. The following table describes the fields in a Drop-down form.

Field
Description
Main widget
Label

Field's label.

Description

Field's description.

Type

Dropdown

Allow Multiple

Lets visitor select more than one option in the list.

Placeholder

Initial selection in the list, typically an informational message.

Required

Visitor must make at least one selection.

Choices

One or more choices available in the list.

Advanced widget
Parameter

Value for the parameter attribute of this field's input tag. Your Brightspot developer uses this setting to ingest form data. You can also use this setting to populate emails with the information a visitor submitted.

Checkboxes

In a checkboxes field, a visitor marks checkboxes from a list of related items. The following table describes the fields in a Checkboxes form.

Field
Description
Main widget
Label

Field's label.

Description

Field's description.

Type

Checkboxes

Choices

One or more choices, each with its own checkbox.

Advanced widget
Parameter

Value for the parameter attribute of this field's input tag. Your Brightspot developer uses this setting to ingest form data. You can also use this setting to populate emails with the information a visitor submitted.

Radio buttons

In a radio buttons field, a visitor marks a single selection from a list of related items. The following table describes the fields in a Radio Buttons form.

Field
Description
Main widget
LabelField's label.
DescriptionField's description.
TypeRadio Buttons
ChoicesOne or more choices, each with its own radio button. For details, see Choices.
Advanced widget
Parameter

Value for the parameter attribute of this field's input tag. Your Brightspot developer uses this setting to ingest form data. You can also use this setting to populate emails with the information a visitor submitted.

Text

In a text field, a visitor enters text. You can perform data validation by selecting different types of text fields. The following table describes the fields in a Text Field form.

Field
Description
Main widget
Label

Field's label.

Description

Field's description.

Type

Type of text field.

  • Email—Visitor must enter text in the form of an email address.
  • Long Text—Visitor can enter almost unlimited text.
  • Phone Number—Visitor must enter text in the form of a phone number.
  • Short Text—Visitor can enter one line of text at most.
Placeholder

Field's initial value. Brightspot replaces the placeholder with the visitor's entry.

Required

Visitor must make an entry in the field.

Advanced widget
Parameter

Value for the parameter attribute of this field's input tag. Your Brightspot developer uses this setting to ingest form data. You can also use this setting to populate emails with the information a visitor submitted.

File uploads

In a file upload field, a visitor can upload a file from a laptop or mobile device. The following table describes the fields in a File Upload form.

Field
Description
Main widget
Label

Field's label.

Description

Field's description.

Allowed File Types

Types of files a visitor can upload with this field.

Allow Multiple

Visitor can upload more than one file.

Required

Visitor must upload at least one file.

Advanced widget
Parameter

Value for the parameter attribute of this field's input tag. Your Brightspot developer uses this setting to ingest form data. You can also use this setting to populate emails with the information a visitor submitted.

Choices

Drop-down lists, radio buttons, and checkboxes have one or more choices from which a visitor makes selections. You create a field's choices using the Choice form. The following table describes the fields in a Choice form.

Field
Description
Main widget
Label

Text appearing next to the checkbox, radio button, or in a drop-down list.

Advanced widget
Parameter

Value for the parameter attribute of this field's input tag. Your Brightspot developer uses this setting to ingest form data. You can also use this setting to populate emails with the information a visitor submitted.

Groups of fields

You can group related fields under a heading, a technique that helps visitors better understand the form and what data is required in each field.


Form submission actions

When a visitor fills out a contact form or ​custom form and clicks ​Submit​, Brightspot ingests the data and can take a variety of actions with it.

Data collection

Brightspot stores the submitted data in a raw format, and your web application can ingest the data as required.

Email

Brightspot sends an email after ingesting the data. You can configure the email to include information that the visitor submitted in the contact form using a command of the form ${parameter-name}. The following example shows how to send an email to a customer service center that includes the visitor's email address.

Step 1: Set parameter value

Create a form with an email text field. (For information about creating a form with an email field, see Text.) Under more_horiz> Advanced, in the Parameter field, note or change the value as required.

Email create form with text field.png

Step 2: Refer to parameter

Create an email action that uses the parameters.

Create an email action that uses parameters.png

In the previous illustration, Brightspot populates the email's body using the value visitors-email-address that the visitor entered using the form in Step 1.

Step 3: Add filtering rules

You can add filtering rules that examine email addresses before Brightspot forwards them to your email server. Brightspot processes only those email addresses that match the rule.

  1. Under more_horiz> Styles, in the Custom Pattern field, enter a regular expression.
  2. In the Custom Pattern Message field, enter a message that appears on the form should the submitted email address not conform to the regular expression.
    Email input styles content edit form.png

Referring to the previous image, if the submitted email address contains @example.com, Brightspot displays the following message:

Thank you for your interest. Please use your business email address.

External submit

Brightspot can forward a visitor's contact information to an external application. This scenario occurs when your organization manages a sales or technical support effort using an application other than Brightspot.

To configure an external form submission action:

  1. Under Actions, click External Submit Action. An Action Link form appears.
  2. Using the following table as a reference, configure the external link and the information sent to it.
Field
Description
Submit Method

GET or POST. For an explanation of these terms, see The Method Attribute. Consult with the external application's developers to determine which of these settings to use.

Main widget
URLURL of the application that ingests the visitor's data.
Advanced widget
TargetHow the visitor's browser displays the response from the external application.
  • Same Window/Tab—Browser displays the external application's response in the same browser window or tab from where the visitor submitted the form. This selection replaces your form with the response.
  • New Window/Tab—Browser displays the external application's response in a new browser window or tab.
Attributes

Name and value pairs Brightspot appends to the visitor's submitted contact information. You can use this field to collect additional information about the visitor, such as from which site the visitor submitted the form.