Webflow sync, pageviews & more.
NEW

How can I change the value of a checkbox in Webflow to display the label name instead of True?

TL;DR
  • Add a custom attribute to the checkbox (e.g., data-label-value with desired label text).
  • Use JavaScript to replace the checkbox value with the custom attribute value on form submit.
  • Optionally, add a hidden field with the same name for unchecked state handling.

When you submit a checkbox field in Webflow Forms, its value defaults to true (when checked). To make the form submit a custom value like the label name, you'll need to modify the checkbox using custom attributes and a bit of JavaScript.

1. Replace Default Value with Label Text

Webflow checkboxes submit a static value (true) by default. To override this:

  • Select the checkbox element in the Designer.
  • In the Element Settings panel, under Name, give your checkbox a field name (e.g., newsletter-subscription).
  • The value submitted is always true unless you change it using code.
  • Add a custom attribute:
  • Name: data-label-value
  • Value: The label text you want to submit (e.g., Subscribe to Newsletter)

This does not change functionality yet—it just stores the label text.

2. Use JavaScript to Replace the Value on Submit

You’ll need to inject JavaScript into the page to modify the checkbox’s value when the form is submitted:

  • Open the Page Settings (for the page with the form).

  • Scroll to Before tag and paste this script (no tags shown due to formatting rules):

    Replace checkbox-name with the Name attribute of your checkbox (e.g., newsletter-subscription).

    ```

    ```

  • Publish your site for the changes to take effect.

3. (Optional) Add Hidden Input for Unchecked State

Checkboxes don't submit any value when they are unchecked. If needed, create a hidden input with the same name and default value to catch the "off" case.

  • Add a hidden input field right before the checkbox.
  • Set its Name to match the checkbox (e.g., newsletter-subscription).
  • Set its Value to Not Subscribed or similar.
  • When the checkbox is checked, it will override the hidden field's value in the submission.

Summary

To show the checkbox label as the submitted value in Webflow Forms, use a custom attribute to hold the label text and run a short JavaScript snippet on form submission to update the checkbox’s value. Optionally, add a hidden field for handling unchecked cases.

Rate this answer

Other Webflow Questions