Prefill form fields with data enrichment using Clearbit

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.

Prerequisites

• An active Clearbit account to enrich data from corporate emails.
• An active Arengu account to build the form and its server-side logic.

What are we going to build?

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.

1. Build a two-step 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:

• ID: change the IDs to name and email to simplify the data structure.
• Required: enable this checkbox on each field to set them up as required.

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:

• ID: change the IDs to company_name, company_domain, role and job_title to simplify the data structure.
• Required: enable this checkbox on each field to set them up as required.
• Default value: reference the state variable that we will store in the flow from the Clearbit output data, using the syntax {{state.outputVariableId}}. We will explain how to configure it exactly in the next section of the tutorial. In our case, we will include {{state.company_name}}, {{state.company_domain}}, {{state.role}} and {{state.job_title}}.

2. Create a flow between the steps

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:

• Send the user email to Clearbit and return the data to prefill form step 2.
• Store custom variables to recall them in the form.
• Redirect the user to the second step of the form.

To set up the Find person and company by email action:

• ID: change the action ID to findPersonAndCompany to make it easier to reference.
• API secret key: paste here the secret key from your Clearbit account.
• Email: reference the {{fields.email}} variable from the first step of the form.
• Continue flow execution after an error: enable the checkbox to continue executing the form and the flow even if Clearbit fails for any reason.

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:

• Data fields: write the company_name, company_domain, role and job_title IDs in the first input and reference the corresponding output variable from Clearbit in the second one. Get these variables by clicking on the plus icon after running the flow. 

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.

3. Preview, test and debug it

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.

4. Before and after submission automations

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.