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.
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.
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.
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:
In form step 2, include an Number field with these settings:
In form step 3, we are going to include 4 Text fields with these settings:
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.
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:
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:
Finally, close this branch with a Go to the next form step action, which does not need to be configured, and publish the changes.
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:
Then add an If/then condition action configured as follows:
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:
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:
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:
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:
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:
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.
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:
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.
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.
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.