Telephone Input For Contact Form 7

الوصف

Telephone Input For Contact Form 7 is a free WordPress plugin that adds a professional international telephone input field to any Contact Form 7 form. The field features a searchable, mobile-friendly country flag dropdown that automatically detects and prefixes the correct international dial code — giving your forms a polished, globally-ready phone number input with zero configuration.

Standard Contact Form 7 phone fields accept any text, leaving you with inconsistent, unformatted, and unvalidated phone number submissions. This plugin solves that problem by replacing the plain phone input with a fully-featured international telephone field backed by the intl-tel-input library — the same library trusted by thousands of production applications worldwide.

Requires Contact Form 7 to be installed and activated on your WordPress site.

📄 Documentation | 🔴 Live Demo | ⭐ Get Pro Version

Why Use Telephone Input For Contact Form 7?

A plain text phone field collects messy, inconsistent data. Users format numbers differently, forget dial codes, or enter invalid values — and you end up with unusable contact data.

This plugin replaces the guesswork with a structured international phone input. The country flag dropdown makes selecting a country instant and intuitive. The dial code is captured automatically and included in your email notification alongside the number the user typed. Phone format validation catches invalid entries before they reach your inbox. The result is cleaner leads, fewer invalid submissions, and a more professional form experience for your visitors.

Free Version Features

• International Telephone Input Field — Add a fully functional international phone number input to any Contact Form 7 form using the built-in tag generator. No coding required. The field is registered as a native CF7 form tag and works exactly like any other CF7 field.

• Country Flag Dropdown — The telephone field includes a searchable flag dropdown listing all countries in the world. Users can scroll or type to find their country, making it fast and intuitive on both desktop and mobile.

• Automatic Dial Code Detection — When a user selects a country from the dropdown, the international dial code for that country (e.g. +1 for the US, +44 for the UK, +91 for India) is automatically detected and stored. The dial code is captured separately and merged with the phone number before it is sent in your email notification.

• Dial Code Included in Email Notification — The submitted phone number is automatically combined with the selected country dial code and delivered as a single formatted value in your Contact Form 7 email notification via the standard mail tag. No manual formatting or extra steps required.

• Enable / Disable Country Dropdown — Control whether the country flag dropdown is displayed on the telephone field. When enabled, users can select their country and the dial code is applied. When disabled, the field renders as a plain international telephone input without the dropdown.

• Phone Number Format Validation — Submitted values are validated on the server side against an international phone number pattern. Only properly formatted phone numbers (digits, spaces, hyphens, parentheses, and a leading + for the country code) are accepted. Invalid entries trigger a CF7 validation error and prevent form submission.

• Required Field Support — Mark the telephone input field as required using the standard CF7 required field option. If a user submits the form without entering a phone number, submission is blocked and a validation error is shown.

• Custom Field ID — Assign a custom HTML ID attribute to the telephone input field for targeting with CSS or JavaScript.

• Custom CSS Class — Add one or more custom CSS class names to the telephone input field for flexible front-end styling without modifying plugin files.

• Mail Tag Integration — Include the submitted phone number (with dial code) in your CF7 email notifications by inserting the corresponding mail tag into the Mail tab — the same way any other CF7 field works.

• Mobile Friendly — The country flag dropdown and telephone input are fully responsive and work smoothly on smartphones and tablets of all screen sizes.

• Works with All Recent CF7 Versions — Tested and compatible with Contact Form 7 up to version 7.0

• Powered by intl-tel-input — Built on the widely trusted intl-tel-input JavaScript library, which is used in production by thousands of web applications globally.

Pro Version Features

The following features are available exclusively in the Pro version. They appear as disabled fields in the CF7 tag generator for free users.

Upgrade to Pro →

• Only Countries (Country Whitelist) — Restrict the country dropdown to show only a specific set of countries. Enter a hyphen-separated list of country codes (e.g. us-ca-gb) and the dropdown will display only those countries. Ideal for businesses that serve specific regions or want to limit submissions to particular markets.

• Preferred Countries (Pin Countries to Top) — Specify one or more countries that should appear at the top of the dropdown list above all other countries. Enter country codes (e.g. us-gb) to promote them to the top position for faster selection. Perfect when your audience is primarily from one or two countries but you still want the full global list available below.

• Exclude Countries (Country Blacklist) — Hide specific countries from the dropdown entirely. Enter a hyphen-separated list of country codes (e.g. us-ca) and those countries will be removed from the list. Useful for compliance requirements, regional restrictions, or simply keeping the dropdown tidy for your target audience.

Perfect For

• Contact and enquiry forms that serve an international audience
• Lead generation forms where a valid phone number is required
• Booking, reservation, and appointment request forms
• eCommerce checkout or order enquiry forms
• Event registration forms collecting attendee contact details
• Any Contact Form 7 form where a clean, validated, international phone number field is needed

How It Works

1. Install and activate the plugin (Contact Form 7 must already be active).
2. Open any Contact Form 7 form in the editor.
3. Click Add Form Tag and select telephone_input from the list.
4. In the tag generator panel, configure your field:
   • Tick This is a required field if the phone number must be entered before submission
   • Enter a Name for the field (used for the mail tag)
   • Optionally set a custom ID or Class
   • Check or uncheck Enable dropdown to control whether the country flag picker is shown
5. Click Insert Tag to add the shortcode to your form.
6. Go to the Mail tab and insert the mail tag (e.g. [your-phone-field]) wherever you want the phone number to appear in the notification email. The value will include the selected dial code and the number the user typed.
7. Save the form. The international telephone input is now live on your site.