Guides & tutorials

Adding logic to a form

No items found.
Import this tutorial scenario in your workspace
Table of contents

New to Arengu? If you're getting started with the editor and need to add custom logic to your form, you're in the right place. Let's start at the beginning!

Here you will find all the information you need about the types of flows that exist and what actions are usually run in each of them.

1. Create a flow

To add logic to a form, just open it in the form editor and click on the green plus button.

You can also do it from the ‘Flows’ tab of the form editor, by clicking the plus button to create a new flow from scratch or by selecting an existing one.

When to choose each type of flow? Just think about what kind of logic you want to implement. Let's see what to use each of them for.

Flows connected to form steps

Step flows allow you to automate actions and query any API for data, between the steps of the form. This means that you can just ask for an email on the first step of the form and  automatically get more information about it before the next step of the form is displayed.

This is one of the great advantages of Arengu and opens up endless possibilities when it comes to building dynamic forms. These are the most common uses of step flows.

1. Check if the user is registered

When building login or signup forms, you can easily check if the user is already registered by adding a flow with a ‘Look up’ action, followed by an ‘If/then condition’ to set different behaviors depending on whether or not the email is registered.

Native actions with OAuth connections are provided for common services, so you just can save a lot of time on their configuration. For example, Firebase, Cognito, WordPress, and Airtable, but you can check here the available integrations.

You can query any service with an API, even your own ones, with the ‘HTTP Request’ action. Learn how to build these use cases, step by step, in the Guides & Tutorials section.

2. Check if a contact is created

When creating contact or demo request forms, you can also use a step flow to check if the contact already exists in your database and the user data that is stored.

Native actions with OAuth are provided for common services like HubSpot, Pipedrive, and ActiveCampaign, so you can save time and easily build the flow with them.

If you don’t find a service in the list, you can build the connection with an ‘HTTP Request’ action. We will also appreciate letting us know which new actions would be useful for you!

3. Send an OTP or magic link

Step flows are also used to verify users identity, for example, by sending one-time passwords (OTP) or magic links to check that they have access to an email account.

For example, to create an OTP flow, you will need 2 flows linked to different steps. The first one will contain a ‘Generate one-time password’ action and send the code to the user. You can connect it, to the step of the form that asks for a phone number.

Another flow will be needed to verify that it is valid. Just include a ‘Verify one-time password’ action connected to the step where the user has to input the code.

Learn step by step how to build OTP flows with Twilio, magic links with WordPress, and many more authentication use cases in the Guides & Tutorials section.

4. Get data from external services

Thanks to step flows, you can query any API at any stage of the form to get data to display on the form or to modify its behavior. You can easily pre-fill or populate fields, to create a progressive profiling form or to allow users to modify their data

Native actions are provided for common services like Airtable, Google Sheets, or Pipedrive, but you can connect anyone with an API with the 'HTTP Request'.

You can also connect data enrichment services like Clearbit, to get user or company data from corporate emails, or risk scoring services to check the reliability of the user’s IP. Endless possibilities open up when connecting external and 3rd-party services.

5. Build different paths based on data

Step flows are perfect for creating dynamic forms with conditional logic and to build different paths based on user responses and qualification.

For example, you can use the user's answers and information from a data enrichment service to automatically qualify the user and trigger different actions based on the qualification.

For example, you can use conditional logic on demo request forms, to automatically offer (or not) a meeting to the user depending on the qualification. 

To build these paths, you just need to connect a flow to each step of the form with an ‘If/then condition’ action, to make the proper checks, add the corresponding actions, and define to which step of the form the user will be redirected if the condition is met (or not).

Just remember that actions can't be added after navigation actions. The logic that you want to execute after them must be added in another flow connected to the next step.

Form navigation

Once you've built a step flow, you should close it by adding navigation actions to indicate which form step is displayed after executing the flow or each of its branches. 

The available navigation actions are:

  • Go to the next form step. As its name indicates, it displays the next step of the form, following the order in which they appear on the form editor.
  • Jump to a form step. It allows you to choose which form step you want to display. Just select the proper step in the action settings.
  • Submit the form. As its name also suggests, this navigation action submits the form. If you add this action, you won't be able to add step flows after it. All the logic you build will have to go in an after submission flow.

These actions are the last ones executed in the flow. Don’t add actions after them, because they won't be executed.

After submission flows

Flows that run after form submission are used to send data to external services and CRMs, plus trigger custom notifications. These are some of the most common cases.

1. Create or update a contact in a CRM

The most common use of these flows is to send form and enriched data from services like Clearbit to a CRM or user database.

As we have explained, you can use native actions to send data to services like Airtable, Google Sheets, and HubSpot, or build your own connections with the 'HTTP Request'. 

To configure these actions you just need to list the data that you want to send and the ID of the field in which it will be stored. The only difference with respect to step flows, is that after the submission you can only send data to these services, not request it.

2. Send a welcome email

Another common use is to send a welcome email to the user. Just add one of the sending actions to build the email with HTML and CSS, and include any variable from the form.

You can also send different notifications based on the user qualification and profile by adding conditional logic to the flow.

3. Send custom notifications to your team

After submission flows also allow you to create custom notifications with services like Slack and trigger actions based on that information. 

For example, you can automatically send data to a specific salesperson or channel. Just add an ‘If/then condition’ action to trigger behaviors based on the user qualification.

You can also include interactive buttons in your notifications, for example, to accept or reject a user from the Slack channel itself. This way, you can decide who you give access to a beta version or to manually check which ones are spam.

Start from template

Remember that Arengu templates are fully editable, so if you don't want to build all the logic from scratch, you can choose a template and add or remove everything you need.

It's a good way to understand flows and how they relate to forms. However, if you need help, feel free to contact or book a demo with us. We will be happy to help you!

Haven’t you tried Arengu? Sign up free to start building advanced use cases in no time.

You might like to read

See more tutorials

Getting started with Arengu

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.