Populating Forms (select field / radio button) from CMS

Design help CMS
1

Hi there, hope you’re having a good day :slight_smile:

my client is offering educational courses and wants users to book them through a form.
On his current website users are able to select a course from a select field, a second select field automatically gets the matching course dates and times, allowing the user to select a specific date.
This functionality is provided by an iframe embed, which takes too long to load for users with a slow connection.
The selected fields are then sent with the rest of the customers data when submitting the form.
Here’s the current form: https://www.sela.info/kursanmeldung?KursangebotID=581000000088543

Is there a way to recreate this feature in webflow? I sadly couldn’t find someone with a similar problem in the forum, where the solution would apply to my situation.
Any help would be greatly appreciated.

(My second thought was to create a collection page for every course, and populate a select field / radio buttons with all the times, is there a way to implement that?)

I have all the course data, so creating new collections and configuring them however they’re needed isn’t a problem at all.

Thank you so much in advance,
Marc :slight_smile:

My Webflow page: https://preview.webflow.com/preview/test-zoho2?utm_medium=preview_link&utm_source=dashboard&utm_content=test-zoho2&preview=1218051fe85b81abb187f467a9da6dbb&mode=preview

2

@Marc_Finkmann this is doable.

Break this up into 2 forms. The first form is the course select dropdown. The second form is the course dates and times. Hide the second form (see how below).

For the first form…

  • Add a hidden field (from within the Embed element) with the users cms item id
  • User selects course
  • User submits form
  • Replace the form submit success message with an animated loading spinner

Using Zapier…

  • Have a Zapier zap for the Webflow app that triggers on a “Form Submission”
  • Create another zap step to “Update Live Item” for Webflow (from the users cms item id)
  • Update with the course selected

Reload your sites page with the form on it…

  • Using a small bit of custom code added the settings of this page (see below)
  • Reload the page
  • When you hide the second form, make sure to now have a Conditional Visibility filter setup for the second form element within Webflow
  • If the course is filled out for the cms item, show the second form
  • The second form should be populated from a “reference” cms item. Meaning each course has a “reference” in the cms to another collection of dates and times. This will populate the second form based upon whatever the user selected on the first form
var Webflow = Webflow || [];
Webflow.push(function() {
  $(document).on('submit', 'form', function() {
		setTimeout(function() { location.reload(true); }, 4000);  
  });
});
</script>
2 Likes
3

Thank you so much!! Your help means a lot!! :+1:

1 Like
4

Hi @ChrisDrit. I have implemented this form with the code outlined and it works perfect however only for 1 of the forms. I have included various of this forms with different tabs depending on the section that’s being updated. I find that only the first form works and the rest do not work. The information is perfectly sent to CMS, however for some reason the script is not pulling the new updated information from CMS and only works when I published the full site. Does this functionality works with various forms in the same site? Anything I might be doing wrong.

This is an example of one of the sites.

Also my public shared link:
https://preview.webflow.com/preview/brickdebt?utm_medium=preview_link&utm_source=designer&utm_content=brickdebt&preview=ba4cf197906a65bb1f6dca1c126c5d7b&pageId=5fd8abf10052d96f6e745fe3&itemId=5ffcb32ffe2b3b2e463ae1e9&mode=preview

Thanks for your support as always!

Best
Ruben

5

Oh boy…I wrote that some time ago :slightly_smiling_face: Sounds like the issue may be around the conditional visibility as it’s bound to a specific element (e.g. form).