Create contacts in HubSpot with Webflow Logic

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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. 

In this lesson, we’ll cover: 

  1. How to create your HubSpot API key
  2. How to set up your Logic flow’s authentication
  3. How to find your HubSpot API documentation
  4. How to set up your HTTP request
  5. How to test and publish your flow
  6. How to troubleshoot issues with your flow

How to create your HubSpot API key

Note: HubSpot offers 2 authentication methods (i.e., OAuth and private app access tokens). This lesson will cover the private app access tokens method.
  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 the Logic panel > Flows tab. Learn more about form submission triggers in Logic
Options to Add a new flow or Browse flows appear in Form settings when Logic is selected as the source.
You can connect a form to Logic through Form settings, Form block settings, or from the Logic panel > Flows tab.
“Header” is chosen in the Add to dropdown and “Authorization” is entered in the Header input field.
The “New credential” modal window displays fields for the name, description, type, and value of an API credential.
For APIs that use bearer authentication (like HubSpot), you’ll need to enter “Bearer” before your API key in the Token field.

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.)
The Body field contains dynamic form fields to capture last name, first name, and email address from form submissions. 
The complete HTTP request block settings for sending data to Hubspot include authentication, request method, URL, headers, and request body with variables to capture data from the Webflow form. 
A complete POST request to Hubspot from Logic’s Make HTTP request block. 

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. Learn more about testing HTTP requests.

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 

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top