How to Add Country List in Contact Form 7 Plugin

Contact Form 7 is one of the most popular plugin on the WordPress repository. At the time of writing this article, this plugin has crossed 5+ million active installations. One of the reasons for this immense popularity is the plugin’s add-on. The author of this plugin has developed several supported add-ons for Contact Form 7 plugin. Using these add-ons, we can easily add new features to the existing contact form.

As an example, let’s say you want to add a Country field in your contact form. There are around 200 countries in the world and adding all of them statically is not an easy task.

To resolve this problem, the author of the Contact Form 7 plugin has created a Listo plugin. Using the Listo plugin you can add a Country field to your contact form in a matter of minutes. Let’s see how to add a country list in the Contact Form 7 plugin.

Why need a Listo Plugin?

Sometimes website owners want to get a user’s location along with other details from a contact form. To get the location of a user, your contact form should have a Country field. This field will be a dropdown from which users can pick up their country.

By default Contact Form 7 plugin provides a select tag for adding the dropdown values. This select tag is fine if you have limited options. When it comes to adding a country list one can’t use this option because of a long list.

The Listo plugin makes this task super easy. Just add one statement and you are done.

Add Country List to Contact Form 7 Plugin

Install and activate the Listo plugin. This plugin has no setting page. Just plug it in and you can use its features.

Next, to insert a country list you need to add attributes for the select tag. Head over to the edit screen of your contact form and add the select tag as follows.

[select your-country data:countries]
select-tag

Here data:countries do magic. It populates a list of countries in your dropdown. Now check your contact form. It should have the country dropdown.

country-dropdown

How to Set the Default Country

Let’s say you want to keep a specific country selected by default. In that case, you need to add a jQuery code to your JS file. First, get the option value of a country you need to set as default. A user can take this value from inspecting the dropdown and copy it from the option value.

inspect-dropdown

Next, using the class wpcf7-select you can set the default country selected in the contact form. Add the below code to your JS file.

jQuery(function($) {
    $('.wpcf7-select').val("India"); // here we set India as a default country
});

That’s it! Now if you check your contact form you should see ‘India’ as a default selected country in the country dropdown.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

2 thoughts on “How to Add Country List in Contact Form 7 Plugin

  1. Hello there,

    thanks for the amazing tip!

    I wonder if you know how to change colours on the box? the background colour if my site is dark and atmo I cannot read the text while is not selected and when is chosen. only when the dropdown box is open.

    Thanks,
    Anna

Leave a Reply

Your email address will not be published.