How can I fix the issue with my Webflow custom form where the radio buttons are not being selected when clicked?
TL;DR
- Ensure all radio buttons in a group share the same name attribute for exclusive selection behavior.
- Avoid wrapping inputs in interactive containers and check for interfering styles like z-index, pointer-events, or hidden inputs.
- Disable conflicting interactions and temporarily remove custom code to isolate the issue.
If your Webflow custom form's radio buttons are not being selected when clicked, it’s typically due to incorrect structure or custom styling interfering with native behavior.
1. Confirm Proper Grouping with Name Attribute
- All related radio buttons in a group must share the same name attribute.
- Example: If you have three options under the same question, each should have something like name="plan".
- If radio buttons have different names, they won't behave exclusively, and selecting may not work as expected.
2. Check for Custom HTML or Incorrect Wrapping
- Ensure each radio input is properly nested inside a
<label>or associated with one using theforandidattributes. - A common issue is when a radio input is placed inside a div with click events or custom animations, preventing default selection behavior.
- Avoid deeply nesting radio inputs inside containers with custom interactivity that may intercept clicks.
3. Inspect z-index and Visibility
- Sometimes custom-designed elements (e.g., styled labels, pseudo-elements) may visually appear as radio buttons but block user interaction.
- Use browser developer tools to inspect the radio input—check that it’s not covered or hidden by other elements via:
- z-index
- pointer-events: none
- opacity: 0 with no accessible alternate control
4. Disable Conflicting Interactions
- Go to your Webflow Designer > Interactions panel, and check for click or hover interactions applied to parent elements of the radio buttons.
- Test by disabling the interaction temporarily to confirm whether it’s blocking the radio button selection.
5. Avoid Setting Display: None on Input
- If you visually hide the native radio and use custom elements for design, make sure the radio button is still focusable and clickable.
- Instead of
display: none, use opacity: 0 and position: absolute to hide it but keep it interactive.
6. Test Without Custom Code
- Temporarily remove any custom JavaScript affecting form inputs to see if the issue resolves.
- Some custom scripts inadvertently override native radio behavior or prevent selections.
Summary
To fix non-selectable radio buttons in Webflow, ensure all radio buttons in a group share the same name, avoid placing inputs inside interactive containers, and check for interfering styles or interactions like z-index or pointer-events. Test by simplifying your layout to isolate and identify the issue.