Is there a native way (or quick & easy workaround) to do radio button styling in Webflow, or does it have to be hand coded?
The “radio” needs to be hidden - instead a styled button toggles the selected/not-selected state. Of course it needs to be within the construct of the site (not an external service like Typeform), and mobile friendly. Basically, it’s a simple form with styling:
I am 95% there with hiding the radio, styling the “Radio Button Field”, but can’t seem to maintain selected-state styling. Also the “this is a required field” tool tip doesn’t place correctly when the radio is hidden.
Thank you @Waldo, that’s helpful and I am able to finish this within Webflow instead of having to re-code the Webflow page with external javascript/jQuery. I should have known @Sabanna had the answer and posted a screen cast. I love her contributions.
User interaction on webpages is crucial, so yes, this should be much easier to do within a design program like Webflow. It’s important to create forms that look like 2016 instead of 2006, and function on mobile devices where radio buttons don’t work very well.
Reporting back on this, in case anyone else wants to create buttons as radio selectors.
The video that Sabanna graciously made won’t completely work for multiple buttons because the version of Webflow has changed since her video (and does not allow duplication of the radio label, although you can work around this), and also because the interactions apply style to the entire button set. That’s not the desired result. Seems the only quick solution was to use Bootstrap Studio and drop in the code Redirecting…
Mobile views of webpages continues to grow, so hopefully we’ll see Webflow features that allow rapid development of mobile-friendly design.