How can I create a text style checkbox for my Webflow contact form that allows for multiple options and connects to the contact form as an element/text field?
TL;DR
- Add checkboxes with the same name attribute for grouping and style their labels as text buttons using custom classes and interactions.
- Hide the default checkboxes, add a hidden text input to store selected values, and use JavaScript to update it dynamically based on checkbox selections.
To create a multi-option checkbox field styled like text buttons in a Webflow contact form and ensure it connects properly as a form field, use custom-styled checkboxes and map all selections to a text field on form submission.
1. Add Checkbox Elements to Your Form
- Drag a Form Block into your page if one isn’t already there.
- Inside the form, add one Checkbox Group (or use multiple Checkbox elements).
- Name each checkbox accordingly (e.g., "Option 1", "Option 2").
- Give each checkbox the same Name attribute (e.g.,
interests[]) so they group logically, especially if exporting form data.
2. Style Checkboxes as Text Buttons
- Select each checkbox’s Label wrapper (inside the checkbox element).
- Hide the default checkbox: Set the actual checkbox input’s display to none.
- Style the label as a text button:
- Add padding, border, background color, and rounded corners.
- Use a Combo Class to apply a "selected" style when checked.
- Use Webflow interactions or custom JavaScript to toggle the “selected” class on click.
3. Add a Hidden Text Field to Store Selections
- Add a Text Field (input) to the form and name it (e.g.,
selected-options). - Set this text field’s Display to None so users don’t see it.
- This field will store all selected checkbox values combined into a single string.
4. Add JavaScript to Sync Checkbox Selections
- Before the
</body>tag in Page Settings or using an Embed element, include custom script: - On checkbox change, collect all checked values.
- Join them with commas or slashes into a single string.
- Update the hidden text field’s value dynamically.
Example logic (simplified):
- On checkbox change, get all the checked boxes with
querySelectorAll('input[name="interests[]"]:checked'). - Read their
.value, join them with,. - Set the
valueof the hidden text input (e.g.,document.getElementById('selected-options')) to that string.
5. Test the Form
- Publish your site and run a test submission.
- Check the form data in your email notification or Webflow Forms to verify the correct options appear in the hidden field as expected.
Summary
To style and submit a multi-select checkbox input like text buttons in Webflow, use hidden checkboxes with styled labels, sync selected values into a hidden text field using custom JavaScript, and ensure that hidden field is part of your form submission.