Can I automate the deduction of the "spots left" custom field in my CMS collection in Webflow after each form submission?

Published on
September 22, 2023

Yes, you can automate the deduction of the "spots left" custom field in your CMS collection in Webflow after each form submission. Here's how you can achieve this:

  1. Create a Collection in your Webflow project: Go to the CMS tab in the Webflow Designer and create a new Collection for your spots. Add a custom field named "spots_left" to track the available spots.

  2. Design your form: Create a form in your Webflow project where users can submit their information to reserve a spot.

  3. Set up form submission interaction: Select the form and go to the Interactions panel. Create a new form submission interaction that will trigger after the form is submitted successfully.

  4. Custom code for updating "spots left": In the form submission interaction, you will need to add custom code to update the "spots_left" field value. Use JavaScript to retrieve the current value of "spots_left" and subtract one from it. Then, use the Webflow API to update the CMS Collection item with the new value.

    ```javascript
    const form = document.getElementById('my-form'); // replace with your form ID
    form.addEventListener('submit', async (e) => {
    // Prevent form submission
    e.preventDefault();

    // Retrieve current value of "spots_left"
    const response = await window.fetch('/your-collection-slug', {
    method: 'GET',
    });
    const data = await response.json();
    const currentSpotsLeft = data.items[0].spots_left;

    // Subtract one from "spots_left"
    const newSpotsLeft = currentSpotsLeft - 1;

    // Update CMS Collection item with the new value
    const itemId = data.items[0]._id;
    const updateResponse = await window.fetch(/your-collection-slug/${itemId}, {
    method: 'PUT',
    body: JSON.stringify({ spots_left: newSpotsLeft }),
    });
    });
    ```

  5. Publish your site and test: Once you've implemented the above steps, publish your site to see the changes in action. Test the form submission and check if the "spots_left" field in your CMS Collection gets updated accordingly.

This automation will ensure that each time a user submits the form, the "spots_left" field in your CMS Collection will be automatically updated to reflect the available spots.