How to Add a Country Dropdown List to Your WordPress Forms
There are only 3 steps in this tutorial. We’re also going to show you an optional step if you want to customize the list.
Here are the steps we’re going to walk through:
- Install the WPForms Plugin
- Add a Country Dropdown List to Your Form
- Customize the Countries in Your Dropdown List [Optional]
- Publish Your Form on Your Website
Let’s start by setting up the WPForms plugin.
Step 1: Install the WPForms Plugin
To start, install and activate the WPForms plugin.
If you need a little help with this, read this easy guide on how to install a plugin in WordPress.
You’ll also need a form ready that you can edit as we step through the tutorial. You can create a simple contact form quickly now, or edit an existing form.
When you have your form ready, let’s continue.
Step 2: Add a Country Dropdown List to Your Form
Now we’re ready to add the list of countries to the form.
In the WordPress dashboard, click WPForms » All Forms. Hover your mouse over the form you want to add the dropdown to, then click Edit.
adding dynamic field choices to your form.
And that’s it! Now you have a country dropdown on your WordPress form ready for your visitors to use.
If you’re interested in making your forms more relevant to your local area, you can also add a contact form map with a WordPress plugin.
Create Your WordPress Form Now
Next Tip: Get Your Visitor’s Location Automatically
Did you know that WPForms can automatically display your visitors’ location on a map?
You can activate geolocation on all of your forms with 1 click. Check out this guide on how to track user locations with WordPress form submissions to set this up.
We also compiled a list of the best geolocation plugins for WordPress.
Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes all Fancy Fields and offers a 14-day money-back guarantee.
If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.
Multi-level Country State City cascading select in Wordpress
One of the most common features that you can find within an internationalweb project is the classic multi-levelcascading Country -> State/Region-> City select.
Assuming that for any kind of problem there are always "N" solutions, I don't want to present this one as the top onebut rather as [imho]a goodone to achieve the goal with a scalable and easy to manage approach.
Several days ago I faced a problem with WordPress CMSand amulti-levelcascading [Country>>State/Region >>City] select implementation for an international B2B proj.
Unfortunately I didn't find any good plugin going into the right direction so, after groping in the dark for a couple of days, I decided to write a 'possible' solution by myself.
This solutionis a combination of PHP, jQuery, Ajax andJSON [to load related sub-items without a page reload], DB MySql and, of course, WordPress.
It's not a plug-in but a set of functions placed into function.php theme file.
First of all you need to buyand download the [ Country, State, City ] DB from here[this tutorial is designed for the$9really basic DB version].
Since it's not for free I can't provide for the Database with this article. Sorry :-P
Ok! Assuming that you have bought it and you have already integrated within your MySql DB, let's move to the next step.
What we need now is to create a custom js file [if you want of course] otherwise you can use any other js file of your own theme.
In case, to integrate the new js file you need to use the following snippet of code:
/**
* Proper way to enqueue scripts and styles
*/
function wpjobus_scripts[] {
wp_enqueue_script[ 'countryField', get_template_directory_uri[] . '/js/countryField.js', array[], '1.0.0', true ];
}
add_action[ 'wp_enqueue_scripts', 'wpjobus_scripts' ];
countryField.js
/* JS File for Country Field */
[function[$] {
var country = $["select[name*='countryCode']"];
var state = $["select[name*='stateCode']"];
if [country.length] {
country.change[function[] {
var $this = $[this];
get_states[$[this].val[], function[response] {
var obj = JSON.parse[response];
var len = obj.length;
var $stateValues = '';
$["select[name*='stateCode']"].empty[];
$["select[name*='cityNameAscii']"].empty[];
for [i = 0; i
var ajaxurl = "";