Dynamic drop-down menu data from a database

  • 13 September 2013
  • 8 replies
  • 71 views
T

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.

8 replies

P

any comments on this?

Quinn_Omori
Rank
Userlevel 3
Badge +1

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.

T

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?

Quinn_Omori
Rank
Userlevel 3
Badge +1

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.

Drivetrain

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.

N

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

J

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

Drivetrain

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

 


 

Reply


Terms & ConditionsCookie settings