Streaming live at 10am (PST)

Populating Forms (select field / radio button) from CMS

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

@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

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

1 Like