support Contact Support | system status System Status
Page Contents

    Creating Custom Lead Forms for HubSpot

    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

    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 > 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. Make sure the Regular Form type is selected. Click Next.
    5. Make sure Blank template is selected. Click Start.
    6. Click the default name in the header and name the form. Press Enter to save the changes.
    7. Click the default name in the header and name the form. Press Enter to save the changes.
    8. The left side of the page contains a list of fields that can be added to the form. Drag and drop the First name and Last name fields that you want on the form to the right side of the page.
    9. To make a field required, hover over it and click More > Make required. Required fields display a * next to the field label.
    10. Click the Options link at the top of the page.
    11. 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.
    12. Click the Style & preview link at the top of the page. By default, a Desktop preview will appear.
    13. Click Publish at the top of the page 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.
      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

    Page last updated on 01 May 2020