How to implement CMS-driven checkbox groups in a form with pre-filled data from existing deals? Answered

Post author
Joseph Bates

Hello and good morning! I'm developing an on boarding form with a few checkbox group questions. 1st, I'm jazzed to see you have a solution for that. BUT, before I try to implement it, I wanted to double check with you to be sure this would also work with a CMS driven list of options? For example, I have a CMS collection of about 53 conditions (illnesses) to choose from. I want to be sure that your solution will recognize each induvial option and provide the appropriate label/data/choice? Is this going to require any additional JS to make it work?

https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExOG45ZTFsYjVxZ25oYW1weXNpODc3bmtrbnl[…]yaHRjMiZlcD12MV9naWZzX3NlYXJjaCZjdD1n/vZ1HGwbp3198A/giphy.gif

Comments

8 comments

  • Comment author
    Ilze Berenfelde

    Thank you for the question! I tried to figure out how to ask the same 😁

    0
  • Comment author
    A J

    Hey Joseph Bates & Ilze Berenfelde, just tested this out, it works perfectly fine with Webflow CMS without requiring any custom JS.

    You just need to place the checkbox fields inside the collection item that you are intending to show and add values from the CMS like any other dynamic setting and it should work. Just fill it once and all items should populate automatically in terms of label and value.

    I tested this with a dummy Product CMS that I have in Webflow. Results are shown in screenshot below.
    Hope this helps.

    0
  • Comment author
    Joseph Bates

    😍 THANK YOU SO MUCH!! I've got to run soon, but plan to work on this today!

    0
  • Comment author
    Samuel Powell

    Hi all, I wonder if anyone can help with this. As you can see in this template, when a user goes to edit a deal they created, the input fields are populated with the info from the item’s CMS. Can a similar thing be done with checkboxes? Can checkboxes be pre-filled with data from CMS switches for example?

    https://webflow.com/made-in-webflow/website/crm-app-template

    0
  • Comment author
    Raquel Lopez

    If you save the value as a boolean, you should be able to fill the checkboxes with the CMS data.

    Check out this article that shows you how to use checkboxes from Memberstack into Webflow components https://docs.memberstack.com/hc/en-us/articles/9061247720731-Single-Checkboxes

    And let us know if you have any doubts

    0
  • Comment author
    Samuel Powell

    Thanks for this Raquel Lopez, but I’m looking to take the value from the CMS in the same way that the input fields do in the above example.

    So let’s say there are 3 checkboxes and the user selected 1 and 2 when they created the deal, and that data is saved in the CMS, I’m wondering how I can pre-fill those checkboxes when the user opens the modal to edit the deal.

    0
  • Comment author
    Raquel Lopez

    You'll have to use javascript for it. I will recommend to use a custom element or a embed code with the checkbox as an HTML so it behaves like a HTML checkbox input. Webflow checkbox component works a little bit different, by also having to add a class to represent the checked state 😞

    <script>
     document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById('idOfYourCheckbox').checked = 
    {{WEBFLOW_CMS_CHECKBOX_VALUE}}; 
    // add a line per each checkbox 
    }) 
    </script>
    0
  • Comment author
    Samuel Powell

    Thanks Raquel Lopez! Got it working. Read-only link for anyone interested: https://preview.webflow.com/preview/cms-checkboxes-3f6933?utm_medium=preview_link&utm_[…]1e19c82cdf&pageId=676059b98158f8d31b42278b&workflow=preview

    0

Please sign in to leave a comment.