To create a form in Webflow with information from your CMS and set unique names for all the fields, follow these steps:
1. Set up your CMS collection: Firstly, make sure you have a CMS collection set up with the desired fields that you want to populate in your form. Add fields such as name, email, message, etc.
2. Design your form: Use the Webflow Designer to create your form by dragging and dropping form elements like text fields, checkboxes, and submit buttons onto your form container.
3. Bind your form fields to CMS: Select each form element (input, checkbox, etc.) and open the element settings panel. Under the "type" dropdown, choose "Form field" and select the corresponding field from your CMS collection. Repeat this process for each form field, ensuring they are bound to the appropriate CMS fields.
4. Customize form field names: By default, Webflow automatically generates field names for the form elements. To set unique names, manually change the name attribute for each input field. For example, you can set the name attribute for a text field to "firstName" instead of its auto-generated value. This will help avoid issues with checkboxes displaying incorrectly and receiving random field numbers in emails.
5. Styling and validation: Customize the styling and layout of your form to match your desired design. Additionally, you can set up validation rules for form submission, such as requiring certain fields to be filled out or validating the email format.
6. Set up form submission actions: Once your form design is complete, you'll need to set up the form submission actions. Webflow allows you to send form submissions to an email address, an external CMS, or even trigger custom interactions. To send form submissions via email, navigate to the Project Settings panel and choose the "Forms" tab. Enter the desired recipient's email address under the "Email notifications" section.
7. Test your form: Before launching your live form, thoroughly test it to ensure everything is functioning correctly. Submit the form, check if the data is correctly fetched from the CMS, and verify that form submissions are sent to the designated email address.
By following these steps, you can create a form in Webflow that fetches information from your CMS collection and sets unique names for each field. This approach helps prevent issues with checkboxes and ensures that the form data is correctly captured and displayed.