Create an interactive form for quick contact data transfer to HubSpot

Interactive self-service form for ice cream lovers

Let's assume an ice cream company uses a self-service terminal next to an ice cream stand to ask customers what their favourite flavour is. Customers can also enter a prize draw. Naturally the company wants all that data in HubSpot as quickly as possible, so it can get in touch with the customer and send them a newsletter and further information. The example in this article shows how to build a JSON string and send it to a real-world API.

The HubSpot API

Using the HubSpot API is not particularly complicated and is based on typical REST web services. The endpoint we use is https://api.hubapi.com/crm/v3/objects/contacts.

Since we want to create a contact in HubSpot, we have to submit a JSON string in the body of the HTTP call. Below is a very simple example of what that JSON string has to look like for the HubSpot server to understand it. We supply the name, the email address and a custom HubSpot field called 'favorite_ice_cream' holding the flavour the customer selected in the form.

{
  "properties": {
    "firstname": "@name",
    "email": "@email",
    "favorite_ice_cream": "@flavor"
  }
}

For authentication you need to submit an API token. To get one, go to the settings area of your HubSpot account and create a private app, then save the token for later use when Peakboard makes the call.

Now build the application screen in Peakboard

You want to give the user the option of choosing their flavour from a drop-down list. To fill that list with the appropriate values, create a variable list containing all the possible flavours. It is a simple list with just one column.

The screen itself is kept simple. We choose an attractive background image, add the text and place the interactive elements on the screen. To fill the drop-down list with values, we connect it to the variable list. We also give all three input controls a suitable name so we can address them from our code.

Building the REST call

Let's look at the code behind the 'Submit' button. Here is what happens:

1. The JSON string is stored in a variable containing three placeholders. They all start with an @ sign to make them easier to identify.
2. The placeholders are replaced with the actual values coming from the three input controls on the screen.
3. This is the actual HTTP call. It is a POST call, as set out in the HubSpot documentation. You need to add two headers to get it working.
   • The first header is 'Authorization'. Here you submit the value 'Bearer <myToken>'. Replace <myToken> with the token we created in the HubSpot interface above.
   • The second header is 'Content-Type'. You have to set it to 'application/json', otherwise HubSpot would not understand what to do with the string in the HTTP body.

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

The result

Let's check the log. We can see the dynamically created JSON, and we can also see the response from the HubSpot API server.

And here is the result in HubSpot

‍