hero
Home About

Categories

Archive

May 2024

April 2024

March 2024

February 2024

January 2024

December 2023

November 2023

October 2023

September 2023

August 2023

July 2023

June 2023

May 2023

April 2023

March 2023

February 2023

January 2023

December 2022

back to home

Dismantle Hubspot API - Create an interactive form to submit contact data directly to Hubspot by using a REST API

12 January 2024 • 4 mins

Over the past few years, HubSpot has become one of the top tools for marketing automation and sales. A typical use case would be to put all kinds of contacts into HubSpot, which are gathered by the company through various ways.

This article shows how to build a self-service form to submit contact data to HubSpot.

Let’s assume that an ice cream company is using this self-service terminal next to an ice cream stand, in order to ask their customers for their favourite flavor. The customer can also enter a lucky draw to win prices.

Of course, the company wants to have this data in HubSpot as soon as possible, in order to check back with the customer and send them a newsletter and other sales material. The example in this article shows how to build a JSON string and submit it to a real world API.

The HubSpot API

The HubSpot API is not too complicated to use, and it is based on typical REST web services. The endpoint we use is https://api.hubapi.com/crm/v3/objects/contacts. To better understand the API, you can read the HubSpot API dev guide.

Because we want to create a contact in HubSpot, we need to submit a JSON string in the body of the HTTP call. Here is a very simple example of what the JSON must look like, in order to be understood by the HubSpot server. We provide the name, email address, and a HubSpot custom field called favourite_ice_cream, which contains the flavour that the customer chose in the form.

{
  "properties": {
    "email": "uli1990@gmail.com",
    "firstname": "Ulrike",
    "favourite_ice_cream": "Vanilla"
  }
}

For authentication, we need to submit an API token. To get a token, we go to the settings section of our HubSpot account and create a private app. We store the token for later usage, when Peakboard is initiating the call.

image

Build the application screen

Now let’s build the application in Peakboard.

We want to give the user the option of choosing their flavour from a combo box. To fill the combo box with the appropriate values, we create a variable list with all the possible flavors. It’s a simple list with only one column.

image

The screen is simple. We choose a nice background image, add the text, and put the interactive elements on the screen. To fill the combo box with values, we connect it to the variable list. We also give all three input controls a proper name, so we can address them from within our code.

image

Build the REST call

Let’s have a look now at the code behind the submit button. Here’s what happens:

  1. The JSON string is stored in a variable with three placeholders within the string. They all begin with a @ character, to make them easier to identify.
  2. The placeholders are replaced by the actual values that come from the three input controls on the screen.
  3. This is the actual HTTP call. It’s a POST call, according to the documentation. We need to add two headers to make it work.
    • The first header is Authorization. Here, we submit the value Bearer <mytoken>.
    • The second header is Content-Type. We have to set it to application/json, otherwise HubSpot won’t understand what to do with the string in the HTTP body.

If this were not just an example, we would check the return message for any errors. To keep it simple, we’ll instead just write the response to the log.

image

The result

Here’s the board in full swing.

image

Let’s check the log. We can see the JSON that is built dynamically. We can also see the response from the HubSpot API server.

image

And here’s the result in HubSpot.

image

Dismantle Hubspot API - Create an interactive form to submit contact data directly to Hubspot by using a REST API

Newsletter

Want to get notified when a new article is published? Sign up below!