Conditional logic is the key to building a personalized and high-performing form. Today, we guide you on how to create a signup form with conditional logic, based on the user's email address. By scanning an email address, we'll gather interesting data and build different paths, in order to personalize the form's user experience and to optimize the internal sales pipeline. Let's hop into it!
1. Create a multi-step form
To create this use case example, we will build a multi-step form with 3 different steps. Of course, you can add as many steps as you need, according to the information you need to gather. To add more steps, just click on + Add new step, as you can see in the example below.
First step: Email, password and legal terms
To start with, we'll add just 3 fields: email, password and legal conditions. All of them have been marked as mandatory. You can set this option, among others, by clicking on each field and checking or unchecking the boxes on the right-side menu. Some fields have predefined settings — for instance, the legal fields is marked as mandatory by default.
Second step: one-time password
Two-factor verification is a great option for onboarding flows. In this example, we will filter spam accounts and verify the user's identity with a one-time password.
In order for the user to enter the one-time password, we'll add a second step to our form. Just select the Number field and set it as mandatory.
Third step: Conditional profile setting
This step is optional and it will only be displayed when the user entered a company email. This step includes three fields: two Choice fields and 1 Yes/no question. The purpose of this step is to obtain more info about the user and the company to enrich our database.
2. Create personalized conditional logic
Simply by taking the email field input, we can create a complex branching with conditional logic for this use case. Now, it's time you create yours in the Flows editor. Here, you'll be displayed with tens of actions and integrations to perfect your form and its behavior. Let's see how to do it step by step.
For this use case example, we'll build 3 different flows. We'll start by building an email verification flow.
First flow: Verifying an email address
On this first flow, the first action we'll add is an email verification action. First, we added the Verify email address, to filter temporary emails, bots or email aliases. You can add your own business rules to adapt this action to your needs.
When the email is valid, two different paths may be executed. All of this is possible thanks to the If/then condition, the action that branches the flow as you like.
If the email is not valid, an error message will be displayed and the form won't be submitted. If it's valid, an additional security action will be carried out — we'll generate a one-time password and send it with a SendGrid integration. You could also choose to send the email with MailJet or even use your own email provider, by calling its API with an HTTP request.
Second flow: Dynamic form based on the user's email address
Now, we will create a complex conditional logic, based on the user's email address. This is how our second flow looks like. But don't panic! You can build a complex flow like this one in minutes and without coding skills. We'll explain how, action after action.
First, we have to finish up the previous flow. We'll do this by adding the Verify one-time password action. If the code entered by the user coincides, the flow will continue. If not, an error message will be displayed.
Once we have verified the user's identity, we need to know if the user's email is a personal email address or if it is a company domain. According to the result, we will branch different paths. We can get this info thanks to a data enrichment tool. In this case we have added a native action with Clearbit.
To add the different paths, we'll use our branching action — If/then condition.
Path 1: The email provided is a company email
If the email includes a company domain, the form will continue to the next step. In this step, we will ask the user for more details, so we can shape up their profile.
Besides displaying a different form, you can also add different internal actions. In this case, we have included a Hubspot integration to update our CRM.
Path 2: The email provided is a personal email
If the user entered a personal address, the step about the company details won't be useful anymore. If this is the case, you can choose to skip this step and submit the form directly.
Since we chose to submit the form directly, we'll proceed to authenticate the user and redirect them to the Welcome Page, with an HTTP request and cookie setting. In Arengu's blog, you can learn how to build an authentication action with Auth0 in detail.
Third flow: Form submission and redirection
Lastly, we only have to create our last flow, that will authenticate the users that completed the last and optional step. Just like we did in the previous flow, we will add an HTTP request to authenticate the users with your preferred auth provider.
Here, we have added a native action to update Hubspot's CRM. If you run a lead acquisition site, it is likely that you manage your leads or clients with a CRM. You can automatically update it thanks to this action.
Overview of your forms and flows
After you have created all the steps and the flows you need, don't forget to connect them. To do so, go to Forms > Flows. There, you will have an overview of the whole onboarding process.
Here you can link the flows with their pertinent steps, and before or after submission.
💡Good to know
To make your form work, you'll have to configure some mandatory settings on the actions.
- References: Arengu's actions are linked to each other by referencing the elements' IDs. In some actions, you will find a required field where you have to enter the value you wish to make reference to. Learn how to reference values in Arengu in detail so every bit of your forms works correctly.
- Keys: Arengu's native actions require the provider's key in order to work properly. For instance, if you'd like to add an action with Clearbit, you will need a secret API key. You will find these keys in your own account settings in Clearbit (or any provider you're using).
Building dynamic forms with conditional logic has tons of benefits for you and your users. If you want to give it a try, register and try if for free!