Saturday, August 9, 2025

2 min read

How to Create an Elementor Form with Conditional Logic Without Plugins

You don’t need any addons or external plugins to make smart conditional behavior in Elementor forms. In this walkthrough, you'll build a simple form that redirects users to different URLs based on their selection — all handled with a few lines of JavaScript.

Step 1: Create a New Form in Elementor

Open the page where you want to add the form and click **Edit with Elementor**. From the widget panel, drag the **Form** widget into your layout.

Configure the fields you need. For this example, add a **Radio** field so users can pick from multiple options. Name the field `choices`, and create three example options such as “Option 1,” “Option 2,” and “Option 3.”

Step 2: Add the Redirect Action

Under the form’s **Actions After Submit** settings, add **Redirect** to the list. You don’t need to define a redirect URL in the panel — we’ll handle that dynamically with JavaScript next.

Step 3: Add Custom JavaScript

Now we’ll use a small script to check which option the user selected and redirect them to the appropriate URL. To add it, drop an **HTML** widget anywhere on the same page and paste the following code:

javascript
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>

This script listens for Elementor’s built-in `submit_success` event, reads the selected radio field value, and redirects the user to a matching URL. Replace the example options and URLs with your own values to fit your form logic.

Extra Tips

  • You can add as many cases as you need — just extend the switch statement.
  • If your form has more than one radio group, make sure to use the correct `name` attribute in the selector.
  • For a smoother experience, you can replace `window.location` with `window.open(url, '_self')` if you want more control over navigation.

Official Elementor Form documentation:

Guide on Elementor form events and JavaScript hooks:

That’s all it takes — you’ve just added simple conditional logic to an Elementor form without using any external plugins. You can expand this setup to handle other actions, dynamic fields, or even API integrations with just a bit more JavaScript.

About the Author
Jonas Lindemann

I’m an experienced SEO professional with over a decade of helping over 100 businesses rank higher online, especially local businesses, e-commerce stores and SaaS. As the co-founder of LPagery, I specialize in practical, proven strategies for regular SEO and Local SEO success.