How do I add a checkbox to a Webflow form?

Put the checkbox inside the form

A checkbox lets a visitor select a choice, and more than one checkbox can be selected at the same time. Webflow's checkbox article says every form input of this kind has to sit inside a form block. A box placed beside the form is not part of that form.

Open the Add panel. Scroll to Forms. Drag Checkbox into the Form wrapper, on the canvas or in the Navigator. The wrapper is the element that already holds the inputs and the submit button. If the box lands outside that wrapper, drag it in before you change settings.

Keep the text that tells the visitor what the box means. The forms article says field labels help people who use screen readers, so do not delete them.

Example: a contact form needs one line, 'I agree to the privacy policy.' Drag one Checkbox into that form, under the email field and above the submit button. That single box is the whole choice. You do not need a select list for a yes that stands alone.

Name the field and set Required

Select the checkbox. Open Checkbox field settings in the Element settings panel. You can also double-click the element, or click the settings icon beside its label.

Set Name to something you will recognize in the submission data. Webflow recommends a name for that reason. 'Privacy agreement' is clearer than the default when you later read a row of submissions. The name is not the sentence on the canvas. The canvas text is what the visitor reads. The name is what you use to find the field.

Required sets the checkbox as a required form field. The checkbox article uses an 'I read and agree to the Terms and Conditions' box as the example. The forms article says Required means the form cannot be submitted unless the field is filled. Turn Required on for that agreement. Leave it off for an optional newsletter opt-in that should not block the message.

Start checked makes the box begin in the checked state. Leave it off for a terms box. If the box is already selected, a visitor can submit without ever clicking it, and Required will not stop them because the field is already filled. Use Start checked only when the selected state is the honest default, and you are comfortable with that. An optional product update can start unchecked so silence means no.

Style the box and the checked state

Style, in the same Checkbox field settings, is Default or Custom. Default keeps the ordinary checkbox. Custom lets you design the element in the Style panel. To go back, choose Default under Style.

After Custom is on, select the checkbox on the canvas and open the States menu in the Selector. The checked state is available for checkboxes and radio buttons that have custom styling turned on in Element settings. That state is how the box looks when it has been selected. Set the fill or the border there. The resting look stays on None, the default state.

The checkbox article says the focused state of checkboxes and radio buttons comes with a default blue shadow so people using arrow keys can see where they are in the form. Leave that shadow in place. A custom fill on the checked state does not replace the need for a visible focus.

Custom is a setting on the element, not only a class. If you reuse the same class on another checkbox, Webflow says to select Custom under Style on that new checkbox too. Copying the class without that setting leaves the new box on the default style.

Choose None in the States menu when you finish, or the canvas keeps showing the checked look.

Use a separate checkbox for each choice

Each checkbox has its own name and its own required setting. Two boxes are two fields. A visitor can check both, one, or neither, unless you marked one of them required.

Example: a project inquiry asks 'Website' and 'Ongoing edits' as services the visitor might need. Add two checkboxes inside the form. Name one Website and the other Ongoing edits. Leave both optional if either answer is enough. The submission can include both, because checkboxes allow more than one choice.

A single choice from a list is a different control. Radio buttons share a Group name and accept one option. A select field is the dropdown. Use those when the visitor should pick one budget range. Use checkboxes when each line can be on or off by itself. Do not mark five checkboxes required to imitate a 'pick one' question. Required on each box would demand every box.

Publish and read the submission

Form handling runs on the published site. Publish, open the live page, and submit once with the agreement box checked and a subject you can spot, such as Checkbox test. Then open Site settings, Forms, and find that test. The name you set should identify the checkbox in the submission data.

Send a second test with the required box cleared. The form should not complete. If it does, Required is off, or Start checked left the box selected. Open Checkbox field settings and read both controls before you change the label text.

If the field never appears in the submission, the checkbox is outside the Form wrapper, or this page was not in the publish. Select the form in the Navigator, confirm the checkbox is inside the wrapper, and publish again.

If the custom checkmark looks right in the Designer and plain on the live site, Custom may be off on the element that actually published. Select that checkbox, set Style to Custom, confirm the checked state still has the fill you wanted, and publish once more. Keep the focus shadow so a keyboard user can still see the box.