Guides & tutorials

Registration form with data enrichment using Airtable & Clearbit

Import this tutorial scenario in your workspace
Table of contents

Need to send the data from your registration forms to Airtable? Store your users' data and create the database you need to get to know them better.

Create a fully customized registration form that connects to Clearbit to find information about the user's professional profile and to save it in Airtable.

Previous requirements

  • An Airtable 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.

What are we going to build?

This use case consists of a one-step form that will ask the user email and password, and a flow linked to it that gets the information from Clearbit and stores it in Airtable.

Set up the table

Go to Airtable and create a table with a column for each data you want to store about the new users. For example, we will store their name, email, company and job title, but you can adapt it to your needs.

Choose also the field type that you are going to store in each column. We will use the ‘Email’ option for the user email and the ‘Single line text’ for the name, company, job title and country.

To change the field type, simply click on the triangular icon of the field, then on ‘Customize field type’ and, in this case, choose the ‘Email’ option.

Note that the column name and its reference in Arengu must be written with the exact spelling.

Create the form in Arengu

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

This form will have an Email field and a Password field, with the following settings:

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

Go to the Flows tab, in the light gray menu on the left, and create a before-submission flow and an after-submission flow, as you can see in the picture. 

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

Flow 1: Registration

The before submission flow will have this structure:

First, an HTTP Request action to register the user in your API, with the following 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. If you have used the template, this will be already configured. If you have started from scratch, you can get it from the variable autocomplete menu.
  "sub": "{{}}",
  "password": "{{input.body.password}}"

If necessary, include the authentication header of your API in the Headers section.

Then add 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 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 that the user will see 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 before the redirection.

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

Flow 2: Enrich and store data

The after submission flow will have this structure:

First, include a Find a person and company by email action and configure it as follows:

  • API secret key: paste the secret key of your Clearbit account.
  • Email: reference the {{}} variable from the form. You can get it from the variable autocomplete menu by clicking on the plus icon.

Then add a Create a record action with the following settings:

  • API key & Base ID: you will find them in your Airtable account settings
  • Table name: you will find it in your Airtable project documentation. Simply write the name with exactly the same spelling, but you can learn more here if necessary.
  • Fields: list the data that you want to store in Airtable. Reference the name of the column in Airtable in the first input (with exactly the same expelling) and the corresponding variable in the second one. Get the variables from the outputs of the previous Clearbit action by clicking on the plus button after an execution of the flow.

Finally, publish the changes.

Preview, test and debug it

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 of the flows.

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.

You might like to read

See more tutorials

Getting started with Arengu

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.