Guides & tutorials
Guides & tutorials
In this tutorial, you will learn how to build a passwordless form with email verification, data enrichment and conditional logic to automate different after-submission actions.
This is a very common example that can be found in many SaaS and B2B services, which can also be easily and completely adapted to your needs.
To build this use case you will need:
A use case that automates actions based on the relevance of the user, depending on whether or not they have corporate email. It consists of a multi-step form and 3 flows connected to them with:
Let's see, step by step, how to build it with Arengu.
In the first step of the form we will include the Google social sign-up button and a second passwordless registration option, that consists of a text and an email field to ask for the user name and an email address. To set up these fields:
In form step two, add a number field to request the temporary code that we will send by email to the user when choosing the email registration option. This step will only be displayed if the user does not choose the social sign-up option. To set it up:
In form step three, we will ask for some company details, including company name, website URL and job title, configuring the fields as follows:
Finally, in form step four, include three different pricing options using the cards field.
Once all the steps of the form have been created, publish the changes and click on the Flows tab to start building the server-side logic.
You will need 3 flows in total: 2 step validation flows linked to steps 1 and 2 and an after submission flow. Create the flows clicking on the plus icon and then publish the changes.
The flow that we need to connect to form step 1 needs to have this structure:
First, include an If/then condition action configured as follows:
Click on the HTTP Request actions and set them up as follows.
To configure them:
If necessary, add the Authorization header and the corresponding key of your API.
Then, we will include an If/then condition action to check if the sign-up HTTP Request has been successful and create two branches. Set it up as follows:
Include a Generate one-time password action in the true branch:
Then add an action to send it by email. In this case, we have chosen our Mailjet native action. To set it up, you only need to copy and paste the API key and the Secret key of your account in Mailjet, and also indicate the email sender.
To test it, you can use Arengu's native Send email action.
Reference the input email variable from the form on the proper field and include also the OTP variable from the outputs of the previous action in the subject and message fields. Remember to execute the flow to be able to get it from the selector.
After the Send Mailjet email, we need a Go the next form step action to redirect the user to form step 2. This action does not need any configuration.
In the social signup branch, we will change it for a Jump to a form step action, which will send us to step 3 of the form, since we do not need to verify the email.
You can also personalize the error messages that will be displayed on the form if there is an error in the signup process. Once everything is ready, publish the changes.
Link a flow to the 2nd form step with the following structure:
First of all, add a Verify one-time password action configured as follows:
Then include an If/then condition action to check the result of this verification and manage its responses:
Add a Show error message action on the False branch to personalize the message that will be displayed on the form if the one-time password is not correct.
To close the True branch of this flow, include a Go to the next form step action. It doesn't need any more configuration.
Finally, we will create an after-submission flow with this structure:
First, we will use a Verify email address action to check if it is a corporate or free email in order to trigger different actions based on that result. For this, simply reference the input email variable from the form and activate the Block free email providers checkbox.
Then include an If/then condition action to check if it is indeed a free email:
For free email addresses, we will set up two automations: send a message to a specific Slack channel to notify our team and also send a welcome email to the user.
To configure the Send a Slack message native action you just need to copy and paste the webhook URL of the channel in the proper field and set up the content of the message referencing the variables that you want to include in the Fields section.
To send the welcome email we will use the Send Mailjet email action again, with the same configuration used in the first flow. Simply edit the title and the body of the message, in which you can include your own HTML templates, to welcome the new user.
For corporate emails, in addition to the Slack notification and a different welcome email, we have triggered two other actions.
The first one is the Find company by domain action, which consults the Clearbit database to find company data based on its web address. To set it up, just paste the API key of our Clearbit account and reference the input company name variable from the form.
The other automation we have included is the Add Pipedrive deal action which, as its name suggests, creates a deal in the Pipedrive account of our sales team.
To configure this action simply copy and paste the API token of your Pipedrive account and set up the deal title and its content in the Custom fields section.
You can also include other Pipedrive actions in the flow, such as Add person or Add organization to automatically create your agenda.
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.