Form Improvements: Checkboxes and Label Snapping

After many requests, we’re happy to announce that checkboxes are finally available as an element in Webflow! You can find the new Checkbox element in the Forms section of the Add tab:

Also improved is the relationship between labels and their corresponding fields, which helps with building accessible forms. If you drag a Label before an Input / Text Area / Drop Down, Webflow will automatically assign an id attribute to the input field, and create a for attribute on the Label, so the resulting code will look something like this:

<label for="email-address">
<input class="w-input" name="email-address" id="email-address" placeholder="Enter your email">

Once this link is made, users who click on the label will be automatically focused on the corresponding field. This is especially useful for checkboxes since clicking on the entire text label toggles the checkbox, instead of having to precisely click on just the tiny checkbox itself.

While this change doesn’t really affect how your site looks, it’s more functional and generally the RightWayToMakeWebForms™ :smile:


I’m sure you’re saying “Yeah, yeah, that’s nice, but where are my radio buttons?!?” They’re nearly done, and should be landing in the next few days! :smiley:

6 Likes

@callmevlad
Nice. Checkboxes are cool!
Just tested them… But came across some sort of problem.

I want a few checkboxes next to each other (float left). But clicking one of the labels will always check the first checkbox in the row. Clicking on the checkbox works fine.

See my test: http://t-business.webflow.com/project-form

Works perfectly fine for me…

@callmevlad you should also add a input text outside of a form. We want to be able to create search fields easily…

Hey Rowan this is because all your checkbox labels are set to “for: checkbox”. If they all have unique names (click on checkbox and go to element settings) they they will behave as expected. The “for” attribute is supposed to set automatically, so this may be a bug. We’re looking into it.

@rowan - I’m looking into this now, looks like a bug.

Yeah setting unique names fixed it I think!

@rowan, for some reason I’m not able to reproduce the bug where the checkboxes get non-unique IDs. Do you have a sense of how you were able to get that to happen? Thanks!

Hmm… I used the most straightforward way:
Insert a checkbox. Set settings (float left), and copy paste that element. Nothing more?

Ah, copy-paste is the key! Working on fixing that :smile:

EDIT: Ok, should be fixed now. @rowan, can you give it another shot? Thanks!

1 Like

@bartekkustra @cyberdave - we just added the ability to “detach” form elements from form blocks :smiley:

To add a form element that’s not required to be inside a Form Block, hold down Option (OSX) or Alt (Windows) right before dragging a form element from the Add Tab. Let me know if that’s what you guys were looking for!

1 Like

Excellent Vlad, thank you !

thanks!!! That’s awesome :slight_smile:

Am having a similar problem with radio buttons. I set two radio buttons to the same group, but the first radio get selected when I click on the label for the second.

Also went through the copy-paste route. Grouped, and regroup… still no luck. Please help.

A post was split to a new topic: How tomake a form to appear and disappear based on the status of the check box

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
Please create a new linked topic if you have further questions.