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:
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
- 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:
- How do I create a multi-reference field in Webflow CMS?
- What is the purpose of custom code in Webflow?
- Can I connect multiple forms to the same CMS collection in Webflow?
