Dynamic drop-down menu data from a database


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.


any comments on this?


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.


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?


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.


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.


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


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


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

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


" 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"\>;