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

TL;DR
  • Ensure radio buttons are within the form block and have a proper name attribute.
  • Verify field settings for shared names and unique values; check for conflicting scripts.
  • Inspect and adjust custom CSS affecting visibility or usability; disable any related styles and test.
  • Review JavaScript for event blocking issues; disable and re-enable scripts to find conflicts.

If your Webflow custom form has an issue where the radio buttons are not being selected when clicked, there are a few key areas to investigate.

​

1. Check Form Structure

  • Ensure the radio buttons are inside the form block. Double-check that they are placed correctly without any overlapping elements.
  • Verify that each radio button has the proper name attribute, which groups them together logically, allowing only one to be selected within the group.

​

2. Review Field Settings

  • Inspect each radio button's settings within the Element Settings panel. Ensure that all radio buttons intended to work together share the same name, and each has a unique value attribute.
  • Confirm that there are no conflicting scripts or custom codes affecting the radio buttons' functionality.

​

3. Inspect for Style Issues

  • Check for custom CSS styles that might be affecting visibility or usability. Invisible or excessively styled radio inputs might appear as non-functional.
  • In Designer, disable any custom CSS related to form inputs and test again.

​

4. Test for JavaScript Conflicts

  • Review any custom JavaScript to ensure that it's not blocking events on the radio buttons. JavaScript errors can be found with your browser’s Developer Tools console.
  • Temporarily disable any JavaScript to see if the issue resolves, then re-enable scripts one by one to identify the culprit.

​

Summary

To resolve the issue of radio buttons not being selectable in Webflow, verify the form's structural integrity and ensure proper naming conventions for radio groups. Inspect and adjust CSS and JavaScript to avoid conflicts. Confirm that no element overlaps the inputs, hindering user interaction.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I make my Webflow form block's success state display itself with the form elements still visible and the success message below it? I have done this in the past through custom code but can't find it now.
Does Webflow have limitations when it comes to displaying the entire height of a div with fixed positioning, and can it be used to replicate an effect similar to the splash image on the Stanford site?
Can products be added or updated through the Webflow API? Is there a documented Products API in the Ecommerce section of the API reference?
Is it possible to offer users a free trial with Webflow Memberships/Ecommerce only, without using any third-party tools?
Is it possible to have 54 unique items with multiple options in the Webflow CMS for an e-commerce store, or would this exceed the maximum allowed items in any Webflow ecommerce plan?
How can I add the 'Access-Control-Allow-Origin' header to Webflow to resolve the issue in Firefox and Safari where images are not being displayed? Is the syntax of the header supposed to be in HTML or Javascript?
Is it possible to integrate images into a text in Webflow like in the provided capture? How can I achieve this?
How can I add a specific webhook for each form in Webflow to connect to different scenarios in Integromat/Zapier? Thank you for your help, I haven't been able to find a solution on the forums.
How can Swiftype be integrated into a Webflow site?
How can I display a cms collection of articles on a single page in Webflow and have the subsequent article displayed on the same page when clicked?
How to change the size of a single project image and title without affecting other images in Webflow?
What are the current challenges facing Webflow, particularly in terms of customer feedback, performance issues, and customer support?
Can Webflow forms be pre-filled with information?
How can I add a custom code on my Webflow portfolio website to enable free roam swipe functionality for draggable carousels, where the cards slide based on the power of the mouse drag effect?
How can I move the slider arrows in Webflow to a different position like in the attached picture?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?