Guides & tutorials
Guides & tutorials
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.
To build this use case in a few minutes you just need:
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.
Once the form is built, 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.
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:
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.
We will create a flow that we will reuse in all our form steps. This flow will perform the following operations:
This is the overview of the flow:
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.
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:
💡 Bonus tip: If you want to learn more about how to set up Airtable formulas, take a look at this page.
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:
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.
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.
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.
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.
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.
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.