Want to create an MCQ-style form in Elementor that automatically jumps to the next step when a radio option is selected? In this tutorial, you’ll learn how to make your multi-step form more interactive and user-friendly—just like a quiz!
To apply this feature:
Add the Class Name:
Copy the class name provided below and paste it into the “Advanced > CSS Classes” section of your Radio field.Insert the Custom CSS:
Go to the Advanced tab of your Elementor widget or form section, and open the “Custom CSS” field. Paste the given CSS code there. If you’re using a free version of Elementor, you can use any plugin that supports adding custom CSS (like “Simple Custom CSS & JS”).Use the HTML Snippet:
Add an HTML widget to your form and paste the provided HTML code inside it.
This setup will ensure that whenever a user selects a radio option, the form automatically proceeds to the next step without requiring a manual click on the “Next” button.
Watch the video tutorial beside this post for a complete walkthrough and visual explanation.
Copy Class
custom-radio
CSS
display: none !important;
}
.custom-radio label {
background: #ffcc00;
padding: 20px 20px;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s, color 0.3s;
display: block !important;
width: 100% !important;
margin: 6px;
text-align: center;
color: #000 !important;
font-size: 1.1em;
font-weight: 500 !important;
}
.custom-radio .elementor-field-subgroup {
width: 100%;
}
/* Next & Previous Button */
.custom-radio .e-form__buttons__wrapper__button-previous {
color: #ffffff;
display: none !important;
}
.custom-radio .e-form__buttons__wrapper__button-next {
color: #ffffff;
display: none !important;
}
javascript
document.addEventListener("DOMContentLoaded", function () {
const form = document.querySelector("#callform");
if (!form) return;
// Catch radio buttons
const yesNoRadios = form.querySelectorAll('input[type="radio"]');
yesNoRadios.forEach(function (radio) {
radio.addEventListener("change", function () {
// When the user selects something, they will find and click the next button.
const nextButton = form.querySelector('[data-direction="next"]');
if (nextButton) {
nextButton.click();
} }); }); });
</script>
