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 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:
C. Use the following configuration:
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
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
Example Embed Code:
E. Navigate to Form > Options and use these settings. Any settings omitted from the table below are optional
What should happen after a visitor submits a form?
Display a thank you message
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
*This template will only work with one form and the fields described in this how-to
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 '
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 (
D. Change the Action of the Button to
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.