In this tutorial you will learn how to use Clearbit to enrich and prefill data in a form from the user's email. This is a common use case in registration and sales processes, for example, for lead generation and demo request forms.
The form will have two steps: the first one will require the user’s name and email and in the second step we will display and autocomplete custom data.
A two-step form: the first step will ask for the name and a corporate email and the second one will display the data that we want the user to verify or correct.
Between these two steps, a flow connected to Clearbit will run. It will send the email to Clearbit and get the proper data to fill in the fields of the second step of the form.
Go to the form editor and create a form with two steps. Add a Text and an Email field in the first step. To set them up:
In the second step of the form, include a Text field for each data you will enrich with Clearbit. In this case, we will ask for the company name and domain, and the user's role and job title. To set them up:
Click on the Flows tab on the light menu, create a flow linked to the first step of the form by clicking on the + icon and then publish the changes.
Go to the flow editor and start building a flow to:
To set up the Find person and company by email action:
Then add a Store state variable action to save the Clearbit output variables that we want to autocomplete on the form. This action allows you to store custom variables to use in the form and any other flow connected with it. So here we will define the variables that we have referenced in the Default value input of each field on the second step of the form.
In this case, the settings for this action are:
Note you can recall these variables using {{state.field_id}} syntax. Just remember that they must match the references on the Default value input of each field on the second step of the form.
Finally, close the flow with a Go the next form step action, which does not need to be configured.
To test the form and the flow, go back to the form editor and click on the Preview button. Then you can see if everything has worked correctly in the Executions tab of each flow.
Here you can check the inputs, outputs and errors of each of the actions in each execution to fix any possible bugs.
Once it is working properly, you can configure integrations with any service with an API: CRM, notifications, etc. Simply use Arengu's native actions for the most common services (Pipedrive, HubSpot, Telegram…) and the HTTP Request action to connect even with your own providers.
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.