How can I set up a multi-step form in Webflow with radio button fields where at least one option is required to be selected before moving to the next slide?

To create a multi-step form in Webflow where at least one radio button selection is required before proceeding, you’ll need to use Webflow's built-in form structure along with custom interactions and a bit of JavaScript for validation.

1. Set Up the Multi-Step Form Structure

• Use Form Blocks to create a form with multiple Div Blocks or Fieldsets, each acting as a “step”.
• Include a “Next” button at the end of each step and a “Submit” button on the final step.
• Use Webflow Interactions (IX2) to show and hide steps by adjusting element visibility when "Next" is clicked.

2. Add Radio Button Groups to Steps

• Inside each step's container, add your Radio Button fields using Webflow’s Form elements.
• Set the same "Group Name" for all options in each question to ensure only one can be selected per group.
• Ensure that at least one radio group exists per step and mark them as Required in the Settings panel.

Note: Webflow only enforces "Required" on form submission, not on step transitions. So we need extra logic to validate at each “Next” click.

3. Add Custom Validation with JavaScript

• Add an Embed element at the end of the page (inside the Body) and insert this inline script to check radio selection:

<script>  document.addEventListener("DOMContentLoaded", function () {    const nextButtons = document.querySelectorAll(".next-button-class"); // Replace with your real class    nextButtons.forEach(button => {      button.addEventListener("click", function (e) {        const currentStep = button.closest(".form-step-class"); // Replace with your step wrapper class        const requiredRadioGroups = currentStep.querySelectorAll('[type="radio"][required]');        let isValid = true;        requiredRadioGroups.forEach(group => {          const name = group.name;          const radios = currentStep.querySelectorAll(`input[name='${name}']`);          const oneChecked = Array.from(radios).some(radio => radio.checked);          if (!oneChecked) isValid = false;        });        if (!isValid) {          e.preventDefault();          alert("Please select an option before proceeding.");        }      });    });  });</script>

• Replace .next-button-class and .form-step-class with the actual Webflow class names you're using for next buttons and step containers.

4. (Optional) Hide and Show Steps with Interactions

• Use Webflow interactions:
• On a successful validation, animate the next step into view and hide the current one.
• Use display settings (e.g., display: none/ flex) to show/hide containers.

Summary

To build a multi-step form with required radio buttons in Webflow, create separate step containers with radio inputs, use JavaScript to validate selection before moving forward, and manage visibility using Webflow interactions. This ensures users cannot proceed without selecting an option on each step.