Conditional logic helps you shape smart and dynamic forms to offer a personalized user experience. With it, you can trigger different actions based on your own conditions and create forms that chance depending on user's choices.
Today, we'll see how to build a personalized e-commerce form using conditional logic.
Conditional logic in forms: How to implement it
Conditional logic in forms allows you to display different form to different submitters according to their responses on the forms. Using branching actions enables you to create different versions of one form and personalize the user experience to the fullest.
With Arengu, you can add conditional logic to your forms simply by adding an If/then condition action and setting your own rules to personalize the form's behavior. You can also mold the form navigation accordingly, by using the step navigation actions: Go to the next form step or Jump to a form step. These actions allow you follow the natural order of your form's steps or to skip certain steps, according to your own conditions.
Subscription payments in ecommerces
If you sell a product with different pricing, personalized plans, or dynamic one-off charges or subscriptions, you can build it with Arengu with no code and in minutes by using the conditional logic actions and the step navigation actions.
A real use case: Build it step-by-step with Arengu
Now, we will explore a real use case, so you can learn how to build your own ecommerce personalized form!
This form is used in an ecommerce that offers personalized meals plans for dogs. The form displays different questions about the dog's type, constitution, activity level, and so on, to shape a perfect meal plan for them.
1. Build a form with different steps
The first step is to build the form with all the necessary steps. While this form has many different steps, it is possible that not all of them are showed to the user!
- First step: number of dogs
First, we'll ask the user how many dogs they have. The first question will determine the path of the form — there's no point in showing all the steps when the user only has one dog!
We recommend you to name each field ID with a simple name you can easily identify. We will reference this ID in further steps.
Here, we will also assign a subscription plan from our Stripe account of each option. Depending on the number of dogs, a different pricing will be linked to the option and will be showed afterwards, in the final payment field.
To do so, click on the Choice field > Advanced > Internal values and copy paste the subscription ID plans from your Stripe account.
- Profiling of each dog
After this first step, the profiling of each dog will be displayed. Keep in mind the profiling of dogs #2 and #3 will only show if the user said he has that number of dogs!
We will use this information to update our users database to optimize the sales process.
- Payment form to acquire the meal plan
If the user continues up until the end, they will be displayed with a payment form to buy the meal plan! This is a dynamic pricing payment form that takes the choice from the first step! Since we added a pricing for each option, this will automatically be taken here.
To configure this action, add the field ID under the Plan ID field. Select the type of payment and copy paste your secret API keys. You can find all of this info in your Stripe account.
- Configure extra details in your form
On the left-side of your menu you will see all the available options you can drag in the form: fields, blocks, and so on. You can also personalize the look and the theme of your form, define GDPR & data storage settings, set notifications, and more!
2. Add conditional logic to your form
- Linking flows to each stage of the form
After setting all of your form steps, we will add server-side logic to our form. Go to Forms > Forms on the left-side menu of your editor and you will see an overview of each step and the flows linked to them. Click on the plus sign at the right side of the step to create a new flow. If you'd like to use an already existing flow, click on the drop-down menu to select it.
- Adding custom step navigation
In the flows editor, you will be displayed with a suite of actions you can add to your flow to determine the behavior of your flow. As you can see, we added one flow to steps one and two of the form, to configure a personalized form navigation.
This is how to configure the form navigation between. Add an If/then condition to determine the user's response, and trigger each navigation action. Here, if the user has only one dog, we can jump directly to the payment form. If they have more than one dog, the form will continue the consequent order of steps.
In the settings of this action, click on the drop-down menus to select the form you're using and the step you'd like to jump to.
- Adding integrations with third party tools
Apart from building your own logic with your own business rules, you can also integrate Arengu with third-party tools. This will help you save time and optimize your form even more!
In this case, it might be useful to update our CRM with the new client and send a welcome email with info about the meal plans. To do so, add an after submission flow and add the correspondent actions: Create or update contact and Send email. To configure each action, you just need your secret API keys. As you can see, you can also recall information from the form to personalize the way you address your user.
In this case, we have configured this by adding integrations with Hubspot and SendGrid, but keep in mind you can integrate any other service as long as it has an API. You can even integrate Arengu with your own API and link every option of the form with your database to send personalized info to each user.
3. Embed your form
To start using your form, simply go to Forms > Embed and find there all the available options. You can embed your form in a website, a WordPress site or a PrestaShop site. Just copy paste the two lines of code where you want your form to be displayed and it will be ready to work!
Do you have a use case in mind where all these features can be useful? Then try Arengu for free and discover how fast and easy it is to create your own personalized logic in ecommerce forms.