Skip to main content

Form modules

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.

Once a form is created, you can slot it into assets and landing pages to display in conjunction with other content. This can be done at the asset level or at the site level. For details, see Layout structure.

This section explains how to create various types of forms.

For a wire frame example of what this content type can look like on your site, see Form module design.

5.0-form-example

Creating forms​

You can create a few different types of forms.

Contact forms​

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.

To create a contact form:

  1. In the header, click .
  2. From the Create list, select Contact Form.
  3. Using the following table as a reference, complete the fields as needed.
  4. Complete your site's workflow and publish the contact form.
FieldDescription
Internal NameEnter an internal name for this asset. Brightspot uses this name internally, such as in the search panel and recent activity widget. This name is not visible to visitors to your site.
TitleEnter a title for this asset. This title is visible to the visitors to your site.
DescriptionEnter a description that describes this asset. This description is visible to the visitors to your site.
ItemsClick , and select types of form fields. (Forms typically contain more than one field.) For details about configuring each form field, see Types of form fields.
ActionsClick , and select actions that occur when the visitor submits the form. For details about configuring submission actions, see Form submission actions.
Success MessageEnter the message that a visitor sees when successfully submitting the form.
Error MessageEnter the message that a visitor sees when an error occurs after submitting the form.

You can design a custom form using a variety of fields and messages.

Custom forms​

To create a custom form:

  1. In the header, click .
  2. From the Create list, select Custom Form.
  3. Using the following table as a reference, complete the fields as needed.
  4. Complete your site's workflow and publish the custom form.
FieldDescription
Internal NameEnter an internal name for this asset. Brightspot uses this name internally, such as in the search panel and recent activity widget. This name is not visible to visitors to your site.
TitleEnter a title for this asset. This title is visible to the visitors to your site.
DescriptionEnter a description that describes this asset. This description is visible to the visitors to your site.
ItemsClick , and select types of form fields. (Forms typically contain more than one field.) For details about configuring each form field, see Types of form fields.
ActionsClick , and select actions that occur when the visitor submits the form. For details about configuring submission actions, see Form submission actions.
Success MessageEnter the message that a visitor sees when successfully submitting the form.
Error MessageEnter the message that a visitor sees when an error occurs after submitting the form.

Third-party forms​

You can design a third-party form using a variety of fields and messages. For details on which third-party form providers are available, see Integrations.

To create a custom form:

  1. In the header, click .
  2. From the Create list, select Third Party Form.
  3. Using the following table as a reference, complete the fields as needed.
  4. Complete your site's workflow and publish the custom form.
FieldDescription
ProviderSelect a provider from the list:
- Hubspot—Under Hubspot Form, associate this third-party form with an imported Hubspot form.
- Mailchimp—Under Audience, associate this third-party form with an existing audience. For details, see Creating audiences.
- Marketo—Under Marketo Form, associate this third-party form with an imported Marketo form. For details, see Configuring Marketo.
- Pardot—Under Pardot Form, associate this third-party form with an imported Pardot form. Under Form Handler Code, enter your Pardot account's form handler code.
Internal NameEnter an internal name for this asset. Brightspot uses this name internally, such as in the search panel and recent activity widget. This name is not visible to visitors to your site.
TitleEnter a title for this asset. This title is visible to the visitors to your site.
DescriptionEnter a description that describes this asset. This description is visible to the visitors to your site.
ItemsClick , and select types of form fields. (Forms typically contain more than one field.) For details about configuring each form field, see Types of form fields.
ActionsClick , and select actions that occur when the visitor submits the form. For details about configuring submission actions, see Form submission actions.
Success MessageEnter the message that a visitor sees when successfully submitting the form.
Error MessageEnter the message that a visitor sees when an error occurs after submitting the form.

Incorporating third-party forms​

The following procedure describes how to incorporate a third-party form into your assets.

To incorporate a third-party form in an asset:

  1. Create or open the asset in which you want to incorporate the form.
  2. Expand Overrides > Layout Overrides and scroll to the Above, Aside, and Below lists for the module’s position. For an illustration of these positions, see Layout structure.
  3. From one of the Above, Aside, or Below drop-down lists, select Replace. For an explanation of the possible selections for module placement, see Layout structure.
  4. Click Add Module, and in the module picker, select Misc > Form Module.
  5. Back on the content edit form, from the Form list, select the required form.
  6. Complete your site's workflow and publish the asset.

