Suggesting telephone country codes

If you make a phone call to a foreign number, you need a particular code added in front of the number. It is called the international dialing code or telephone country code, a one- to three-digit code starting with a plus (+) sign.

People do not always remember their country code correctly, so you may need to assist them when you ask for their international telephone number. Fortunately, with the help of the Listo plugin, you can easily implement telephone country code suggestions in Contact Form 7.

Screenshot of telephone number input field with country code suggestion

Step 1: Embedding a data list

First, you need to embed a datalist HTML element that represents the telephone country code options into the page that includes the contact form. To do this, install the Listo plugin and simply put the following shortcode into the page content:

[datalist type="telephone_country_codes"]

A datalist element can be placed anywhere under the body element. I recommend you put the datalist shortcode next to the contact form block.

Screenshot of WordPress post editor screen

Step 2: Referring to the data list

A datalist element itself is invisible. It only appears when being referred to from a text field. To refer to a datalist element, specify the list HTML attribute in the referring text field.

Part of the form-tag types that Contact Form 7 provides support the list option, which represents the value of the list attribute. As we are talking about telephone number input, let us use the tel form-tag type. Try inserting the following snippet into the form template:

<label> Your international telephone number (optional)
[tel your-tel list:listo-telephone-country-codes] </label>

Since the telephone_country_codes data list’s default id attribute value is listo-telephone-country-codes, you set the list:listo-telephone-country-codes option here.

That is all. Now you have a telephone number input field with a nice-looking country code suggestion.