Почему важно автозаполнять поля формы по IP-адресу
Автозаполнение полей в формах Contact Form 7 существенно улучшает пользовательский опыт, ускоряя процесс заполнения и снижая количество ошибок. Одним из эффективных способов является использование IP-адреса пользователя для определения его географического положения и автоматического подставления данных, например, страны, города или часового пояса.
Это особенно полезно для сайтов, где важна локализация, например, для интернет-магазинов, сервисов с региональными настройками или при организации событий.
В данной статье мы рассмотрим, как реализовать автозаполнение полей Contact Form 7 на основе IP-адреса с помощью стороннего API и собственного PHP-кода.
Как получить данные геолокации по IP для Contact Form 7
Для определения местоположения по IP-адресу можно использовать публичные API. Одни из популярных — ip-api.com, ipgeolocation.io или ipinfo.io.
Для примера возьмём бесплатный API ip-api.com, который не требует ключа и имеет простой JSON-формат ответа.
Запрос для получения данных выглядит так:
https://ip-api.com/json/{IP}Где {IP} — IP-адрес пользователя. Если указать json без IP, API определит IP автоматически.
Пример ответа API:
{
"status": "success",
"country": "Russia",
"countryCode": "RU",
"region": "MOW",
"regionName": "Moscow",
"city": "Moscow",
"zip": "101000",
"lat": 55.7558,
"lon": 37.6173,
"timezone": "Europe/Moscow",
"isp": "ISP Name",
"org": "Organization",
"as": "AS1234 ISP AS",
"query": "123.123.123.123"
}Интеграция автозаполнения в Contact Form 7 с помощью PHP
Для того чтобы передать полученные данные в форму, можно использовать фильтр wpcf7_form_tag или динамические поля Contact Form 7. Однако проще всего — добавить скрытые поля с нужной информацией и подставлять их через JavaScript, получая данные с сервера через ajax-запрос.
Рассмотрим пример с использованием AJAX-запроса к собственному PHP-обработчику, который будет возвращать данные геолокации по IP.
1. Добавляем скрытые поля в Contact Form 7
[hidden cf7ru_country id:cf7ru_country]
[hidden cf7ru_city id:cf7ru_city]Их можно разместить в любой форме, требуется только указать id для удобства доступа через JS.
2. Регистрируем AJAX-хук в WordPress
add_action('wp_ajax_cf7ru_get_geo', 'cf7ru_get_geo_callback');
add_action('wp_ajax_nopriv_cf7ru_get_geo', 'cf7ru_get_geo_callback');
function cf7ru_get_geo_callback() {
$ip = $_SERVER['REMOTE_ADDR'];
$response = wp_remote_get("http://ip-api.com/json/" . $ip);
if (is_wp_error($response)) {
wp_send_json_error(['message' => 'Ошибка запроса']);
}
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
if ($data && $data['status'] === 'success') {
wp_send_json_success([
'country' => sanitize_text_field($data['country']),
'city' => sanitize_text_field($data['city'])
]);
} else {
wp_send_json_error(['message' => 'Данные не найдены']);
}
wp_die();
}3. Добавляем JavaScript для заполнения полей
В файле темы или через плагин подключаем скрипт, который после загрузки страницы отправит ajax-запрос и заполнит скрытые поля.
document.addEventListener('DOMContentLoaded', function() {
var countryField = document.getElementById('cf7ru_country');
var cityField = document.getElementById('cf7ru_city');
if (!countryField || !cityField) return;
fetch('/wp-admin/admin-ajax.php?action=cf7ru_get_geo')
.then(response => response.json())
.then(data => {
if(data.success){
countryField.value = data.data.country || '';
cityField.value = data.data.city || '';
}
})
.catch(console.error);
});Отображение и использование автозаполненных данных в письмах и на сайте
После того как данные подставлены в скрытые поля, вы можете использовать их в теле письма Contact Form 7, добавив тег [cf7ru_country] и [cf7ru_city] в шаблон письма.
Это позволит автоматически получать информацию о местоположении пользователя, что может быть полезно для аналитики, персонализации сообщений и улучшения службы поддержки.
Также вы можете использовать эти поля для создания условий в PHP или JavaScript, например, чтобы показывать пользователю специальные предложения для его региона.
Дополнительные советы и плагины для расширения функционала
Плагины для геолокации и Contact Form 7
Если не хочется реализовывать всё вручную, можно использовать плагины, которые расширяют Contact Form 7 возможностями геолокации:
- Contact Form 7 - Geolocation — простой плагин, добавляющий автоматическое определение местоположения пользователя через браузер и подставляющий эти данные в поля.
- CF7 Smart Grid Design Extension — помогает создавать более сложные формы с динамическими полями и интеграцией с геолокационными сервисами.
Интеграция с WPShop
Для сайтов на WordPress с обширным функционалом и необходимостью интеграции с другими сервисами можно обратить внимание на продукты WPSHOP. Например, плагин Clearfy Pro поможет оптимизировать работу сайта и ускорить загрузку скриптов, что полезно при использовании внешних API.
Заключение
Автозаполнение полей Contact Form 7 на основе IP-адреса — мощный инструмент для улучшения UX и повышения конверсии. В статье мы рассмотрели, как быстро и эффективно реализовать эту функцию с помощью бесплатного API и собственного кода. Вы можете адаптировать пример под свои нужды, добавляя другие поля, например, часовой пояс, регион или язык пользователя.
Если хотите сделать процесс проще, рекомендуем ознакомиться с готовыми плагинами и сервисами, а также обратить внимание на оптимизацию сайта с помощью решений от WPSHOP.