How to Add Country List in Contact Form 7 Plugin

Contact Form 7 is no doubt one of the most popular plugins 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 plugins add-on. The author of this plugin has developed several supported add-ons for Contact Form 7 plugin. Using these add-ons, one can easily add new features to the existing contact form.

Let’s say you want to add a Country field in your contact form. There are around 200 countries in the world and adding these countries statically is not an easy task.

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

Having said that, let’s see how to add a country list in Contact Form 7 plugin.

Why need of 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 form-tag for adding the options. But this select tag is fine when you have limited options. When it comes to adding a country list one can’t use this option easily because of a long list.

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 separate setting page. Just plug it in and you can use it’s features.

Next, to insert a country list you need to add attributes for select form-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 does the 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’ one can set the default country selected in the contact form. Add the below code in 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. Required fields are marked *