How-to use the Studio's Form Component with HubSpot

This page describes how to capture user data and send it to a Hubspot CRM account with the Studio’s form component.

Instructions

Step 1: Create a Hubspot Account

If you don’t already have one, create a Hubspot CRM account. Hubspot offers a free account up to 1,000,000 contacts and storage.

A. Go to https://www.hubspot.com

B. Select Get HubSpot Free > Get free CRM

C. A valid email address, website URL and company name are required to create an account

Step 2: Create a Custom Property in Hubspot

Create a property to capture Blue Bite’s mTAG ID so that you can attribute a user signup to the specific Blue Bite object.

A. Login to your hubspot account, navigate to Settings > Properties > Contact Properties > Create Property

B. Create a new contact-property: mTAG ID

C. Use the following configuration:

PropertyValue

Label

mTAG ID

Internal name

mtag_id

Description

Blue Bite’s unique object ID

Group

Conversion information

Field Type

Single-line text

Show in Forms

Check

Step 3: Create a Form in Hubspot

Create a simple form that collects first name, last name, email address, and mTAG ID.

A. Navigate to the forms page and select Create form

B. Start with a blank form to add your own fields

C. The blank form populates with the Email field. Select First name, Last name, and the newly created mTAG ID, by dragging the fields into the form

D. Publish the Form, click Embed Code, then extract and save the portal ID and form ID.

Example Embed Code:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
portalId: "9999999",
formId: "604e4a4c-fb7a-4ddb-9a0a-ad5db63fa317"
});
</script>

E. Navigate to Form > Options and use these settings. Any settings omitted from the table below are optional

Setting

Property Value

What should happen after a visitor submits a form?

Display a thank you message

Cookie Tracking

Off

Pre-populate fields with known values

Off

Step 4: Create a Form in Blue Bite’s Studio

Create a simple form in the Studio that collects first name, last name, email address, and mTAG ID.

A. Create a new Studio file

B. Add a Form wrapper to experience and use these configurations

Setting

Value

Title

The title given here will appear on the mobile experience

Type

Fetch/AJAX

Action

https://api.hsforms.com/submissions/v3/integration/submit/:portalId/:formGuid

Fill in the :portalId and :formId from step 3D above

Method

POST

Body Template*


*This template will only work with one form and the fields described in this how-to

{
  "fields": [
    {
      "name": "firstname",
      "value": "{{form:entry:firstname || ""}}"
    },
    {
      "name": "lastname",
      "value": "{{form:entry:lastname || ""}}"
    },
    {
      "name": "email",
      "value": "{{form:entry:email || ""}}"
    },
    {
      "name": "mtag_id",
      "value": "{{tag:mtag_id || ""}}"
    }
  ],
  "context": {
    "pageUri": "{{page:url || ""}}",
    "pageName": "STUDIO FILE NAME"
  }
}

C. Add three Input Boxes and one Button component to the Form

Step 5: Configure the Input Boxes in Blue Bite’s Studio

The 'name' field in the input boxes needs to match the form macros used as values in the JSON body in Step 4B. For simplicity, we recommend using the 'Internal values' provided by Hubspot as your 'name' fields in Blue Bite's Studio.

A. Navigate back to the Hubspot form and select the First name field. On the left-hand side of the screen, the Internal name for the field is highlighted in the sentence Configuration for 'firstname' field.

B. Enter the configuration, firstname, in the Name field for that Input in the Studio. Note this field is not visible to the user. The ‘Label’ field will be visible to the user.

C. Repeat the steps above to identify the Internal names for the Last Name (lastname) and Email (email) Inputs

D. Change the Action of the Button to Form Submit

Step 6: Test the form

Preview the experience and fill out the form completely to ensure Hubspot is capturing user data submitted from the form created in Blue Bite’s Studio.

A. Preview the form in the Studio

B. Fill in all fields and click the Submit button

C. Return to your HubSpot account. Navigate to the Forms page. Select the relevant Form > Actions > View submissions. Your most recent form entry should be listed there.