I’m migrating a client’s website from Wordpress to Webflow, and I have to recreate a survey question (select 1-10) on their customer feedback page (see image attached). I tried building it with radio buttons, but haven’t had much luck getting some of the details right (ie: absolute positioning of the numbers inside of the radio button, and only selecting one option while still achieving the correct hover/checked states, etc).
Just curious if anyone has any ideas on how this could be made natively, or if there are any resources on how I could do it with custom code/integrations.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey Tom it’s just a series of 11 radio buttons, same group, different values and labels.
The radio buttons would be set to custom style most likely and I would actually hide the radio button element itself.
Hover state can be styled directly on the Radio Button Field wrapper.
Selected state is a bit weird, because in Webflow the designer only lets you access the checked state on the Radio Button element itself, while you’re wanting to set the wrapper element. Even in custom mode, it’s a bit tricky to work with.
I do that instead with custom CSS.
For the 1-10 scale, I’ve found that using Webflow’s native slider element can be a real game-changer. You can style it to look like a survey scale and set the min and max values to 1 and 10. This way, you get the numbers lined up without the fuss of absolute positioning.