CF7-Country-Phone-Field
CF7 Country Phone Field
A powerful WordPress plugin that enhances Contact Form 7 with a country phone input field. Displays country flags and codes dynamically, with custom search functionality.
Bd Country Flags Contact Form 7 Plugin
Version: 2.0
Developer: Barış Dayak
Official Website: Barış Dayak Official Website
Features
- 🌍 Country Phone Codes with Flags: Displays country flags and corresponding phone codes from over 250 countries.
- 🔍 Smart Country Search: Instantly filter countries while typing in the search box.
- 📱 Fully Responsive Design: Works perfectly on mobile, tablet, and desktop devices.
- 🌐 Default Country Setting: Customize the default country code (e.g., +1 for the USA or +90 for Turkey).
- ✨ Automatic Email Integration: Automatically includes the selected country code and phone number in email submissions via Contact Form 7.
Installation
1.Download the Plugin: Clone or download this repository from GitHub. 2.Upload to WordPress: Upload the plugin folder to your WordPress installation under /wp-content/plugins/. 3.Activate the Plugin:Go to the WordPress Admin Panel and activate the plugin under the Plugins menu.
Plugin Description
Bd Country Flags Contact Form 7 is a WordPress plugin that enhances Contact Form 7 by adding a custom phone input field with country flags. It provides a more professional and user-friendly experience for form submissions.
Note !
✨ Form Integration Guide
To integrate the phone number input field with country flags into Contact Form 7 forms, you need to add the following HTML structure inside your form template:
<label>Phone Number</label>
<div class="select-box">
<div class="selected-option">
<div>
<span class="iconify"></span>
<strong>+1</strong>
</div>
<input type="tel" name="phone-number" placeholder="Phone Number" required>
</div>
<div class="options">
<input type="text" class="search-box" placeholder="Country Search...">
<ol></ol>
</div>
</div>
💻 Add PHP Code to functions.php
To ensure proper backend processing of the phone number input field in Contact Form 7, add the following code to your theme's functions.php file:
<?php
// Register the shortcode for Contact Form 7
add_shortcode('country_phone', 'cf7_country_phone_shortcode');
function cf7_country_phone_shortcode($atts) {
$atts = shortcode_atts(
array(
'name' => 'phone-number', // The name attribute of the form input
),
$atts,
'country_phone'
);
// Retrieve form data after submission
$submission = WPCF7_Submission::get_instance();
if ($submission) {
$posted_data = $submission->get_posted_data();
// Return the phone number if available
if (!empty($posted_data[$atts['name']])) {
return sanitize_text_field($posted_data[$atts['name']]);
}
}
return 'Phone number not provided';
}
// Force shortcode processing in form elements
add_filter('wpcf7_form_elements', 'do_shortcode_for_cf7');
function do_shortcode_for_cf7($form) {
return do_shortcode($form);
}
// Append shortcode result to the email body
add_filter('wpcf7_mail_components', 'cf7_add_country_phone_to_mail', 10, 3);
function cf7_add_country_phone_to_mail($mail_components, $contact_form, $instance) {
$shortcode_output = do_shortcode('[country_phone name="phone-number"]');
// Add phone number to the email body if available
if (!empty($shortcode_output) && $shortcode_output !== 'Phone number not provided') {
$mail_components['body'] .= "\nCountry Code and Phone: " . $shortcode_output;
} else {
$mail_components['body'] .= "\nCountry Code and Phone: Phone number not provided";
}
return $mail_components;
}
?>
Plugin Features
1. Country Codes and Flags
- Integrated list of 250+ country codes and flags.
- Users can easily select their country from a dropdown menu while entering their phone number.
- The selected country code and flag are automatically updated in the input field.
2. Default Country Code Setup
- Developers can set a default country code (e.g., +90 for Turkey).
- The country code is automatically prefilled in the phone input field.
4. Admin Email Notifications
- The submitted phone number, including the country code, is sent to the admin email upon form submission.
- Phone numbers are displayed clearly in the email content.
5. Dynamic Search Feature
- Search the country list instantly using the search box.
- Filter countries by name in real-time while typing.
6. Full Customization Support
- User-friendly interface with fully customizable design.
- Developers can easily adjust CSS and JavaScript for personal modifications.
7. Responsive Design
- Responsive design that works perfectly on all devices.
- Fully compatible with mobile, tablet, and desktop screens.
👨💻 About Barış Dayak
Barış Dayak is an experienced web developer specializing in WordPress web design and custom plugin development. He has contributed to numerous professional projects, helping businesses succeed online with innovative digital solutions.
🚀 Created by Barış Dayak - WordPress Expert.