Today, we’re diving into the Elementor world to construct a multi-step form leveraging conditional logic, sans plugins. Yes, you read it right, no plugins involved! This form will guide the user through multiple steps and, based on their selection, redirect them to one of three different URLs when they hit the submit button. Intrigued? Let’s dive in!
To start, head to the page where you want the form. Click on “Edit with Elementor.” Within the Elementor editor, search for the “Form” widget. Drag and drop it to the section where you want your form.
Set up the form fields as required. For our scenario, we need a “Radio” field for users to select their choice. Let’s add a Radio form field, name it “choices,” and insert your options. We will have three choices: “Option 1,” “Option 2,” and “Option 3.”
Now we’ll turn our form into a multi-step form. In the “Form Fields” section, add a new “Step” field. You can add as many steps as needed and configure the fields within each step. In this case, we’ll place our radio buttons in the last step.
For the form submission action, head to the “Actions After Submit” section and add “Redirect.” We won’t add the Redirect URL yet; we’ll dynamically set it with JavaScript.
Now we need to add custom JavaScript to manage the form submission event and decide the redirect URL based on the radio button selection. We’ll do this by adding an HTML widget (since Elementor doesn’t have a custom JavaScript field) to the page and entering the JavaScript code in it:
<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 the respective URLs 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.