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.


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

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:




Internal name



Blue Bite’s unique object ID


Conversion information

Field Type

Single-line text

Show in Forms


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="//"></script>
portalId: "9999999",
formId: "604e4a4c-fb7a-4ddb-9a0a-ad5db63fa317"

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


Property Value

What should happen after a visitor submits a form?

Display a thank you message

Cookie Tracking


Pre-populate fields with known values


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




The title given here will appear on the mobile experience




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



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.