Contact Form 7: как добавить проверку OTP (одноразовый пароль) для подтверждения формы

В этой статье подробно разберём, как добавить в Contact Form 7 функциональность проверки с помощью одноразового пароля (OTP) для подтверждения отправки формы. Это полезно для повышения безопасности и верификации пользователя, особенно если форма собирает критичные данные или нужна дополнительная защита от спама и ботов.

Зачем нужна проверка OTP в Contact Form 7

Одноразовый пароль (OTP) — это временный код, который пользователь получает, например, на телефон или почту, и вводит для подтверждения своих действий. Добавление OTP в форму Contact Form 7 помогает:

• Подтвердить, что форма заполняет реальный человек со своим номером телефона или почтой;
• Снизить количество спам-ботов и фальшивых заявок;
• Повысить доверие к вашему сайту и улучшить качество собранных данных;
• Реализовать двухфакторную аутентификацию в контактной форме.

Рассмотрим пример реализации OTP для телефона с отправкой кода через SMS с помощью стороннего API (например, Twilio) и интеграцией в Contact Form 7.

Подготовка: что понадобится для реализации OTP

Для работы потребуются:

• Аккаунт и API для отправки SMS (например, Twilio или другой сервис);
• Плагин Contact Form 7 на сайте WordPress;
• Минимальные знания PHP и JavaScript для кастомизации;
• Возможность сохранять сессию или временные данные на сервере (например, через PHP сессии или transient API WordPress).

Создание формы с полем телефона и OTP в Contact Form 7

Добавим в форму два поля: для номера телефона и для ввода OTP. Пример кода формы Contact Form 7:

[tel* your-phone placeholder "Введите телефон"]
[button id:send-otp "Получить код"]
[text* your-otp placeholder "Введите код из SMS"]
[submit "Отправить"]

Здесь поле your-phone обязательно для ввода номера телефона, кнопка send-otp — для запроса отправки кода, поле your-otp — для ввода полученного OTP, и кнопка отправки формы.

Особенности настройки кнопки «Получить код»

Эта кнопка не отправляет форму целиком, а инициирует AJAX-запрос на сервер для генерации и отправки OTP. Для этого подключим JavaScript, который будет обрабатывать нажатие и вызывать серверный обработчик.

Реализация отправки OTP через AJAX

Создадим JavaScript для обработки клика на кнопку и отправки AJAX-запроса:

document.addEventListener('DOMContentLoaded', function() {
  const sendOtpBtn = document.getElementById('send-otp');
  sendOtpBtn.addEventListener('click', function(e) {
    e.preventDefault();
    const phoneField = document.querySelector('input[name="your-phone"]');
    if (!phoneField.value) {
      alert('Введите номер телефона');
      return;
    }
    sendOtpBtn.disabled = true;
    fetch(contactform7ru_send_otp.ajax_url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams({
        action: 'contactform7ru_send_otp',
        phone: phoneField.value
      })
    })
    .then(response => response.json())
    .then(data => {
      alert(data.message);
      sendOtpBtn.disabled = false;
    })
    .catch(() => {
      alert('Ошибка отправки кода');
      sendOtpBtn.disabled = false;
    });
  });
});

Данный скрипт отправляет POST-запрос на сервер с номером телефона и ожидает ответ с результатом отправки SMS.

Серверная часть: генерация и отправка OTP, сохранение в сессии

Добавим обработчик AJAX в functions.php вашей темы или в отдельном плагине:

add_action('wp_ajax_contactform7ru_send_otp', 'contactform7ru_send_otp_handler');
add_action('wp_ajax_nopriv_contactform7ru_send_otp', 'contactform7ru_send_otp_handler');

