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.

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.

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.