Detecting & submitting checked radio/checkbox form values that are based on CMS items

[ogrady (Stephen O'Grady)]

I’ve done some digging through the forum but can’t find something that fits this specific need. Here goes…

I’ve got two CMS collections “Ad Types” & “Podcasts”. “Ad Types” will remain static but “Podcasts” will be populated with new CMS items regularly. My goal is to surface these CMS items from each of these collections and allow users to select from these items in their form submit action.

I’m using javascript adapted from this forum post to capture the dynamic values:

<script type="text/javascript" language="JavaScript">
    <!--
    document.write('<input ');
    document.write('   type="hidden" ');
    document.write('   name="Campaign Podcast" ');
    document.write('   value="$('input[type="checkbox"]:checked').val();">');
    //-->
    </script>

NOTE: The above code is for the Podcasts CMS Collection

So far, I’ve been able to capture and send based on the custom JS but on form submit I cannot capture & send the selected/checked values. Instead, I get:

The idea is to have the selected CMS item captured and submitted in the form submit action. Any guidance is appreciated. Thanks in advance!

---

Read only link: https://preview.webflow.com/preview/podcast-delivery?utm_medium=preview_link&utm_source=designer&utm_content=podcast-delivery&preview=2fac6c9fbac18882a4c787abf1640f86&pageId=5e3b95ab6d0b47d096ab0891&itemId=5e406e0a5ed356791d5a034c&mode=preview

Domain: https://podcast-delivery.webflow.io/

[Siton_Systems (Ezra Siton)]

Where is the form (Add specific page link)?

In general you should know javascript to solved this issue + maybe change webflow tree structure = This is more a freelancer mission (Hard to give you solution her).

Example for select menu -or- radio:

On webflow:
Put inside your form embed-html - add feild code - and for this feild add any value you want (From Javascript var for example). So first solve your idea/code outside of webflow (Codepen for example).

[ogrady (Stephen O'Grady)]

Ah, good catch @Siton_Systems. Appreciate you taking a look.

The form is accessible when clicking the “Create Campaign” button:

High-level Webflow tree structure:

I’ve added the javascript (via hidden embed) and can send custom values on submit:

The problem is that I need to capture the selected value as opposed to the last value in the list.

I’m thinking this is mostly a problem that can be solved by javascript (I’m still new to the game ) so if you have any advice I’m all ears!

[magicmark (Mark Willis)]

Hey hey

You can capture dynamic content in forms no problem at all. Take a look at the + Add Field link in the top right-hand corner of the HTML Embed Editor. If you’re on a dynamic page, you can add custom values using that link, and then hide the embed if needed.

I have a more basic version setup here, feel free to clone/copy how you need to:

Hope that helps!

Mark

[ChrisDrit]

Lots of great answers here, let me add one more!

Starting at the 24:04 minute mark you can find a video walk through with descriptions along the way:

How To Create Personalized Content for Logged In Members with Memberstack

hi all Just finished creating a 30 minute step-by-step screencast walking through how to setup a Webflow site, with MemberStack allowing logged in members to personalize their dashboards content. Visitor signs up and becomes a member New member selects some screening options Based on selections member is shown relevant, personalized articles Full control of your sites design in Webflow. Using the Webflow CMS to store your member accounts. Using MemberStack to provide members only acc…

[ogrady (Stephen O'Grady)]

Thanks for sharing that @magicmark! I’ve been able to submit the dynamic values without any issue. The challenge is I can’t submit the selected value when I surface CMS items as radio buttons or checkboxes. It always submits the last CMS item that appears in the list even if it isn’t selected.

[ogrady (Stephen O'Grady)]

You know your way around Webflow forms @ChrisDrit appreciate you taking a look!

Have you tried pulling CMS items into a form using radio buttons/checkboxes? Every time I submit a form that’s setup like this it submits the last item that appears even if it isn’t selected.

[ChrisDrit]

Thanks @ogrady

Starting at the 24:04 minute mark you can find a video walk through with descriptions along the way

Checkout the link I posted above at that minute marker, you’ll see an example of me using 3 checkboxes, submitting the form, Zapier picks it up and updates a live cms item from which ever combination (or none at all) is checked.

Let me know if you have any problems/questions, happy to answer them!

[ogrady (Stephen O'Grady)]

Okay, I’ll give the video another viewing. When I first watched it I’m not certain it addressed my specific use case but I’ll be a bit more meticulous in watching.

Any chance you’re up for a zoom call so I can dive into some of my specifics?

Thanks again @ChrisDrit!

[ogrady (Stephen O'Grady)]

Pretty sure I found the main difference between your video and the way I’ve set things up @ChrisDrit:

The checkbox options seen here are static values that filter separate CMS items :

…where as I’ve got dynamic checkbox (and radio button) options that are based on what I’ve got stored in a CMS collection:

For whatever reason radio buttons & checkbox form fields that are based on CMS collections always send the last item that appears even though the user is selecting other items.

It’s got me scratching my head quite a bit but I’ll take a look at what @PixelGeek did in this video to see if it works for me! If you’ve got any ideas or if this is suddenly an itch you need to scratch let’s chat!

[Alex_Avery (Alex)]

I was running into the same issue. Try setting the name as a dynamic value as well, using the +Add Field button.

You’ll see in this Zapier screenshot that I was able to view all checkbox values.

[MiaBaker]

Did you ever solve this problem? I’m running into the exact same issue. The last radio box is selected in my list.