Как отладить проблемы с отправкой форм на мобильных устройствах в WordPress

Диагностика проблемы: почему форма не отправляется на мобильных устройствах

Если формы на вашем WordPress-сайте не отправляются или отправляются с ошибками только на мобильных устройствах, а на десктопе работают корректно, проблема может быть связана с несколькими факторами:

• JavaScript ошибки, специфичные для мобильных браузеров;
• Конфликты плагинов, которые влияют на AJAX-запросы или валидацию;
• Проблемы с кешированием или CDN, которые по-разному обрабатывают мобильные запросы;
• Особенности темы, например, отключение скриптов на мобильных версиях;
• Проблемы с CORS или REST API, если используется AJAX отправка;

Первым делом необходимо воспроизвести ошибку и собрать максимум данных о ней.

Как проверить ошибки JavaScript на мобильных устройствах

Для этого можно использовать инструменты разработчика браузера в режиме эмуляции или подключить реальное устройство к компьютеру и отладить через Chrome DevTools:

1. Подключите мобильное устройство по USB к компьютеру.
2. Откройте в Chrome на ПК chrome://inspect.
3. Выберите подключённое устройство и откройте вкладку с вашим сайтом.
4. Отслеживайте консоль на наличие ошибок при попытке отправки формы.

Проверка сетевых запросов

Вкладка Network поможет увидеть, отправляется ли запрос, каков ответ сервера, и нет ли ошибок HTTP (например, 403, 404, 500).

Пошаговое решение: исправляем отправку форм на мобильных устройствах

1. Отключаем кеширование и CDN для форм

Кеширование может блокировать или искажать AJAX-запросы. Добавьте исключение в правила кэширования (например, в .htaccess или настройках плагина кеширования), чтобы формы не кешировались:

# Исключить URL формы из кеша
RewriteCond %{REQUEST_URI} ^/wp-json/
RewriteRule .* - [E=Cache-Control:no-cache]

2. Проверяем и исправляем JavaScript-конфликты

Для примера, если форма использует jQuery AJAX, добавьте следующую обёртку, чтобы убедиться, что скрипт загружается корректно и работает на мобильных:

jQuery(document).ready(function($) {
  $('#myForm').on('submit', function(e) {
    e.preventDefault();
    var data = $(this).serialize();
    $.ajax({
      url: '/wp-json/myplugin/v1/send-form',
      method: 'POST',
      data: data,
      success: function(response) {
        alert('Форма отправлена успешно');
      },
      error: function(xhr) {
        alert('Ошибка при отправке формы: ' + xhr.status);
      }
    });
  });
});

3. Проверяем и корректируем REST API и CORS

Если форма использует REST API, убедитесь, что сервер принимает запросы с мобильных доменов и не блокирует их. В файл functions.php темы или плагина добавьте заголовки CORS:

add_action('rest_api_init', function() {
  remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
  add_filter('rest_pre_serve_request', function($value) {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
    header('Access-Control-Allow-Credentials: true');
    return $value;
  });
}, 15);

4. Отключаем конфликтующие плагины

Временно отключите плагины, которые могут влиять на формы, например, кеширующие, защитные (firewall), или оптимизаторы JavaScript, и протестируйте работу формы на мобильном.

Проверка результата после внедрения

После внесённых изменений:

• Откройте сайт на мобильном устройстве.
• Откройте консоль браузера (через удалённую отладку) и убедитесь, что нет ошибок JavaScript.
• Отправьте форму и проверьте ответ сервера (HTTP 200 и корректный ответ в AJAX).
• Проверьте, что данные успешно сохраняются или отправляются на почту.

Частые ошибки и как их исправить

• Ошибка 403 при отправке формы
  Причина: защита сервера или плагин безопасности блокирует AJAX-запросы. Решение: добавить исключения в настройки безопасности, проверить .htaccess, отключить модуль защиты.
• JavaScript-ошибки, связанные с jQuery
  Причина: конфликт версий jQuery или отсутствие загрузки скриптов в мобильной версии.
  Решение: убедитесь, что jQuery подключён для мобильных, используйте wp_enqueue_script('jquery').
• Форма не отправляется, но запросы видны в Network
  Причина: ошибка на сервере обработки (например, неправильный nonce или ошибки PHP).
  Решение: проверьте логи сервера, убедитесь, что nonce проверяется корректно.

Практические советы по безопасности и производительности

• Используйте wp_nonce_field и проверяйте nonce на сервере, чтобы защитить формы от CSRF.
• Минимизируйте и объединяйте JS-файлы, но исключайте скрипты форм из агрессивной оптимизации, чтобы не сломать логику.
• Отключайте кеширование страниц или AJAX-запросов, связанных с формами.
• Добавьте логирование ошибок для AJAX-запросов, чтобы быстро выявлять проблемы.

Чек-лист для отладки отправки форм на мобильных устройствах

• Воспроизведите проблему на реальном устройстве или эмуляторе;
• Проверьте консоль ошибок JavaScript на мобильном;
• Проверьте успешность AJAX-запросов во вкладке Network;
• Отключите плагины кеширования и безопасности для теста;
• Проверьте правильность подключения jQuery и других скриптов;
• Убедитесь в корректной настройке CORS и REST API;
• Проверьте nonce и серверную обработку формы;
• Проверьте логи сервера на PHP ошибки;
• Тестируйте после каждого изменения.