function contactform7ru_send_otp_handler() {
  if (empty($_POST['phone'])) {
    wp_send_json_error(['message' => 'Телефон не указан']);
  }
  $phone = sanitize_text_field($_POST['phone']);

  // Генерируем 6-значный OTP
  $otp = rand(100000, 999999);

  // Сохраняем OTP и время в сессию
  if (!session_id()) session_start();
  $_SESSION['contactform7ru_otp'] = $otp;
  $_SESSION['contactform7ru_otp_phone'] = $phone;
  $_SESSION['contactform7ru_otp_time'] = time();

  // Отправляем SMS через Twilio (пример, надо заполнить своими данными)
  $sid = 'TWILIO_SID';
  $token = 'TWILIO_TOKEN';
  $twilio_number = '+1234567890';

  require_once 'path/to/twilio-php/autoload.php';
  try {
    $client = new Twilio\Rest\Client($sid, $token);
    $client->messages->create($phone, [
      'from' => $twilio_number,
      'body' => "Ваш код подтверждения: $otp"
    ]);
    wp_send_json_success(['message' => 'Код отправлен на ваш телефон']);
  } catch (Exception $e) {
    wp_send_json_error(['message' => 'Ошибка отправки SMS: ' . $e->getMessage()]);
  }
}

Обратите внимание, что для работы с API Twilio необходимо установить их PHP SDK и правильно указать путь в require_once.

Валидация OTP при отправке формы Contact Form 7

Теперь нужно проверить введённый пользователем OTP перед окончательной отправкой формы. Для этого используем хук wpcf7_validate_text*:

add_filter('wpcf7_validate_text*', 'contactform7ru_validate_otp', 20, 2);

function contactform7ru_validate_otp($result, $tag) {
  $name = $tag->name;
  if ($name === 'your-otp') {
    if (!session_id()) session_start();

    $submitted_otp = isset($_POST['your-otp']) ? sanitize_text_field($_POST['your-otp']) : '';

    if (empty($_SESSION['contactform7ru_otp']) || empty($_SESSION['contactform7ru_otp_time'])) {
      $result->invalidate($tag, 'Код подтверждения не был отправлен.');
      return $result;
    }

    // Проверяем время жизни OTP (например, 5 минут)
    if (time() - $_SESSION['contactform7ru_otp_time'] > 300) {
      $result->invalidate($tag, 'Срок действия кода истёк. Получите новый код.');
      return $result;
    }

    if ($submitted_otp !== $_SESSION['contactform7ru_otp']) {
      $result->invalidate($tag, 'Неверный код подтверждения.');
    }
  }
  return $result;
}

Если проверка не прошла — форма не отправится, и пользователь увидит ошибку.

Дополнительные рекомендации и улучшения

Защита от повторной отправки и повторного использования OTP

После успешной валидации стоит удалить OTP из сессии, чтобы избежать повторного использования кода:

unset($_SESSION['contactform7ru_otp']);
unset($_SESSION['contactform7ru_otp_phone']);
unset($_SESSION['contactform7ru_otp_time']);

Поддержка разных форматов телефона и международных номеров

Для правильной работы с телефоном используйте библиотеку libphonenumber или проверяйте формат номера на клиенте с помощью JavaScript, чтобы исключить ошибки при отправке SMS.

Интеграция с другими сервисами для отправки SMS

Если Twilio не подходит, можно использовать плагины WPShop для SMS-рассылок или другие API (SMS.ru, Nexmo и т.д.). Главное — реализовать серверный вызов API и обработку ответов.

Заключение

Добавление проверки OTP в Contact Form 7 — отличный способ повысить безопасность форм и убедиться, что контактные данные пользователя реальны. В статье мы рассмотрели пример реализации с отправкой SMS через Twilio, но архитектуру можно адаптировать под любой сервис. Использование AJAX для запроса кода и валидация при отправке формы позволяют сделать UX удобным и надёжным.

Если вы хотите расширить функциональность сайта, обратите внимание на плагины WPShop, которые помогут автоматизировать SMS-рассылки и интеграцию с разными сервисами: https://wpshop.ru/sms-plugins-wordpress.