Checkbox ID generation from Webflow Collection

Design help Custom code
1

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Working on site for a client involving checkboxes for users to click in regarding catering meal choices for a local restaurant. Once they choose, they submit the form to the manager (currently sending to my email: cfranklin1218@gmail.com). I created collections for editing ease for the catering manager. Tried to link checkboxes and checkbox item names to collection fields. I’m using custom attributes: data-item-id = checkbox-ID GR-plated-dinner and data-item-id = checkbox-text GR-plated-dinner. I also created a code embed element in the page’s form with JS eventListener code I found on the web.

Want to have the submitted form show only the clicked checkboxes that show “true” in the email form AND show the name of the checkbox instead of just “field 3; 4; 5”; etc. Curently it shows all choices (both true and false) and doesn’t list names of items chosen - just field numbers

Is there a way to only show checkboxes for those checked and list each checked item’s name on the submitted email form without third-party software?

I created a sample collection and collection page “Collection Page Sample” for this testing purpose.

I’ve been with Webflow for many years and your team is always great about helping me with these type of questions. I have a CMS plan and am paying a monthly fee.

I’m hoping you can access the Collection Page sample with the link I provided, but created a link block on the homepage as an alternative in case you need it.

This is the final step before I can send the site and proposal to may client.

1 Like
2

Hi Christine,

You have a few options here but supposing you’re wanting to use Webflow’s native email notifications, where’s no native way to exclude unchecked checkboxes. There are some script hacks you can use to delete all unchecked checkboxes just before the submit (messy).

Or, you could use my Toggle Checkbox code component. It automatically suppresses itself from the form when it’s toggled off, for exactly the reason you suggested.

Regarding the field 4 problem it sounds like you’re not setting the Name of the checkbox. Fix that setting for each checkbox and you should be good.

image
image405×269 46.8 KB

You can get it here for free.

Sygnal Forms

It’s also CMS-bindable.

1 Like
3

@Chrissie1218

You can achieve the desired result using a simple custom approach:

  1. Avoid using native checkboxes.
    Instead, use a Text Block inside your CMS Collection List and style it with a span element to visually mimic a checkbox. This gives you full design and data control.

  2. Add a hidden textarea field (e.g., “Meal Choices”) inside your form.
    When a user clicks on one of the styled “checkbox” items, use JavaScript to add or remove that item’s label from the hidden textarea value.

This way, the form submission will include only the selected item names in the email — exactly as they appear on your site.

1 Like