Need to send the data from your registration forms to HubSpot? Create a fully customized registration form and start creating your users database.
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.
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:
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:
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.
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:
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:
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.
The before-submission flow will have this structure:
First, include an HTTP Request action to register the user in your API, with these settings:
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:
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:
Once you have configured all the actions, publish the changes.
The after submission flow will have just an action:
Just include the Create or update contact action with the following settings:
Finally, publish the changes.
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.
Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.