Embedding forms​

You can embed forms directly into your assets using the rich-text editor.

Form placed in RTE

To embed a form:

  1. From the rich-text editor's toolbar, select > Form.
  2. Select an existing form.
  3. Click Save & Close.

Types of form fields​

The following sections describe the different types of fields available in forms. You select and fill out these fields from the Items field when creating or updating a contact form, custom form, or third-party form.

Captcha field​

Captcha fields validate whether the visitor filling out the form is human. Brightspot only displays captcha fields if you have configured captcha in Sites & Settings. For details, see Google reCAPTCHA.

To add a captcha field:

  1. Search for and open an existing form asset (contact form, custom form, or third-party form), or create a new one.
  2. Under Items, click and select Captcha Field.
  3. Under Label, give the choice field a label.
  4. Under Description, give the choice field a description.

If this captcha field is meant to be invisible captcha, navigate to the Styles tab, expand the Captcha Input Styles cluster, and toggle on Invisible Captcha.

Choice field​

Choice fields allow visitors to select from choices that you configure.

To add a choice field:

  1. Search for and open an existing form asset (contact form, custom form, or third-party form), or create a new one.

  2. Under Items, click and select Choice Field.

  3. Under Label, give the choice field a label.

  4. Under Description, give the choice field a description.

  5. Under Type, select how the choice will be displayed to the user. The following options are:

    • Dropdown—The user selects choices from a dropdown.

      • Allow Multiple—Toggle on to allow multiple selections from the dropdown.
      • Placeholder—Enter text that will appear inside the dropdown before being clicked.
      • Required—Toggle on if the selection(s) made in this dropdown are required.

    • Checkboxes—The user selects choices by clicking checkboxes.

    • Radio Buttons—The user selects choices by clicking radio buttons.

  6. Under Choices, click Add Choice, and then give the choice a name by entering a value in the Label field.

  7. (Optional) Under the Advanced tab, in the Parameter field, enter a value for the input parameter attribute of this field's input tag (for example, <input type="text" parameter="my-input-name" />). A developer can use this setting to ingest form data, or it can be used to populate emails with the information a visitor submitted.

Dynamic hidden field​

Dynamic Hidden fields allow you to use web properties to discover additional insights about the users who fill out the form.

To add a Dynamic Hidden field:

  1. Search for and open an existing form asset (contact form, custom form, or third-party form), or create a new one.

  2. Under Items, click and select Dynamic Hidden Field.

  3. Under Name, enter a name for the dynamic hidden field. This name is not displayed to the user who fills out the form.

  4. Under Dynamic Source, select the desired web property that you want to track:

    • Document.Referrer—Captures the page from which a visitor came before landing on your form page. For details, refer to web property documentation.
    • HTTP Cookie—Captures data stored in the visitor's browser cookie. Under Cookie Name, specify the cookie.
    • Query Parameter—Captures information that is passed into the page via the URL. Under Parameter Name, specify the parameter.

File upload field​

File Upload fields allow the visitor to upload files as part of their form submission.

To add a File Upload field:

  1. Search for and open an existing form asset (contact form, custom form, or third-party form), or create a new one.
  2. Under Items, click and select File Upload Field.
  3. Under Label, give the file upload field a label.
  4. Under Description, give the file upload field a description.
  5. Under Allowed File Types, click , and then select the file types the visitor should be allowed to upload (Image, Video, Audio).
  6. Toggle on Allow Multiple to allow multiple file uploads.
  7. Toggle on Required to make this field required.
  8. (Optional) Under the Advanced tab, in the Parameter field, enter a value for the input parameter attribute of this field's input tag (for example, <input type="text" parameter="my-input-name" />). A developer can use this setting to ingest form data, or it can be used to populate emails with the information a visitor submitted.

Group field​

Group fields allow you to group together other form fields.

