Contact Form 7 и полифил для старого браузера: как обеспечить работу форм в Internet Explorer

Почему Contact Form 7 может не работать в старых браузерах

Contact Form 7 — одна из самых популярных форм обратной связи для WordPress, использующая современные технологии HTML5 и JavaScript. Однако, при использовании в устаревших браузерах, таких как Internet Explorer 11 и ниже, формы могут работать некорректно или вообще не отправляться. Это связано с отсутствием поддержки некоторых современных API и элементов, например, таких как fetch, Promise, атрибуты required или placeholder в input-полях, а также с особенностями работы AJAX.

Проблемы проявляются в виде некорректной валидации, невозможности отправки формы, неработающей динамической загрузки файлов и прочих ошибок. Для решения этой задачи нужно добавить полифилы — специальные скрипты, которые эмулируют функциональность современных API в старых браузерах.

Как определить, что нужен полифил для Contact Form 7

Для начала стоит проверить, действительно ли проблема связана с браузером пользователя. Обычно, если форма не отправляется, и на клиенте в консоли браузера видны ошибки типа fetch is not defined или Promise is undefined, это явный признак отсутствия поддержки соответствующих функций.

Для проверки функционала можно использовать следующий код в консоли браузера:

if (typeof fetch === 'undefined') { console.log('fetch не поддерживается'); } else { console.log('fetch поддерживается'); }

Аналогично проверяется наличие Promise:

if (typeof Promise === 'undefined') { console.log('Promise не поддерживается'); } else { console.log('Promise поддерживается'); }

Если хотя бы одна из этих функций отсутствует — необходимо подключать полифилы.

Какие полифилы нужны для корректной работы Contact Form 7

Для Contact Form 7 в устаревших браузерах обычно нужно добавить следующие полифилы:

• fetch polyfill — современные версии Contact Form 7 используют fetch для AJAX-запросов. В IE fetch отсутствует.
• Promise polyfill — для работы с асинхронным кодом.
• Element.closest polyfill — иногда Contact Form 7 использует метод closest для навигации по DOM.
• Form validation fallback — поскольку IE плохо поддерживает атрибуты HTML5 для валидации, можно добавить JS-валидацию.

Можно использовать популярные библиотеки:

• github/fetch для fetch
• es6-promise для Promise
• closest polyfill

Как подключить полифилы в WordPress для Contact Form 7

Оптимальный способ — подключить полифилы через functions.php вашей темы или дочерней темы. Это позволит загружать скрипты только при необходимости и не повлияет на другие плагины.

Пример функции для подключения нужных скриптов:

function contactform7ru_enqueue_polyfills() {
    // Проверяем, подключена ли форма Contact Form 7
    if (is_page() || is_single()) {
        // Подключаем polyfill Promise
        wp_enqueue_script('cf7ru-promise-polyfill', 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js', array(), null, true);
        // Подключаем polyfill fetch
        wp_enqueue_script('cf7ru-fetch-polyfill', 'https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/dist/fetch.umd.min.js', array('cf7ru-promise-polyfill'), null, true);
        // Подключаем polyfill closest
        wp_enqueue_script('cf7ru-closest-polyfill', 'https://cdn.jsdelivr.net/npm/closest-polyfill@2.0.7/closest.min.js', array(), null, true);
    }
}
add_action('wp_enqueue_scripts', 'contactform7ru_enqueue_polyfills');

Этот код подключит необходимые полифилы на страницах с формами, обеспечивая работу Contact Form 7 в IE и других старых браузерах.

Загрузка скриптов только для IE

Чтобы не нагружать современные браузеры, можно подключать полифилы условно, только для IE. Для этого можно добавить небольшой скрипт, который определит браузер и динамически подгрузит полифилы:

function contactform7ru_enqueue_polyfills_ie_only() {
    wp_add_inline_script('jquery', 
    '(function(){
        var isIE = /*@cc_on!@*/false || !!document.documentMode;
        if (isIE) {
            var scripts = [
                "https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js",
                "https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/dist/fetch.umd.min.js",
                "https://cdn.jsdelivr.net/npm/closest-polyfill@2.0.7/closest.min.js"
            ];
            scripts.forEach(function(src) {
                var s = document.createElement('script');
                s.src = src;
                document.head.appendChild(s);
            });
        }
    })();
    ');
}
add_action('wp_enqueue_scripts', 'contactform7ru_enqueue_polyfills_ie_only');

Как сделать fallback валидацию для Contact Form 7

IE не поддерживает нативную валидацию полей по атрибутам required, type=email и другим. Для решения этой проблемы можно добавить JavaScript-валидацию, которая сработает, если браузер не умеет валидировать формы сам.

Пример простого скрипта, который проверяет обязательные поля и email перед отправкой формы Contact Form 7:

document.addEventListener('wpcf7submit', function(event) {
    var form = event.target;
    var valid = true;
    var inputs = form.querySelectorAll('[required]');
    inputs.forEach(function(input) {
        if (!input.value.trim()) {
            valid = false;
            input.style.border = '1px solid red';
        } else {
            input.style.border = '';
        }
        if (input.type === 'email') {
            var re = /^\S+@\S+\.\S+$/;
            if (!re.test(input.value)) {
                valid = false;
                input.style.border = '1px solid red';
            }
        }
    });
    if (!valid) {
        event.preventDefault();
        alert('Пожалуйста, заполните все обязательные поля корректно.');
    }
}, false);

Этот код отменяет отправку формы, если поля не заполнены или email введён неверно, и подсвечивает проблемные поля.

Дополнительные советы по совместимости Contact Form 7 с IE

1. Используйте простой HTML-разметку форм, без сложных кастомных элементов, которые могут не поддерживаться IE.

2. Проверьте, что в настройках Contact Form 7 отключена опция «Использовать HTML5», если это вызывает проблемы.

3. В случае загрузки файлов в форму убедитесь, что используете стандартные input с типом file, избегая кастомных решений, которые зависят от современных API.

4. Обновляйте Contact Form 7 и WordPress до последних версий — разработчики регулярно улучшают совместимость.

Заключение

Поддержка старых браузеров, таких как Internet Explorer, требует дополнительных усилий, но с помощью грамотно подключённых полифилов и fallback-валидации можно обеспечить корректную работу Contact Form 7. Это важно, если ваша аудитория использует устаревшие браузеры, например, в корпоративной среде.

С помощью приведённых выше инструкций и примеров кода вы сможете быстро адаптировать свои формы, улучшить UX и снизить количество проблем с отправкой и валидацией.