Webflow sync, pageviews & more.
NEW

How can I fix the issue with my Webflow custom form where the radio buttons are not being selected when clicked?

TL;DR
  • Ensure each radio button is inside a form block, belongs to a group with the same name attribute, and has a connected label.
  • Check for Z-index issues, opacity settings, and pointer-events that might block interactions.
  • Review custom code for conflicts and test in an incognito window after publishing.

If your radio buttons in Webflow are not being selected when clicked, it may be due to incorrect structure, missing labels, or conflicting styles. Follow these steps to troubleshoot and fix the issue.

1. Check the Radio Button Structure

  • Ensure that each radio button is inside a form block (Form > Radio Button Group > Radio Button).
  • Each radio button should belong to a group (the same name attribute) to allow only one selection at a time.
  • If the name attribute is missing, add the same name to all radio buttons in the same group.

2. Verify the Label Connection

  • Each radio button should have a connected label.
  • Link the label to the radio button in the Webflow Form settings by ensuring the For attribute of the label matches the id of the radio input field.
  • If labels are missing, manually add them within the Designer.

3. Inspect for Conflicting Styles

  • Open Webflow Designer > Style Panel, then check:
  • Z-index Issues: Ensure no overlapping elements (e.g., absolute positioning) are preventing clicking.
  • Opacity or Display: The radio button should not have opacity: 0 or display: none.
  • Click Events: Ensure no pointer-events: none is applied to the radio buttons.

4. Check for Custom Code Conflicts

  • Go to Project Settings > Custom Code and review any added JavaScript or CSS that might override radio button behavior.
  • If you have custom scripts affecting form behaviors, temporarily remove them and test again.

5. Publish and Test in a Clean Environment

  • Publish the site and test the interaction in an incognito/private browser window to rule out any browser extensions or cache issues.

Summary

Ensure the radio button structure is correct, with properly assigned labels and matching name attributes. Check for CSS conflicts, Z-index issues, and pointer events. Finally, review custom code and test in different browsers.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What are some new functions available through the CMS on Webflow with the release of the new Dynamics Embed widget?
Is it possible to make a button on a Webflow page display a random item from a Collection without any page loads using custom Javascript and without exposing sensitive data or API keys to users?
Is it possible to autoplay three videos on my Webflow page using HTML embed code from Vimeo if the background video element is not working, or can I set them to play on hover like the sample video on this article?
How can I stop a Webflow Vimeo video from playing with a button other than the play button, close the video window when the close window button is pressed, and autoplay the video when the window opens?
Can you provide a clear tutorial on how to add before and after pseudo elements to a button in Webflow?
How can I filter and display multiple collection lists separately in a dynamic page layout in Webflow?
How can I fix the issue of the select (dropdown) button on Webflow not displaying the correct styling on mobile browsers (Chrome and Safari) for iPhone?
How can I import and display event registration data from Airtable into a custom dashboard on Webflow, while ensuring that only registrations specific to each company's event are shown?
How can I achieve a nav bar in Webflow that has a transparent background and removes the white background when in the hero section or at the top of the page?
Can I add the CSS code "writing-mode: vertical-rl" to create a vertical heading in Webflow without having to rotate it 90 degrees?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
Does Webflow support multiple templates for form submit notifications, or is there only one mail body and one email recipient in project settings?
How can I switch the color mix blend mode in Webflow to achieve a similar effect, as mix blend mode color is not supported in Safari?
How can I add text on an image in Webflow?
Is there a step by step guide available for exporting the HTML of a Webflow site to be hosted on platforms like GoDaddy or Amazon?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?