How to Create a Multi-Step Elementor Form with Conditional Logic Without Plugins

The Form widget in Elementor Pro can split a form into steps without an extra plugin. This tutorial builds a multi-step form that sends visitors to different URLs depending on their answer, with a few lines of JavaScript.

Step 1: Create a New Form in Elementor

Open the page where you want your form and click “Edit with Elementor.” Drag and drop the “Form” widget into your layout. This is where we’ll build the base structure of the form.

Next, configure your form fields. For this example, we’ll include a Radio field to capture user choices. In the Form Fields panel:

1. Add a “Radio” field.
2. Set the field label to something like “Choose an Option.”
3. Set the field name to “choices”.
4. Add three options: Option 1, Option 2, and Option 3.

Step 2: Turn It Into a Multi-Step Form

Elementor lets you break forms into multiple steps using the “Step” field type. In the Form Fields section:

1. Add a new “Step” field before your first form field. This marks the start of Step 1.
2. Add another “Step” field wherever you want Step 2 to begin.
3. Place your “choices” radio field in the final step.

You can style each step differently and add navigation labels or progress indicators using Elementor’s form widget settings.

Step 3: Add a Redirect Action

When users finish the form, we’ll redirect them to different pages depending on what they selected. Go to the “Actions After Submit” section in the Form widget settings and add “Redirect.”

Don’t fill in the redirect URL yet, we’ll handle that part dynamically with JavaScript in the next step.

Step 4: Add Custom JavaScript

Next, add the logic that checks which option was chosen and redirects accordingly. Since Elementor doesn’t have a dedicated JavaScript editor, we’ll use an HTML widget to inject our custom code.

1<script>
2  jQuery(document).ready(function($) {
3      $(document).on('submit_success', function() {
4          var choice = $('input[name="choices"]:checked').val();
5          var url;
6  
7          switch(choice) {
8              case 'Option 1':
9                  url = 'https://www.option1.com';
10                  break;
11              case 'Option 2':
12                  url = 'https://www.option2.com';
13                  break;
14              case 'Option 3':
15                  url = 'https://www.option3.com';
16                  break;
17              default:
18                  url = 'https://www.defaultoption.com';
19          }
20  
21          window.location = url;
22      });
23  });
24  </script>

Replace the placeholder URLs with your actual destination links. You can use this technique for any kind of dynamic behavior, like showing messages, submitting data to APIs, or adjusting the redirect logic further.

Complete Recap

Here’s what we did:

• Created a form in Elementor with a Radio field for user choices.
• Added multiple Step fields to create a multi-step experience.
• Enabled the Redirect action after submission.
• Used custom JavaScript to dynamically control redirects based on user selection.

Useful Links

Elementor Form Widget Documentation:

Elementor Developer Resources:

The form now sends each visitor to the page that matches their answer, without an extra plugin.