How to dynamic populate dropdown options (Cascading dropdown) in form

Developer Support APIs & Integrations
1

Hello there,

We have a Hubspot form like the following (the date and time picker can be a dropdown if needed),

iqoOopi_0-1673910405180.png
iqoOopi_0-1673910405180.png533×367 59.6 KB

My use case is:

When the user selected a suiteType, then we want the form to call our own API to fetch all the available dates for it and populate the dropdown options for date dropdown.

Then if the user selected a date, we want the form to call our API again to fetch all the available time slots for that day and populate the options for time dropdown.
Wondering how can I do that?

Thanks,

Henry

2

Hi, @iqoOopi :waving_hand: To clarify, are you using an embedded HubSpot form? Or are you using a custom form and the Forms API to submit your form data?

I don’t know for sure, but I am wondering what is possible with a custom form, some async JavaScript, and the Forms API? Hey, @tominal @jpsanchez @MatthiasWeber, do you have any JavaScript magic you can share?

Thank you very much! — Jaycee

3

Hi Jaycee,

I actually write my own in a custom module with <form> tag. Guess I’m not using the build-in “Form” function at all.
To add to my question, when calling our own API, it will require getting a token first. So guess can’t do client side

4

Hi @iqoOopi will be form public available? If yes, why a token then?

In any case, getting a token in JavaScript should also be possible.

So, everyhting could be handled in a client side JS. Or do I miss something?






Gemeinsam für digitales Unternehmenswachstum! Wir glauben an Human Centric, Online-Marketing mit Inbound und Digitale Geschäftsprozesse.
Sie wollen mit Ihrem Unternehmen weiter kommen? Mit den Digital-Webern wird der Weg einfacher!


@iqoOopi

5

Hi Matthias,

Yes, the form is publicly available. But we don’t want any direct access to our endpoint even if they are “gets”. This could protect us from DDos attacks or unauthorized API calls for data reading.

By saying this, we would like a server-side call to our API so that no token will be inspectable via dev tools.