Hello, WordPress enthusiasts! Today, we’re going to dig into creating an Elementor form that leverages the power of conditional logic, all without the help of any plugins. We will be creating a form that, depending on the user’s choice, will redirect them to three different URLs when they click on the submit button. Sounds exciting, right? So, let’s not waste any more time and jump right into it.
First, let’s head to the page where you want to add the form. Click on “Edit with Elementor.” On the Elementor editor, look for the “Form” widget. Drag and drop it onto the section where you want to place the form.
Configure the form fields as you need. In our case, we will need a “Radio” field for users to choose their option. Let’s add a Radio form field, name it “choices,” and add your options. For example, we’ll have three options named “Option 1,” “Option 2,” and “Option 3.”
For the form submit action, go to the “Actions After Submit” section and add “Redirect.” Don’t add the Redirect URL yet; we will handle that dynamically.
We’ll need to add custom JavaScript to our page to manage the form submission event and decide the URL based on the radio button choice. Drop in the “HTML” Element and include the following code in the code snippet:
<script>
jQuery(document).ready(function($) {
$(document).on('submit_success', function(){
var choice = $('input[name="choices"]:checked').val();
var url;
switch(choice) {
case 'Option 1':
url = 'https://www.option1.com';
break;
case 'Option 2':
url = 'https://www.option2.com';
break;
case 'Option 3':
url = 'https://www.option3.com';
break;
default:
url = 'https://www.defaultoption.com';
}
window.location = url;
});
});
</script>
Replace 'Option 1', 'Option 2', 'Option 3' and their respective URLs 'https://www.option1.com', 'https://www.option2.com', 'https://www.option3.com' with your actual choices and URLs.
Enables the creation of unique, personalized landing pages at scale by offering unlimited placeholders for dynamic content.
Essential for crafting content-rich, unique pages for each visitor or target group, optimizing for local SEO, e-commerce variability, or specific event details.