Create an interactive form for quick contact data transfer to HubSpot

Interactive self-service form for ice cream lovers:

Let's assume that an ice cream company uses a self-service terminal next to an ice cream stand to ask customers what their favorite flavor is. You can also take part in a draw to win prizes. Of course, in this case, the company would like to have all the data in HubSpot as quickly as possible in order to get in touch with the customer and send them a newsletter and further information. The example in this article shows how to create a JSON string and send it to an API in the real world.

The HubSpot API

Using the HubSpot API isn't too complicated and is based on typical REST web services. The endpoint we're using is https://api.hubapi.com/crm/v3/objects/contacts.

Since we want to create a contact in HubSpot, we need to submit a JSON string in the body of the HTTP call. Here's a very simple example of what the JSON string must look like for the HubSpot server to understand it. We provide the name, email address, and a custom HubSpot field called 'favorite_ice_cream' that contains the flavor the customer chose from the form.

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

You'll need to submit an API token for authentication. To get a token, go to the settings area of your HubSpot account and create a private app and save the token for later use when Peakboard initiates the call.

Now create the application screen in Peakboard

You want to give the user the option to choose their taste from a drop-down list. To fill the drop-down list with the appropriate values, create a variable list with all possible flavors. It's a simple list with just one column.

The screen is simply designed. 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'll also give all three input controls an appropriate name so we can access them from our code.

Create the REST call

Let's take a look at the code behind the submit button. Here's what happens:

1. The JSON string is stored in a variable that contains three placeholders within the string. They all start with an @ sign to make them easier to identify.
2. The placeholders are replaced with the actual values that come from the three input controls on the screen.
3. This is the actual HTTP call. It is a POST call according to the HubSpot documentation. You'll need to add two headers to get it up and running.
   • The first header is 'Authorization'. <mytoken>Here you submit the value 'Bearer'. <myToken>Replace with the token we created in our HubSpot interface above.
   • The second header is 'Content-Type. ' You must set it to 'application/json, 'otherwise HubSpot wouldn't understand what to do with the string in the HTTP body.

If this wasn't just an example, you'd check the return message for errors. To keep things simple, simply write the answer in the log instead.

The result

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

And here's the result in HubSpot:

‍