Creating Custom Lead Forms for HubSpot

Product(s)
Video Cloud
Role(s)
Studio User
Topic(s)
Audience/Marketing Automation

In this topic you will learn how to use a HubSpot form to capture lead data inside of a Brightcove Player.

The Audience module provides the ability to create custom lead forms which allow you to capture viewer information as videos are played inside of Brightcove players. The lead data is sent to, and processed by, HubSpot.

To create a custom lead form, the following steps must be performed.

  1. Create a form in HubSpot.
  2. Copy and edit the form embed code.
  3. Create a custom lead form in the Audience module.
  4. Assign the lead form to a player.
  5. Validate the form data in HubSpot.

Note: For information on standard lead forms which capture viewer information and save the data in Video Cloud, see Creating an Audience Lead Form.

Creating a form in HubSpot

HubSpot forms can be used to generate lead information from website visitors. These forms can also be displayed inside of Brightcove players. The steps below will create a simple form to capture viewer information. For complete details on HubSpot forms, see the HubSpot documentation.

  1. Sign in to your HubSpot account.
  2. Click Marketing > Lead Capture > Forms. If you are using the Classic menu, click Contacts > Forms.
  3. Click Create form. By default, the form will contain an Email field and a Submit button.
  4. Click the default name in the header and name the form. Press Enter to save the changes.
  5. The Add form field panel contains a list of fields that can be added to the form. Drag and drop the fields that you want on the form to the right side of the page.
  6. To make a field required, hover over it and click More > Make required. Required fields display a * next to the field label.
  7. Click the Options link at the top of the page.
  8. For What should happen after a visitor submits this form, click Display a thank you message. Keep the default message as it will never be displayed.
  9. Click the Preview link to preview the form.
  10. Click Publish to publish the changes to the form.

Copying and editing the form embed code

To use the form inside of the Audience module, you will need to copy and edit the form embed code. Also, you may want to do some basic styling to the form. In the steps below, we will copy the form embed code to an HTML editor and then make some styling changes to the form.

  1. Click Share in the upper right of the page and copy the Embed code to the clipboard.
  2. Paste the embed code into your HTML editor of choice.
  3. The embed code needs a small change so Audience knows to close the form when it is submitted. Locate the line that has formId: Add a comma at the end of the line.
  4. Add this line below the formId: line.
    onFormSubmit: bcLeadForm.submit
  5. By default, when the form is displayed inside of a Brightcove Player, the form will display on a transparent background over the player. Add the following CSS to the embed code to change the background color to grey.
    <style>
    body {
    background-color: rgba(204,204,204,0.9);
    margin: 0;
    padding: 20px;
    height: 100%;
    }
    </style>

Creating a custom lead form in the Audience module

Once the form embed code has been edited, create a custom lead form in the Audience module and associate the lead form with an Audience-enabled player.

  1. Open the Audience module.
  2. Click Lead Forms in the left navigation. If any lead forms have been created, they will be displayed.
  3. Click Create Lead Form.
  4. Give the lead form a descriptive Name.
  5. Select a Form Language.
  6. Select the Form Timing. The form timing determines when the lead form will be displayed.
    edit lead form (1)
  7. Set the form type to Custom Lead Form.
  8. Paste in the Form embed code.
  9. (Optional) Paste in the Confirmation HTML. The confirmation view will be display for 5 seconds and then the video will resume playing. If no confirmation HTML is included, the video will resume playing after the form submission.

    Note: You should style the confirmation HTML so you don't end up with black text on a black background.

    edit lead form (2)
  10. (Optional) Click Preview Form to open a preview of the form.
  11. Click Save to save the lead form.

Assigning a lead form to a player

Once the lead form has been created, it needs to be assigned to a player. Follow these steps to assign a lead form to a player.

  1. Click Audience Players in the left navigation.
  2. Locate your player and use the Lead Form dropdown list to select the lead form.

The setup is now complete and you are ready to capture lead information. When a video is published using an Audience-enabled player, the lead form will appear according to the form timing settings.

Validating the form data in HubSpot

Leads captured using the custom lead form will be added as contacts in your HubSpot account. An easy way to view data captured by the lead form is to create a Smart List in HubSpot.

  1. Sign in to your HubSpot account.
  2. Click Marketing > Lead Capture > Forms.
  3. When you mouseover a form, an Actions menu will appear. Click Actions > View submissions. A list of form submissions will appear.
    assign-lead-form-to-player
  4. When you mouseover a row, click View submission to view the form data.
    assign-lead-form-to-player