Create contacts in HubSpot with Webflow Logic

Updated

Use Logic’s Make HTTP request block to create new contacts in HubSpot from Webflow form submissions.

Important

We’re sunsetting Webflow Logic. Starting January 31, 2025, you won’t be able to activate and use Logic. On June 27, 2025, Logic functionality will be disabled on all Webflow sites. All existing Logic flows will be disabled, and any forms connected to Logic flows will be automatically migrated to a standard Webflow form.

HubSpot is a popular Customer Relationship Management (CRM) platform where you can track customer data and streamline sales and marketing efforts. With Logic, you can send contacts from a form submission directly to Hubspot and link your Webflow site to your CRM. 

Before you get started

If you haven’t already, set up a Hubspot Account. You’ll also need to add a form to your Webflow site with fields that correspond to the fields you’ve set to required in Hubspot.

How to create your HubSpot API key

Note

HubSpot offers two authentication methods (i.e., OAuth and private app access tokens). This article covers the private app access tokens method.

To create your API key: 

  1. Go to your HubSpot account and create a private app, if you haven’t already
  2. Click the Scopes tab and choose what you’d like to do with this API key under the CRM dropdown (at minimum, you’ll need to select crm.objects.contacts.write to send contacts to Hubspot)
  3. Click Show token and copy your API key

How to set up your Logic flow’s authentication

  1. Open your site in the Webflow Designer in a new tab
  2. Select your form on the Designer canvas and open Form settings
  3. Click the Source dropdown and choose Logic
  4. Click Add new flow
  5. Give your new flow a name (e.g., “Create contacts in HubSpot”) in the Name field and add a description to the Description field if you’d like
  6. Drag a Make HTTP request block to the flow editor canvas and give it a name (e.g., “Create new contact in HubSpot”) 
  7. Choose API token from the Authentication dropdown 
  8. Choose Header from the Add to dropdown
  9. Enter “Authorization” in the Header field 
  10. Click Select a credential > Add new credential 
  11. Give your API token a name (e.g., “HubSpot API token”) in the Name field and add a description to the Description field if you’d like 
  12. Enter “Bearer {API key}” in the Token field, replacing the {API key} with the API key you copied from HubSpot
  13. Click Create to save your new credential and keep this tab open! 

Pro tip

You can also connect your form to a new Logic flow from Logic panel > Flows tab.

How to find your HubSpot API documentation

  1. Go to the HubSpot API reference documentation
  2. Scroll down to CRM in the left panel
  3. Go to Objects > Contacts > Create contacts and keep this tab open for reference!

How to set up your HTTP request

Now that you’ve created your Logic flow and HubSpot authentication credentials, you’ll need to return to Webflow and set up an HTTP request in your flow. The HTTP request you configure in this step will create a new contact in Hubspot each time a site visitor submits your form. 

Note

If you closed the tab where your Webflow site was open, go to Logic panel > Flows tab and choose the flow you set up in the previous steps. Select the Make HTTP request block on the flow editor canvas to open block settings and complete the following steps.

  1. Click the Request method dropdown and choose POST. 
  2. Paste “https://api.hubapi.com/crm/v3/objects/contacts” in the URL field
  3. Click the “plus” icon next to Headers to create a new header
  4. Enter “content-type” in the Name field and “application/json” in the Value field 
  5. In the Body field, paste the code block for creating contacts from HubSpot’s API documentation — it will resemble this (but contain properties from your HubSpot contacts):
  {
    "company": "Biglytics",
    "email": "bcooper@biglytics.net",
    "firstname": "Bryan",
    "lastname": "Cooper",
    "phone": "(877) 929-0687",
    "website": "biglytics.net"
  } 

Then, you’ll need to add dynamic data to your HTTP request to capture information from your form submissions:

  1. Delete the values from your HubSpot contacts and place your cursor between the empty quotation marks in the Body field
  2. Click the purple “dot” icon and select the corresponding dynamic form field (e.g., name, email, etc.)

How to test and publish your flow

  1. Click Run test to complete setup 
  2. Enter sample values in the corresponding input field
  3. Click Run test 
  4. Click Cancel or Apply data to exit the test modal
  5. Click Publish 
  6. Click Stage flow for publish
  7. Publish your site

Note

If you receive an error message while testing your flow, follow our troubleshooting steps, then retry the above steps.

How to troubleshoot issues with your flow

If you’re receiving an error when testing your flow, try the following:

  • Make sure you entered “Bearer” (and a space) before your API key when setting up your credentials (e.g., Bearer 123456789)
  • Check for errors in your request body using a free tool like JSONLint 

Related articles