Dynamic drop-down menu data from a database


#1

We would like to have drop-down menus that are populated with data dynamically from a database. See example here in “API Demo” section: http://www.carqueryapi.com

Would this be possible to implement in Unbounce. It is basically a JSON call to their API that pulls in data for the drop-down menu.


#2

any comments on this?


#3

Hi Paul and Tom (and Tom, sorry we missed this for so long) - everything in the carquery set-up can be done in Unbounce. The javascript that needs to go in the head of the page can be inserted as a custom Javascript element (http://support.unbounce.com/entries/5…). And you can build out the dropdowns via a custom HTML element.


#4

We have implemented this solution using exactly what Quinn has described above. The only (small) issue is that the drop down is not part of the form data as it is a separate HTML element. We have solved this by creating a hidden field and populating it based on the selection in the drop down list using javascript, after the drop down selection changes. Is there a better way to do this?


#5

Hi Tom - there won’t be a way to pull the dynamic fields into an Unbounce form, so manipulating a hidden field via Javascript the way you’re doing it sounds like the best solution.


#6

We also use CarQueryAPI and use custom HTML for the form. It no longer uses the Unbounce form and we had to make a custom thankyou page, but it works for what we need. If anyone ever needs a sample form code let me know.


#7

If you could post a custom form… just a sample using YEAR, MAKE, MODEL, TRIM, (carqueryAPI) as dropdowns… would be very appreciated. THANK YOU!


#8

This might be a good special use-case we could cover. Would you be interested in sharing how you did it with the Community?


#9

Sure – Here is a sample page:  http://unbouncepages.com/carquerytest/

Here are the three custom elements you’ll need on your Unbounce page:

#1

" rel="nofollow" target="\_blank"\>http://www.carqueryapi.com/js/jquery.min.js"\>; " rel="nofollow" target="\_blank"\>http://www.carqueryapi.com/js/carquery.0.3.3.js"\>;

#2

#3