Thinking about creating a form with a complex flow and calling many API calls? In this tutorial we’ll invoke an AWS Lambda function thanks to our HTTP request action.
Before starting, make sure you meet these requirements:
A basic sign-up form but with a complex flow, whose process is:
Let’s start by using one of our templates, then we’ll add a new field. Go to Arengu, create a form and select the “Signup with email and password template” option, then drag and drop a Text field to the Step 1 of the form with the following settings:
Just after the Step 1 you will find a box labeled as “Signup flow”. If you click on it, a new left panel will appear. Click on the “Preview form in a new tab” button next to “execute Signup flow”.
We’ll use a free external service (timeapi.io) to get the current date. This isn’t the most efficient way to get the date, but it’s a good example to use the `HTTP request` action again. Once you are in the flow editor, add a new HTTP request action with the following settings:
Calling to that URL, our flow will receive a JSON object like this:
As we only want to use the value of “dayOfWeek”, but we want our form to access this value in any other step, let’s store it as a state variable: add a new action called “Store state variable” with these values:
Add another HTTP request action, and set the fields:
Apart from calling an external API, our form built in Arengu can also use the received response. The ‘Hello world’ example in the previously mentioned tutorial of AWS sends to the caller a JSON object with a message in the body. An extract of a sample message:
We want to use this message as a ‘Thank you’ message after the form submission, so we are going to store it as a state variable. Again, add a new “Store state variable” action and set:
Have you finished the flow edition? Make sure you ‘Publish’ the changes by clicking on the upper right green button.
Go back to the form editor, click on the last block called “Ending screen” and follow these steps:
After publishing the changes in the form, let’s test it: click on “Preview”, submit the form and our API’s message will appear. We used the name “Alberto” and the city “Seattle” on Monday, so this is our result:
In case something fails, you can debug your submission flow. Check the “Executions” tab in the flow editor and you will see something like this.
Ready to build your own form? Try to create your own complex flow with all the custom integrations you need thanks to our HTTP request action. Moreover, you can start checking out our native integrations. Sign up free or book a demo with our team.
Do you have any questions about Arengu and its potential? Contact us by chat or mail and we’ll guide you to build your form.