Creating Lead Forms in HubSpot

Brightcove Campaign provides the ability to create lead forms which allow you to capture viewer information during video playback. Forms give you the ability to include whatever fields you need (visible or hidden) and also give you the ability to take advantage of features like progressive profiling (if available). The lead data is sent to, and processed by, HubSpot.

Creating a form in HubSpot

HubSpot provides the ability to create forms that can be used to capture viewer information. The form HTML that is generated will be used when creating a lead form inside Brightcove Campaign. The data that is captured can then be used in customizing future communications. The steps below will create a simple form to capture first name, last name and email address. 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. 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.

   

8. To make a field required, hover over it and click More > Make required. Required fields display a * next to the field label.

   

9. Click the Options link at the top of the page.
10. 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.

    

11. Click the Style & preview link at the top of the page. By default, a Desktop preview will appear.
12. 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 Brightcove Campaign, 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.
2. Click Embed code and then Copy to copy the embed code to the clipboard.

   

3. Paste the embed code into your HTML editor of choice.
4. The embed code needs a small change so Brightcove Campaign knows to close the form when it is submitted. Locate the line that has formId: Add a comma at the end of the line.
5. Add this line below the formId: line.

   onFormSubmit: bcLeadForm.submit

6. 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 Brightcove Campaign lead form

Once the form has been created and styled, the form HTML will be used inside Brightcove Campaign when creating a lead form. For information on creating a lead form, see Creating Lead Forms.

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 > Forms.
3. When you mouseover a form, an Actions menu will appear. Click Actions > View submissions. A list of form submissions will appear.

   

4. When you mouseover a row, click View submission to view the form data.