To add a Group field:

  1. Search for and open an existing form asset (contact form, custom form, or third-party form), or create a new one.
  2. Under Items, click and select Group.
  3. Under Title, give the group a label.
  4. Under Description, give the group a description.
  5. Under Items, add a form field. Refer to the documentation on this page for additional details about form field types.

Hidden field​

Hidden fields allow you to capture additional data points when the visitor submits the form.

To add a Hidden field:

  1. Search for and open an existing form asset (contact form, custom form, or third-party form), or create a new one.
  2. Under Items, click and select Hidden Field.
  3. Under Name, enter the name of the value that you want to be submitted when the form is submitted.
  4. Under Value, enter the value that you want to be submitted when the form is submitted.
  5. (Optional) Under the Advanced tab, in the Parameter field, enter a value for the input parameter attribute of this field's input tag (for example, <input type="text" parameter="my-input-name" />). A developer can use this setting to ingest form data, or it can be used to populate emails with the information a visitor submitted.

Text field​

Text fields are standard fields where a visitor enters data to submit as part of the form.

To add a Text field:

  1. Search for and open an existing form asset (contact form, custom form, or third-party form), or create a new one.

  2. Under Items, click and select Text Field.

  3. Under Label, give the text field a label.

  4. Under Description, give the text field a description.

  5. Under Type, select one of the following:

    • Short Text—Adds a simple text field to the form into which a visitor may type.
    • Email—Adds a text field to the form into which a visitor may type an email address.
    • Long Text—Adds a large text field into the form into which a visitor may type.
    • Phone Number—Adds a text field to the form into which a visitor may type a phone number.

  6. Under Placeholder, enter text that will appear inside the text field before being selected.

  7. Toggle on Required to make this a required field.

  8. (Optional) Under the Advanced tab, in the Parameter field, enter a value for the input parameter attribute of this field's input tag (for example, <input type="text" parameter="my-input-name" />). A developer can use this setting to ingest form data, or it can be used to populate emails with the information a visitor submitted.

Form submission actions​

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

Data Collection Action

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

Email Action

Brightspot sends an email after ingesting the data. An Email Action requires values in the To Email, From Email, Subject, and Body fields. You can configure the email to include information that the visitor submitted in the contact form using a command of the form ${parameter-name}. You can use this command in the To Email, Subject, and Body fields. The following example shows how to send an email to a customer service center that includes the visitor's email address.

warning

Brightspot sends the email using the mail provider configured for your environment. A developer or system administrator configures the mail provider; for details, see Miscellaneous configuration. If no mail provider is configured, Brightspot does not send the email. If sending fails, Brightspot writes an error to the server log only. Neither the visitor nor editors in the CMS see an error.

Step 1: Set parameter value

Create a form with an email text field. Under > Advanced, in the Parameter field, note or change the value as required.

Step 2: Refer to parameter

Create an email action that uses the parameters.

5.0-create-an-email-action-that-uses-parameters

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.

External Submit Action

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 Page Redirect 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.
FieldDescription
Submit MethodGET 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.
URLURL of the application that ingests the visitor's data.
Target (Advanced tab)How 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.
AJAX External Submit Action

The AJAX External Submit Action has no settings and does not send data to an external application. When a form does not have an external submit action that redirects the visitor, the form submits in the background to the current page URL. If the response succeeds, the form displays the success message and hides the form. Otherwise, the form displays an error message and remains visible. Adding the AJAX External Submit Action does not change this behavior. To send submitted data to an external application, use the Page Redirect External Submit Action instead.

Third-Party Submit Action (Hubspot, Marketo, Pardot)

Third-party submit actions, such as Hubspot External Submit Action, Marketo External Submit Action, and Pardot External Submit Action, are added automatically when you select a provider for a third-party form. They forward a visitor's contact information to the provider and have no settings to configure.

Viewing form submissions​

You can review the information that visitors submit through forms. For custom forms and contact forms you create in Brightspot, the submitted information is available almost immediately. For third-party forms you embed inside an asset, the submitted information may be delayed depending on how your version of Brightspot is configured.

To view a form's submissions:

  1. Search for and open the form.

  2. Under the Submissions tab, review the submissions.

    5.0-viewing-form-submissions

  3. Click Export to download the submissions as a .csv file.

See also:

Was this page helpful?

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.