Как превратить Contact Form 7 в магическую машину для редиректов!

Есть контакт! Вы сделали красивую форму на своем сайте с помощью Contact Form 7, и ваш посетитель решил оставить свои контакты. А что дальше? Конечно, нужно отправить его в нужное русло. Например, на страницу благодарности или показать куда пойти и что купить. Если вам когда-либо казалось, что редирект после отправки формы — это игра «угадай, сработает ли сегодня?», то вы пришли по адресу. Сейчас я покажу вам, как правильно воспитать свои контактные формы, чтобы они знали куда перенаправить пользователя.

А главное — без лишних танцев с бубном!

Скрипт для редиректа контактных форм в зависимости от ее id

Как сделать редирект в Contact Form 7 с помощью JavaScript

Вот наш чудо-код, который позволяет навести порядок с редиректами. Контактные формы можно отправлять куда угодно после успешной отправки — как настоящих взрослых!

// Ждём, когда кто-то решится заполнить форму.
document.addEventListener('wpcf7mailsent', function(event) {
var formId = event.detail.contactFormId; // Получаем ID формы

// Смотрим, что же это за форма, и куда ее отправлять
switch (formId) {
    case 1234: // У этой формы ID 1234
        window.location.href = 'https://example.com/thank-you-page-1';
        break;
    case 5678: // Эта форма с ID 5678
        window.location.href = 'https://example.com/thank-you-page-2';
        break;
    default: // Остальные формы не должны остаться без внимания
        window.location.href = 'https://example.com/thank-you-default';
        break;
}

}, false);

Интеграция редиректа Contact Form 7: Варианты на любой вкус

Итак, как же внедрить этот код в ваш сайт? Вы можете это сделать разными способами. Разумеется, каждый метод по-своему уникален и удобен. Давайте рассмотрим их вместе:

1. footer.php

Этот метод подойдёт для тех, кто любит класть все важное в подвал. Классический вариант — добавить код в footer.php вашей темы. Просто откройте этот файл, и перед закрывающим тегом </body> вставьте ваш JavaScript. Это как приклеить записку «Забери куртку» на дверь перед выходом. Но будьте аккуратны! При обновлении темы весь код улетучится как прошлогодний снег.

2. functions.php

Чувствуете, что в подвале слишком много ценного кода? Тогда используйте functions.php вашей темы. Здесь мы можем подключить JavaScript через специальный хук. Этот метод выглядит профессиональнее и меньше страдает от последствий обновлений темы.

Пример кода для functions.php:

function custom_redirect_script() {
    echo "<script>
        document.addEventListener('wpcf7mailsent', function(event) {
            var formId = event.detail.contactFormId;
            switch (formId) {
                case 1234:
                    window.location.href = 'https://example.com/thank-you-page-1';
                    break;
                case 5678:
                    window.location.href = 'https://example.com/thank-you-page-2';
                    break;
                default:
                    window.location.href = 'https://example.com/thank-you-default';
                    break;
            }
        }, false);
    </script>";
}
add_action('wp_footer', 'custom_redirect_script');

3. Создаем плагин с нуля

О, вы хотите сделать что-то настоящее и выдающееся? Тогда создадим небольшой плагин. Просто создайте файл .php, например contact-form7-redirect.php и поместите его в папку /wp-content/plugins/. Вот пример кода для вашего новенького плагина:

<?php
/*
Plugin Name: Contact Form 7 Redirect Magic
Description: Плагин для редиректа форм Contact Form 7
Version: 1.0
*/

function cf7_redirect_script() {
    echo "<script>
        document.addEventListener('wpcf7mailsent', function(event) {
            var formId = event.detail.contactFormId;
            switch (formId) {
                case 1234:
                    window.location.href = 'https://example.com/thank-you-page-1';
                    break;
                case 5678:
                    window.location.href = 'https://example.com/thank-you-page-2';
                    break;
                default:
                    window.location.href = 'https://example.com/thank-you-default';
                    break;
            }
        }, false);
    </script>";
}
add_action('wp_footer', 'cf7_redirect_script');
?>

Активируйте плагин — и ваш сайт теперь может самостоятельно решать, куда отправить посетителя после заполнения формы!

4. Используем плагины для интеграции кода

Хотите что-то проще? Используйте плагин для вставки JavaScript, например, «Insert Headers and Footers» или «WPCodeBox». «Insert Headers and Footers» — это простой плагин, который позволяет быстро добавить JavaScript или другие коды в header или footer вашего сайта без необходимости изменять файлы темы вручную. «WPCodeBox» — более мощный инструмент, который предоставляет расширенные функции по управлению кастомным кодом, включая библиотеку готовых сниппетов, управление кодом для разных условий и интеграцию с облачным хранилищем. Они позволяют добавить любой кастомный код в header или footer вашего сайта, и вам не нужно переживать о том, что что-то пойдёт не так при обновлении темы.

«А что насчёт готовых решений?»

Да, готовых решений тоже хватает. Вот пара плагинов, которые позволяют настроить редирект для Contact Form 7:

1. Contact Form 7 Redirection: Удобный плагин для настройки перенаправлений. Сразу после успешной отправки формы вы можете указать нужный URL, на который будет отправлен пользователь.
2. Contact Form 7 Success Redirects: Более сложное решение, которое позволяет настроить редиректы в зависимости от определённых условий, например, на основе введённых данных.

Почему JavaScript-код лучше, чем готовые плагины?

• Ваше железо скажет вам спасибо. Ещё один плагин — это ещё один кусочек RAM, который испаряется как чай на солнце. Зачем перегружать сайт лишними плагинами, когда можно просто вставить несколько строк кода?
• Легкость и гибкость. Вам не нужно устанавливать ещё один плагин, который будет потреблять ресурсы вашего сайта. Просто добавляете пару строк JavaScript, и всё работает как часы.
• Минимум сторонних зависимостей. Сколько плагинов вы уже установили на свой сайт? Ещё один — и вы рискуете добавить проблем. Используя собственный код, вы полностью контролируете его работу.
• Гибкость и настраиваемость. Хочется сделать редирект только для некоторых форм? Нет проблем! Хочется, чтобы в зависимости от введённых данных редирект был разный? С нашим подходом можно всё. В отличие от готовых плагинов, тут вы пишете правила так, как вам нужно.

В заключение

Редиректы — это важно. Они помогают направить вашего посетителя туда, где вы хотите его видеть после успешного действия. Это может быть страница благодарности, специальное предложение или просто место, где у него не останется вопросов, а лишь желание воспользоваться вашим предложением.

Не забывайте — хороший редирект это как знак «Выйти здесь» в метро. Это позволяет пользователю двигаться дальше по вашему сайту с минимальными потерями времени и максимумом удовольствия. Так что добавляйте редиректы и делайте это с улыбкой, потому что ваши посетители будут благодарны вам за это (ну или, по крайней мере, не будут плутать).