Prefill form fields using HubSpot API

Do you need to allow users to complete or update their profile data? In this tutorial you will learn how to easily build this use case with Arengu and HubSpot.

Previous requirements

• A HubSpot account, in which we will store user data.
• Custom login API, to manage users’ identity and log them in.
• An Arengu account, to create the form and the server-side logic.

What are we going to build?

A form that will allow users to check their data in HubSpot and update or confirm it. 

Build the form

Go to Arengu and start a form from scratch. In this case, we will create a form with two steps and the following fields in each of them.

In form step 1, include an Email field configured as follows:

• ID: change the ID to “email” to make it easier to reference it.
• Required: enable the checkbox.
  

In form step 2, add three Text fields with these settings:

• ID: change each of them to “name”, “job” and  “phone” to simplify them.
• Required: enable the checkbox of each field to set them up as required.
• Default value: reference the {{state.name}}, {{state.job}} and {{state.phone}} in the proper field. Although these variables will not be available until we build and connect the flows, we will leave the references ready.
  

Remember to authenticate the user before retrieving any information. You can use an OTP flow or pass a signed JWT as a hidden field from your backend.

Then go to the Flows tab on the light menu and create a flow connected to each of the steps of the form. Just click on the plus button and then publish the changes.

Flow 1: Check records in HubSpot

Connect a flow with this structure to the first step of the form:

First, include a HTTP Request action to check if there is already a record with that email in HubSpot and set it up as follows:

• ID: change it to “httpRequest” to simplify it.
• URL: simply paste the API key of your HubSpot account in this URL https://api.hubapi.com/contacts/v1/contact/email/{{input.body.email}}/profile?hapikey=YOUR_API_KEY&propertyMode=value_only

• Method: select GET.
• URL parameters: paste the ID of the email field (email) in the first input and reference the {{input.body.email}} variable from the first step of the form in the second one. You can easily get it clicking on the plus button.
  

Add an If/then condition action with these settings:

• Condition: reference the {{httpRequest.body.is-contact}} variable from the outputs of the previous action and select “is true” as condition.
  

In the True branch, add a Store state variable action to store the user's profile data to pre-fill with them the fields of the next step of the form.

To configure this action:

• Data fields: define an ID for each custom state variable in the first input. In this case, we will use email, name, job and phone. In the second input, reference the proper variables from the outputs of the HTTP Request action. In this case, the variables will be {{httpRequest.body.properties.email.value}}, {{httpRequest.body.properties.firstname.value}}, {{httpRequest.body.properties.jobtitle.value}} and {{httpRequest.body.properties.phone.value}}. Get them from the autocomplete menu on the plus icon after an execution of the flow.

Note that the IDs defined here must be the same that we have used in the Default value of the fields of the second step of the form: {{state.name}}, {{state.job}} and {{state.phone}}. 

Finally, close this branch with a Go to the next form step action, which does not need to be configured.

In the True branch, include a Create or update contact action to create a new contact in HubSpot. In this case, the fields in the second step of the form will be empty so that the user can complete them and update the new contact in HubSpot.

Configure this action as follows:

• API key: you will find it in your HubSpot account settings.
• Email: reference the {{input.body.email}} variable from the form.
• Contact properties: add the HubSpot email property in the first input and reference again the {{input.body.email}} variable from the form in the second one.
  

Finally, close this branch with a Go to the next form step action too.

Flow 2: Update the contact in HubSpot

Connect a flow with this structure to the first step of the form:

First, include a Create or update contact action to update contact data in HubSpot and configure it as follows:

• API key: the one that you used in the same action of the previous flow.
• Email: reference the {{input.body.email}} variable from the form.
• Contact properties: reference the keys from HubSpot in the first input (firstname, jobtitle and phone) and the corresponding variables from the form. In this case, {{input.body.name}}, {{input.body.job}} and {{input.body.phone}}.
  

Finally, simply close the flow with a Submit the form action and personalize the message that will be displayed in the form after submission.

Preview, test and debug it

Go back to the form editor and click on the Preview button to open it in a new tab and test it. You can check if everything has worked correctly in the Executions tab of each flow.

Here you can check the inputs, outputs and errors of each action in each execution to fix any possible bugs.

Do you want to try it by yourself? Sign up free or book a demo with our team. Still not sure about it? Take a look at the most common use cases.