Streaming live at 10am (PST)

Formatting checkbox like premade div box (with interactions)


#1

Hey guys

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.

  1. 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)

  2. 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.

thanks!

.


https://preview.webflow.com/preview/inkfndry?preview=26bcfd6d07cd5a400b5b3f8d2e097811


Here is my public share link: LINK
(how to access public share link)


#2

Hi again, @bwalls1992

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.

Hope I was able to explain.

Cheers,
Anna


#3

Excellent! One day i wish to be as webflow equipped as you @sabanna


#4

:slightly_smiling: You are welcome. And thanks for kind words


#5

how did you design those clickable checkboxes ? I want to design something like below but I dont know how to do it :sweat:


#6

Hi @Noor_Shihab Do you still require some help with these boxes?


#7

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.


#8

Sorry for the late answer , been too busy with exam , I 'll try in the next to days and show up the result.. thanks for replay


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.