I am currently trying to format my checkbox form like my previously made div box with an interaction, however there are a few things that are playing up.
I can’t seem to duplicate div “row122” nested in “stylecontainer” (formwrapper) div and it creates a new “stylecontainer” and completely new form wrapper, formatting it as the shown picture, whereas i want it to appear like the below (nice even 4x4 box)
The white text is no longer appearing on click within my “text white” which is nested within “background colour div”
Basically, i want to style the checkbox form exactly like my clickable divs, so if there is another way to do this, then i open to suggestions.
The Form wrapper by itself is a div (it is just pre-formatted). The element, that you gave class “row122” is an actually FORM.
By pre-formatted Webflow settings you can’t have several Forms inside the Form wrapper and you can’t have form elemnts (inputs, labels,checkbox, etc.) outside the form.
So, when you duplicate the row122 (which is Form) it automatically creates new Form wrapper+Form inside.
I would suggest using actual div inside the form, give it class row122 and then add checkboxes and everything else there.
I’m playing with something similar for an insurance website, so far I made the actual checkboxes “invisible” by changing the opacity. Then create a class for the checkbox labels and adjust the padding to move them over the “invisible checkbox”. You could add a border to the labels to make them look like buttons as you have shown in your design.