Autocomplete form with Airtable data

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

Previous requirements

• An Airtable account, in which we will store user data.
• Custom login API, to manage users’ identity and log them in.
• An Arengu account, to create the form and the server-side logic.
• A Mailjet account, to send a temporary code by email and check the user's identity.

What are we going to build?

A multi-step form that allows users to check their profile data in order to update or confirm it. It will first verify users' identity by sending them a temporary code and then it will get, display and update the profile data stored in Airtable.

Set up the table

Go to Airtable and create a table with a column for each of the data fields that you are going to ask the user. In our case, it would look like the example below, but you will have to adapt it to the form you have created if it is not exactly the same structure.

Choose also the type of field that you are going to store in each column. We will use the Single line text to ask for the user name, company, job title and phone number. Note that the column name and its reference in Arengu must be written with the exact spelling.

If you have choice fields in your form, select this type of field also in Airtable. 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 Multiple select option. Remember to add also the internal value for each answer in Arengu with the exact spelling.

Build the multi-step form

Go to Arengu and start a form from scratch. In this case, we are going to create a form with three steps and the following fields in each of them.

In form step 1, include an Email field with these settings:

• ID: change it to “email” to make it easier to reference
• Required: enable the checkbox to set it up as required.
  

In form step 2, include an Number field with these settings:

• ID: change it to “otp” to simplify it.
• Required: enable the checkbox to set it up as required.
  

In form step 3, we are going to include 4 Text fields with these settings:

• ID: change each of them to “name”,  “company”,  “job” and  “phone”.
• Required: enable the checkbox of each field to set them up as required.
• Default value: reference the {{state.name}}, {{state.company}}, {{state.job}} and {{state.phone}} in the proper field. Although these variables will not be available until we build and connect the flows, we will leave the references ready.
  

Then go to the Flows tab on the light menu and create a flow connected to each step of the form. To create them, just click on the plus button and then publish the changes.

Flow 1: Generate and send OTP

Connect a flow with this structure to the first step of the form:

First, include a Generate one-time password action with the following settings:

• ID: change it to “generateOTP” to simplify it.
• Reference value: reference the {{input.body.email}} variable from the form.
• Code length: we will leave the default value of 4 characters for the OTP.
  

To send it by email, we will add a Send Mailjet email action to send the OTP by email to the user. For testing purposes, you can use Arengu’s Send email native action. 

To configure this action:

• API key & Secret key: paste here the keys from your Mailjet account.
• Sender email: write the email account from which the OTP will be sent.
• Recipient email: reference the {{input.body.email}} variable from the form.
• Subject: write the subject of the email, you can reference here the {{generateOTP.code}} variable from the outputs of the previous action to include the temporary code in the subject.
• Message: build the body of the email with HTML or use one of your templates. Just remember to include the {{generateOTP.code}} variable in it.

Finally, close this branch with a Go to the next form step action, which does not need to be configured, and publish the changes.

Flow 2: Verify OTP and check records in Airtable

Connect a flow with this structure to the second step of the form:

First, include a Verify one-time password action to check the code input by the user on the form. To set up this action:

• ID: change it to “verifyOTP” to simplify it.
• Reference value: add the {{input.bod.email}} variable from form step 1.
• Code value: reference the {{input.body.otp}} variable from form step 2.
  

Then add an If/then condition action configured as follows:

• Condition: reference the {{verifyOTP.valid}} variable from the outputs of the previous action and select “is true” as condition.
  
  

In the False branch, add a Show error message action to personalize the message that will be displayed in the form if the code is not correct.

In the True branch, include a List records action to get data from Airtable:

Configure this action as follows:

• API key & Base ID: you will find it in your Airtable account settings.
• Table name: you will find it in your Airtable project documentation. You can learn more in this tutorial.
• Formula: in this case, we will use {email}="{{input.body.email}}". Just reference the name of the column in Airtable and the email variable from the form in Arengu. You can learn more about the Airtable formulas here.
  

Then add an If/then condition action to check if there is any record in Airtable that matches the user's email and create two branches. To set it up:

• Condition: reference the {{listRecords.body.records[0].fields.email}} variable from the outputs of the previous action after a flow execution, select “is equal to” and then reference the {{input.body.email}} variable from the form too.
  

In the False branch, include a Create a record action to create a record with the user's email if it doesn't already exist.

To set this action up:

• ID: change it to “createARecord” to simplify it.
• API key + Base ID + Table name: use the same data as in the previous action.
• Fields: write "email" as ID in the first input and reference the {{input.body.email}} in the second one.
  

Next, add a Store state variable action to store the ID of the new record and use it in the next flow.

Configure this action as follows:

• Data fields: set recordID as ID of the new variable in the first input and reference the {{createARecord.body.id}} variable from the outputs of the previous action.
  

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 another Store state variable action to store the ID of the existing record and the profile data, and use them to pre-fill the fields on the next step of the form.

To configure this action:

• Data fields: set the ID of each custom variable in the first input. In this case, we will store the recordID, name, email, company, job and phone. In the second input, reference the corresponding output variables from the List records action: {{listRecords.body.records[0].id}}, {{listRecords.body.records[0].fields.name}}, {{listRecords.body.records[0].fields.email}} and so on. You can get these variables clicking on the plus button after an execution of the flow.
  

Note that the IDs of these variables must be the same as those we have referenced in the Default value of the form fields: {{state.name}}, {{state.email}}, etc. Those references and the Airtable data with which they will be pre-filled are defined in this action.

Again, close this branch with a Go to the next form step action and publish the changes.

Flow 3: Update data in Airtable

Connect a flow with this structure to the third step of the form:

First, include an Update a record action to save in Airtable the data submitted by the user in the form. To set it up:

• API key + Base ID + Table name: use the same data as in the previous actions.
• Record ID: reference the {{state.recordID}} variable from the previous flow.
• Fields: include the name of each column in Airtable in the first input (name, email, company, job and phone) and reference the corresponding variable form each field of the form: {{input.body.name}}, {{input.body.email}}, {{input.body.company}}, {{input.body.job}} and {{input.body.phone}}.
  

Finally, close the flow with a Submit the form action, personalize the message that will be displayed on the form when the user submits it and 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. Test it. 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.