Contact Form 7: вставка и обработка поля с Google Maps в форме WordPress

Добавление поля с картой Google Maps в форму Contact Form 7 позволяет пользователям выбрать точку на карте, а вам — получить координаты для дальнейшей обработки. Это особенно полезно для заказов с указанием адреса, бронирований, заявок на выезд и прочих сценариев, где важно точное географическое положение.

Почему стоит использовать Google Maps в формах Contact Form 7

Стандартные поля ввода адреса часто вводят пользователя в заблуждение или приводят к ошибкам. Интерактивная карта упрощает выбор места, снижает ошибки и улучшает пользовательский опыт. Кроме того, координаты можно использовать для автоматического расчета расстояний, интеграции с CRM и построения маршрутов.

Однако Contact Form 7 из коробки не поддерживает интеграцию с картами, поэтому нужно добавить кастомный код и внешние скрипты.

Добавление поля с Google Maps в форму Contact Form 7

Для начала создадим базовую форму с полями:

• Адрес (текстовое поле)
• Координаты (скрытое поле для latitude и longitude)
• Само поле с картой

В редакторе формы Contact Form 7 добавьте:

[text* your-address placeholder "Введите адрес"]
[hidden your-lat]
[hidden your-lng]
<div id="cf7-google-map" style="width: 100%; height: 300px; margin-top: 10px;"></div>
[submit "Отправить"]

Поле your-address для текстового адреса, your-lat и your-lng — скрытые поля, куда мы будем записывать координаты с карты.

Подключение скрипта Google Maps и кастомного JavaScript

В файл вашей темы (например, functions.php) добавим код для подключения API Google Maps и кастомного скрипта:

function contactform7ru_enqueue_google_maps() {
    if (is_page() || is_single()) {
        wp_enqueue_script('google-maps-api', 'https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ&libraries=places', array(), null, true);
        wp_enqueue_script('cf7-google-maps', get_stylesheet_directory_uri() . '/js/cf7-google-maps.js', array('jquery', 'google-maps-api'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'contactform7ru_enqueue_google_maps');

Обратите внимание, что ВАШ_API_КЛЮЧ нужно заменить на ваш собственный ключ API Google Maps, который можно получить в Google Cloud Console.

Код JavaScript для инициализации карты и записи координат

Создайте файл cf7-google-maps.js в папке js вашей темы и вставьте туда следующий код:

jQuery(document).ready(function($) {
    var map;
    var marker;
    var input = document.querySelector('input[name="your-address"]');
    var latField = document.querySelector('input[name="your-lat"]');
    var lngField = document.querySelector('input[name="your-lng"]');

    function contactform7ru_initMap() {
        var center = { lat: 55.751244, lng: 37.618423 }; // Москва по умолчанию
        map = new google.maps.Map(document.getElementById('cf7-google-map'), {
            zoom: 10,
            center: center
        });

        marker = new google.maps.Marker({
            position: center,
            map: map,
            draggable: true
        });

        google.maps.event.addListener(marker, 'dragend', function() {
            var pos = marker.getPosition();
            latField.value = pos.lat();
            lngField.value = pos.lng();
            contactform7ru_geocodePosition(pos);
        });

        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);

        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                alert('Адрес не найден');
                return;
            }

            map.setCenter(place.geometry.location);
            map.setZoom(15);

            marker.setPosition(place.geometry.location);

            latField.value = place.geometry.location.lat();
            lngField.value = place.geometry.location.lng();
        });
    }

    function contactform7ru_geocodePosition(pos) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ latLng: pos }, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    input.value = results[0].formatted_address;
                }
            }
        });
    }

    contactform7ru_initMap();
});

Обработка координат и адреса на стороне сервера

После отправки формы данные your-lat, your-lng и your-address будут доступны в $_POST. Для примера добавим фильтр, который будет сохранять эти данные в мета-записи поста или отправлять на email.

add_action('wpcf7_mail_sent', 'contactform7ru_save_location_data');
function contactform7ru_save_location_data($contact_form) {
    $submission = WPCF7_Submission::get_instance();
    if (!$submission) {
        return;
    }
    $data = $submission->get_posted_data();

    $lat = isset($data['your-lat']) ? sanitize_text_field($data['your-lat']) : '';
    $lng = isset($data['your-lng']) ? sanitize_text_field($data['your-lng']) : '';
    $address = isset($data['your-address']) ? sanitize_text_field($data['your-address']) : '';

    // Пример: добавим к письму координаты и адрес
    $mail = $contact_form->prop('mail');
    $mail['body'] .= "\n\nКоординаты: {$lat}, {$lng}\nАдрес: {$address}";
    $contact_form->set_properties(array('mail' => $mail));
}

Дополнительные советы и рекомендации

1. Для улучшения UX можно добавить валидацию на обязательность выбора точки на карте.

2. Если у вас много форм с картами, вынесите скрипты и стили подключения в отдельный плагин или используйте условную загрузку.

3. Для интеграции с CRM, Google Sheets или другими сервисами используйте Webhook и фильтры Contact Form 7 для передачи данных.

4. Следите за лимитами API Google Maps, чтобы избежать блокировок.

Использование плагинов для упрощения работы с картами

Если не хотите писать код, можно воспользоваться плагинами с интеграцией Google Maps и Contact Form 7, например:

• Contact Form 7 Google Maps — добавляет карту и координаты в форму.
• Clearfy Pro — плагин для оптимизации и расширения Contact Form 7, среди функций есть поддержка дополнительных полей и интеграций.

Но собственный код дает максимальную гибкость и контроль.

Итог

Вставка поля с Google Maps в Contact Form 7 — это мощное решение для повышения качества сбора геоданных от пользователей. В статье мы рассмотрели полный цикл: от добавления поля и карты, через JavaScript для выбора и автозаполнения адреса, до обработки данных на сервере. Такой подход улучшит UX и позволит эффективнее работать с заявками.