How to create dynamically populated cascading dropdown-lists for Contact Form 7

Something I had to deal with quite often lately, is creating dynamic drop-down lists in WordPress, like this:

As always, I like to use the WordPress plugin Contact Form 7 as a basis for all my form-driven projects. The reason is that Contact Form 7 has a robust validation mechanism. It is very lightweight, yet powerful and easy to use for both intermediate and advanced users. And lastly, because there is a great many plugins that build on top of CF7. These plugins allow you to turn CF7 in exactly the solution you need for your project. Nothing more, nothing less. But enough praising CF7, let’s build a form already!

The first thing you will need to do is get your data-set. For this example I will use a CSV file that is structured like this:

Let’s save this file as make-model-year.csv to our /wp-content/uploads/ folder.

Server side script

Now, let’s write our server side function, that will be called trough AJAX. You can add this function at the bottom of your theme’s functions.php file:

Server side script (PHP). Add this to functions.php

Don’t worry, if this does not make much sense to you yet. The function by itself will not do much, except read the CVS data, and returning it to the client side script (JavaScript).

The client side script

You should add this after the form is loaded. Typically you would create a custom page-template where you would include the form, or you could use an action hook to output the script, or add it to a seperate .js file. But for simplicity’s sake, we’ll just add it to footer.php, right before the </body> tag. So without further ado, here’s the script.

Client side script (JavaScript). Add this to footer.php

The Form

And the contact form 7 form itself? Simple! just add 3 select boxes with the names “makes”, “models” and “years”.

[select makes]
[select models]
[select years]

Done!

  • Daniel Johari

    Hi,

    thank you for this handy explanation. Do you experienced any problems with the call of the admin-ajax.php file in the js? My Server keeps firing a generic 500 error (failed to load resource) .

    Thank you for any suggestions,
    Daniel

    • bdwm

      might be a memory problem. If you are loading a really long CSV file, it might be better to add the data in your database and make your ajax function pull the information trough a MySQL query instead. Alternatively you could increase your PHP memory limit. Here’s an interesting thread that may help you: https://github.com/woocommerce/woocommerce/issues/8889

  • Akshay Vaikunth

    Hi bdwm,

    Thank you so so much for making ajax in wordpress look so simple. I was literally struggling for a month and was trying really hard to drag myself through this hard learning process.

    You just mentioned that its possible to add the client side script using action hooks. Will it be possible to shed some light on this? I am using the same footer file for many of my pages as the page template kinda remains the same on my website. So adding the client side script to the footer file For me it would be easier to use hooks or shortcodes instead.

    Thanks a lot in advance!