Have you ever lost valuable information about your potential users because they left a form before submitting it? Well, there is already a way to avoid it.
Today we will show you how to build a multi-step form whose responses will be saved when just going to the next form step. This way, if users do not submit the entire form, we will keep the answers they have given until the moment of leaving it.
Previous requirements: What do we need?
To build this use case in a few minutes you just need:
- Arengu. To create the form and set up its server-side logic.
- An Airtable account. Register in Airtable and create a project to store the form data. Once created, you will find the project configuration data in airtable.com/api that we will use to set up the server-side logic of the form.
What will this form look like?
At first glance, users will not notice any difference compared to a classic form, they will simply fill in the fields of each step as far as they want. However, if the user does not finish and submit the form, the given answers will be saved anyway in our Airtable account.
This is just a preview of the form, but it can be completely customized and embedded in any tech stack, and with a single line of code, using the form editor and the following CSS variables.
To build this use case, we will create a form and its server-side logic with Arengu, and then integrate Airtable with the set of native actions to list, create and update records.
1. Set up the table
Go to Airtable and create a table with a column for each of the form's fields. In our case it would look like the example in the image 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. You can use the Single line text or Long text field type for practically all cases, except if your form includes any multiple choice answers.
If you have multiple choice fields in your form, remember to 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.
Add the internal value for each answer in Arengu with the exact spelling: uppercase and lowercase letters, spaces, symbols, etc. The options are key sensitive and it will not work properly if there is any difference between these texts and the outputs from the form. This applies both to "Single select" and "Multiple select" options.
2. Build the multi-step form
Go to the form editor and create a multi-step form from scratch. Simply drag and drop an email field to Step 1 and set it up as required. We will use it to identify the records in Airtable. You can also use this step to ask for any other contact information.
Then create the next steps of the form with the corresponding questions. Concretely, we have included the following steps and fields:
- Step 1: a text field for the user's name with "name" as the field ID and an email field with "email" as the field ID.
- Steps 2, 3 and 4: a choice field in each one with "question_1", "question_2" and "question_3" as the field IDs. Questions 1 and 2 are choice fields with multiple selections which we will also set up as required while question 3 is a single-choice field. You can edit the internal values in the Settings menu of each field.
Once all the steps and questions have been created, click on the Flows tab to create a flow linked to the first form step and publish the changes.
3. Create the flow logic
We will create a flow that we will reuse in all our form steps. This flow will perform the following operations:
- Check if there is a current record ID and, if we have one, update it.
- If we don’t have a record ID, list our records filtered by the current user email.
- If we have a match, update that record ID with the new form values and store the record ID in a state variable to reuse it in the next flow execution.
- If we don’t have a match, we will create a new record and again, store the generated record ID to use it in the next flow execution.
This is the overview of the flow:
3.1. Check if the user has previously answered the form
First, we will place an If/then condition action to check if the user has ever responded to the form. For this, we will reference the record ID variable and verify that it exists.
This variable won't be available until the user runs the flow at least once but you can manually set up this condition by adding the “{{state.recordID}}” variable to the first input and choose “exists” as evaluation criteria.
Now, let’s start building the false branch.
3.2. False branch: List records from Airtable
If the record ID variable does not exist, we will execute the List records action to check if there is already a record with that email in Airtable.
To set up this action:
- Action ID: change the ID to listRecords, this will simplify referencing the output information of this flow action.
- API key: you will find it in your Airtable account settings.
- Table name and base ID: you will find them in your Airtable project documentation. You can learn more in this tutorial.
- Formula: include {Email}=”{{input.body.Email}}” to filter your records by the current user email.
💡 Bonus tip: If you want to learn more about how to set up Airtable formulas, take a look at this page.
Check if the record already exists
Once the search is done, we need to check if there is any record with the input email with an If/then condition action.
To set up this condition:
- Add the “{{length(listRecords.body.records)}}” variable to the first input and choose “is greater than” as evaluation criteria and add “0” to the second input.
- Notice we are using a custom function to get the length of a string.
Create a new record and go to the next step
If there is no record in Airtable with that email, we will use the Create a record native action. Paste the API key, the Base ID and the name of the table in Airtable, and then list the names of the columns in Airtable and the variables from Arengu to store in them.
Just remember that the column name fields are key sensitive and that you can get the variables by clicking on the + button after an execution of the flow.
Include a Store state variable action below to save the ID of the record that was just created in Airtable. You can get the record ID variable from the previous action outputs by clicking on the + icon after an execution of the flow.
Input the name of the variable in the left column, which must be exactly the same as the one used in the first If/then condition action of the flow. If you decide to change it for any reason, just remember to update it in all the actions in which it is referenced.
Finally, add also a Go the next form step action to allow the user to navigate the form. It does not need to be configured.
Update the record and go to the next step
If there is already a record in Airtable, we will run the Update record action. To set it up, paste the API key, the Base ID, the name of the table, and list the names of the columns in Airtable and the variables from Arengu exactly the same as in the Create a record action.
The only difference is that you will also have to reference the ID variable of the record that you want to update in Airtable. You can get it by clicking on the + button of the Record ID field after an execution of the form.
To close this branch, just include another Store state variable action set exactly the same as in the False branch and a Go to the next form step action too.
3.3. True branch: Update the record and go to the next step
As we have mentioned before, we will set up the True branch of the first If/then condition action last. We need to previously run the List records action to be able to get its output variables and then configure the Update record action with them.
The configuration of this action is exactly the same as the Update a record action in the False branch: API key, Base ID, name of the table, record ID variable and the list of columns in Airtable and the variables from Arengu. Include a Go to the next form step action too to close this branch.
4. Link this flow to each form step
Once this flow is ready, go back to the form editor and click on the Flows tab. Then connect this flow to every step on the form. Publish the changes and click on the Preview button to test it. You can check in your Airtable project that all the information is being stored properly.
You can also edit the after submission message in the Settings tab. Then simply remember to publish the changes and the form is ready to be used.
5. Test and debug it
After testing your form and linked flows, you can see 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 of the actions 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.
