Dynamic checkboxes in form with value of collection items [SOLVED]

Design help CMS
1

Hello,

I’m trying to create a form where I use CMS data to create checkbox options.
However, when I fill in the form, I get a “CMS-item”:true, instead of the values that are selected.

image
image807×450 23.8 KB

image
image1256×674 248 KB

image
Can someone help me out?

Already figured in out.

2

What was the solution

3

Hi Wells,

I added a collection list to the form.

image
image781×195 9.88 KB

which created this:

image
image893×597 349 KB

added some css to make it look better:

image
image978×617 313 KB

and another HTML embed with this:
<input type="hidden" name="Artworknames">

than I add custom code to set the values of the selected checkboxes inside the hidden input field, before the form is send:

var checkedValues = "";
$.each($(".checkboxcontainer), function(){
	// get value of each checkbox and add a "," to it.
	checkedValues += $(this).val().trim()+',';
});
  
    
//remove the last ","   
var values = checkedValues.replace(/,(\s+)?$/, '');
// set values in hidden input field.
$('input[type="hidden"]').val(values);

Which gets me this in my email:

image
image1390×62 5.95 KB

2 Likes
4

Well done! This seems to make sense, but I’m having a couple issues implementing.

Any chance you could send more detail of what this looks like in Webflow? I’m not understanding how .checkboxconatiner fits into this equation, and where you actually determine that these are not ALL values but ALL CHECKED values.

Thanks!

1 Like
5

I don’t understand where you put the “var checkedValues…” custom code. I tried it in the header and before body but none work. I still receive an email with true or false. I am not sure either what this .checkboxcontainer mean. It’s not referenced anywhere.

Anyway, I’m aware I’m not super advanced in code but this is why I use Webflow. It’d be amazing (and very Webflow-like) for a “simple” form like this to be doable natively without custom code.

6

@Timothy.Houle I just added an if to filter the values and only add to the array the checked ones:

 var checkedValues = "";
    $.each($(".checkboxcontainer"), function(){
      // get value of each checkbox and add a "," to it.
      if($(this).prop('checked') == true){
      checkedValues += $(this).val().trim()+',';
			}	
      
    });
    console.log(checkedValues);
    //remove the last ","   
    var values = checkedValues.replace(/,(\s+)?$/, '');
    // set values in hidden input field.
    $('input[type="hidden"]').val(values);
1 Like