Custom registration form with HubSpot

Need to send the data from your registration forms to HubSpot? Create a fully customized registration form and start creating your users database.

Previous requirements

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

Overview

This use case consists of a two-step form that will ask the user for an email and password in the first step, and for the user’s name and job title in the second one.

In addition, in the first step, a flow to check if the email is registered will run and, if it is not, the form will request the name and job title, and send the data to HubSpot.

Create the form in Arengu

Go to the form editor in Arengu and build a sign-up form. You can create it from scratch or using the editable template. 

In this case, the form will have two steps. In the first one, we will include an Email field and a Password field, with these settings:

• ID: change them to ‘email’ and ‘password’ to make them easier to reference.
• Required: enable this checkbox to make both of them mandatory.

In the second step of the form, include two Text fields to ask for the user name and job title, and configure them as follows: 

• ID: change them to ‘name’ and ‘title’ to make them easier to reference.
• Required: enable this checkbox to make both of them mandatory.

Once the fields are configured, go to the Design tab and customize form styles.

Finally, go to the Flows tab in the light gray menu on the left and create three flows: one linked to the first step of the form, a before-submission flow and an after-submission flow. 

You can create them by simply clicking on the plus button and giving them a name. Finally, publish the changes.

Flow 1: Check if the email is already registered

The flow linked to the first step of the form will have this structure:

First, include an HTTP Request action to check if the email is already registered, with these settings:

• ID: change it to ‘checkEmail’ to make it easier to reference.
• URL: paste the lookup URL of your API.
• Method: select ‘POST’.
• Content type: select ‘application/json’
• Body: just the email inputs from the form by referencing the proper variable. You can get it from the variable autocomplete menu.

{
  "sub": "{{input.body.email}}"
}

If needed, add the Authentication header of your API in the Headers section.

Next, include an If/then condition action to manage the responses that your API returns after checking if the email is already registered. Configure it as follows:

• Condition: get the {{checkEmail.success}} variable from the outputs of the previous action by clicking on the plus button and select ‘is false as the condition.

In the False branch, add a Show error message action and personalize the message that will be displayed on the form if the email is already registered.

In the True branch, include a Go to the next form step action, which doesn’t need to be configured. Once you have configured all the actions, publish the changes.

Flow 2: Sign up and submit the form

The before-submission flow will have this structure:

First, include an HTTP Request action to register the user in your API, with these settings:

• ID: change it to ‘signupRequest’ to make it easier to reference.
• URL: paste the signup URL of your API.
• Method: select ‘POST’.
• Content type: select ‘application/json’
• Body: include both the email and passwords inputs from the form by referencing the proper variables. You can get them from the variable autocomplete menu.

{
  "sub": "{{input.body.email}}",  
  "password": "{{input.body.password}}"
}

If needed, add the Authentication header of your API in the Headers section.

Next, include an If/then condition action to manage the responses that your API returns when trying to register the user, and configure it as follows:

• Condition: get the {{signupRequest.success}} variable from the outputs of the previous action by clicking on the plus button and select ‘is true’ as the condition.

In the False branch, include a Show error message action and personalize the message that will be displayed on the form in the event that the email or password is not valid.

In the True branch, include a Submit the form action, and configure it as follows:

• Success message: write the message to display while the redirection loads.
• Redirect URL: enable this checkbox and paste the destination URL in the input. This is where the user will be automatically redirected after the registration. 
• After X seconds: set how long the success message will be displayed.

Once you have configured all the actions, publish the changes.

Flow 3: Send data to HubSpot

The after submission flow will have just an action:

Just include the Create or update contact action with the following settings:

• Connection: to connect this action to HubSpot, simply copy and paste your HubSpot account API key. Save this connection to use it in the future by clicking on the plus button. If you already have a connection created, just choose it from the selector.
• Email: reference the {{input.body.email}} variable from the first step of the form.
• Contact properties: list here the data that you want to store in HubSpot. Reference the name of the property in HubSpot in the first input (with exactly the same spelling) and the corresponding variable from the form in the second one. Get the variables by simply clicking on the plus button of each field.
  

Finally, publish the changes.

Preview, test and debug it

Go back to the form editor, click on the Preview button to open it in a new tab and test it. Check if everything has worked correctly in the Executions tab of each of the flows.

Want to try it by yourself? Sign up free or book a demo with our team.