How can I submit a form with CMS-field checkboxes and save the selected fields as a multi-reference field to a separate CMS collection in Webflow?

To submit a form with CMS-field checkboxes and save the selected fields as a multi-reference field to a separate CMS collection in Webflow, you can follow these steps:

1. Create your CMS collections: First, you need to create two CMS collections in Webflow: one for the form submissions and another for the options selectable in the checkboxes.

2. Add multi-reference field: In the collection that will hold the form submissions, add a multi-reference field. This field will store the selected options from the checkboxes.

3. Add form to your site: Next, go to your Webflow project and add a form element to the page where you want to display the checkboxes. You can customize the form inputs and styles as per your requirements.

4. Add checkbox fields: Within the form, add checkbox fields for each option you want to offer the user. Connect these checkbox fields to the CMS collection that contains the options.

5. Configure form submission: Select the form element and go to the Element Settings panel on the right-hand side. Configure the form submission settings according to your preferences. Make sure to connect the form to the CMS collection where you want to store the form submissions.

6. Custom code: To capture the selected checkboxes and save them as a multi-reference field in the separate CMS collection, you will need to add some custom code to your project. Here's an example of how the code could look:

// Get form submission dataconst form = document.querySelector('#your-form-id');form.addEventListener('submit', (event) => {  event.preventDefault();  // Get the selected checkboxes  const checkboxes = form.querySelectorAll('input[type="checkbox"]:checked');  const selectedOptions = Array.from(checkboxes).map((checkbox) => checkbox.value);  // Create/update the multi-reference field in the separate CMS collection  const submissionData = {    multiReferenceField: selectedOptions,  };  fetch(`https://api.webflow.com/collections/your-collection-id/items/your-item-id`, {    method: 'PUT',    headers: {      Authorization: 'Bearer your-api-token',      'Content-Type': 'application/json',    },    body: JSON.stringify(submissionData),  })    .then((response) => response.json())    .then((data) => {      // Handle success or display a success message to the user      console.log(data);    })    .catch((error) => {      // Handle error or display an error message to the user      console.error(error);    });});

Replace #your-form-id, your-collection-id, your-item-id, and your-api-token with the appropriate values for your Webflow project.

1. Publish and test: Finally, publish your website and test the form to ensure that the selected checkboxes are being saved as a multi-reference field in the separate CMS collection.

By following these steps, you can submit a form with CMS-field checkboxes and save the selected fields as a multi-reference field to a separate CMS collection in Webflow.

Additional Questions:

1. How do I create a multi-reference field in Webflow CMS?
2. What is the purpose of custom code in Webflow?
3. Can I connect multiple forms to the same CMS collection in Webflow?