How to Integrate Leads into HubSpot

Send Architect form submissions into HubSpot

Prerequisites

Before you start, make sure you have:

• Access to your HubSpot account
• Access to the Architect platform (app.tryarchitect.com)
• A HubSpot form created or ready to create
• Your HubSpot tracking code available
• Complete Steps 1-3 and then share the details with the Architect team in Step 4

How it works

When a visitor lands on your Architect page, the HubSpot tracking script drops a cookie (hutk) on the visitor. When that visitor submits a form, Architect sends the form data along with the tracking cookie to HubSpot via the HubSpot Forms API. HubSpot then associates the submission with the visitor’s browsing activity, giving you full attribution on the contact.

The Architect team will handle the middleware setup to send form submissions into HubSpot on your behalf.

Step 1: Add HubSpot Tracking to Architect Pages

Adding the HubSpot tracking script to your Architect pages allows HubSpot to drop its tracking cookie on visitors. This means when a visitor later submits a form, HubSpot can associate that submission with their full browsing activity and attribute the contact correctly.

1. Copy the HubSpot embed code

   In HubSpot, go to Settings, then Tracking & Analytics, then Tracking Code. Copy the Embed Code. It will look something like this:

   <!-- Start of HubSpot Embed Code -->
   <script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/147460178.js"></script>
   <!-- End of HubSpot Embed Code -->
   
2. Add the script in Architect

   Go to your Architect page, then navigate to Settings and click Scripts. Add a new head script and paste the HubSpot embed code. Click Save.

   This ensures the HubSpot tracking cookie is loaded on your Architect pages so visitor activity is captured.

Step 2: Choose or Create a Form in HubSpot

You need a form in HubSpot to push submissions to via the Forms API. This is where you will see form submissions come into.

1. Select or create a form in HubSpot

   In HubSpot, go to Marketing and then Forms. Either select an existing form or create a new one.

2. Choose your fields

   For each field on your form, note the Internal Name — this is how you match the fields with Architect’s form. Click on a field to see its internal name under the property settings.

   Common default internal names:

   Field	Internal Name
   Email	email
   First Name	firstname
   Last Name	lastname

3. Get the form embed code

   Once you have your form, click Share and then Embed Code. Copy the embed code — this contains your Portal ID and Form ID, which you will need to connect the form.

   The embed code will look something like this:

   <script src="https://js-eu1.hsforms.net/forms/embed/{{data-portal-id}}.js" defer></script>
   <div class="hs-form-frame" data-region="eu1" data-form-id="{{data-form-id}}" data-portal-id="{{data-portal-id}}"></div>
   

   The data-portal-id is your Portal ID and the data-form-id is your Form ID.

Step 3: Create a Form in Architect

1. Create or select a form in Architect

   In Architect, go to Forms and then Manage Forms. Create a new form or select an existing one.

Step 4: Set Up with Architect

Share the following with the Architect team:

• Your form embed code from the HubSpot form (from Step 2)
• The field internal names for that form — these can be found under Connected Property on each form field in HubSpot

Step 5: Test

Once the Architect team has set this up for you, submit a test form on your Architect page to make sure everything is working. Then check your HubSpot form to see if the test submission came through.