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.
A form that will allow users to check their data in HubSpot and update or confirm it.
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:
In form step 2, add three Text fields with these settings:
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.
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:
Add an If/then condition action with these settings:
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:
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:
Finally, close this branch with a Go to the next form step action too.
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:
Finally, simply close the flow with a Submit the form action and personalize the message that will be displayed in the form after submission.
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.
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.