How can I create a form in Webflow with information from my CMS, and set unique names for all the fields to avoid issues with checkboxes displaying incorrectly and receiving random field numbers in emails?

TL;DR
  • Nest your form inside a Collection List Item to bind form fields to CMS data using dynamic values.  
  • Manually set unique Name attributes for all form fields, especially checkboxes, using CMS fields like slugs or IDs.  
  • Use hidden fields to pass CMS identifiers (e.g., product ID, slug) into the form with explicitly named fields.  
  • Prevent checkbox issues in emails by avoiding duplicate field names and using CMS-linked naming conventions.  
  • Apply Conditional Visibility to customize form fields per CMS item and streamline the user experience.

To ensure your Webflow form uses CMS content and has stable, unique field names, you need to combine Webflow’s CMS collection features with good form field configuration.

1. Bind Form Fields to CMS Data

  • Use a Collection List to output forms dynamically for each CMS item.
  • Nest the form inside a Collection List Item, so each form can access data from the corresponding CMS entry.
  • Use CMS bindings in text/content elements (like labels or hidden fields) to include dynamic values (e.g., product titles, IDs, or emails).

2. Set Unique and Static Field Names

  • For each input, checkbox, or select field, manually set the Name attribute in the Element Settings Panel — Webflow automatically generates random names if you don’t.
  • Avoid using the same field name for multiple inputs (especially checkboxes or items in collection lists) unless they're intended to group.

Example:

  • Instead of using “checkbox”, name it something like interest-option-cmsItemName or include a CMS field like slug or ID in the name.

3. Use Hidden Fields for CMS Identifiers

  • Add a Hidden Input inside the form to capture the CMS item’s unique data like:
  • Product ID
  • Slug
  • User Email (if known)
  • Set the field name manually (e.g., cms-id) and bind its value to a CMS field via Settings > Get Text from CMS.

4. Prevent Checkbox Display Issues in Emails

  • Checkbox issues usually arise when:
  • Fields share the same name unintentionally
  • Webflow generates default field names like Field 12Field 13, etc.
  • To fix this:
  • Ensure each checkbox has a unique Name
  • Use consistent naming conventions tied to CMS fields (e.g., option-{{slug}})
  • Optionally, give each checkbox a unique ID, though this isn’t required for email behavior.

5. Use Conditional Visibility to Tailor Forms

  • If certain fields should appear only for specific CMS items:
  • Use Conditional Visibility rules based on CMS fields.
  • This helps reduce form complexity and invalid inputs.

Summary

To avoid checkbox rendering problems and ensure meaningful email data in Webflow forms tied to CMS content, set explicit, unique Name attributes for all fields, especially when generating multiple forms via a Collection List. Bind form content directly from the CMS and use hidden fields where necessary to pass item-specific data.

Rate this answer

Other Webflow Questions