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

Elementor’s built-in form widget is powerful enough to create multi-step, dynamic forms without installing additional plugins. In this tutorial, you’ll learn how to build a multi-step form that redirects users to different URLs depending on their selections — all handled with a little bit 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

Now for the fun part — adding 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:

And that’s it! You’ve just created a fully functional multi-step Elementor form with conditional redirects — completely plugin-free. It’s lightweight, flexible, and great for building smarter, more personalized user experiences right inside Elementor.