Contact Form 7 — это один из самых популярных плагинов для создания форм обратной связи на WordPress. Однако, в стандартной конфигурации он может не включать специфические проверки полей, которые часто нужны для улучшения пользовательского опыта или предотвращения спама. В этой статье мы рассмотрим, как реализовать кастомную валидацию полей формы, написав несколько PHP-функций, которые будут проверять поля на соответствие требованиям.
Мы создадим код, который добавит проверку для полей электронной почты, телефона и текстовой области на наличие ссылок. Эти изменения можно внедрить в файл functions.php вашей темы WordPress. Давайте разберем код по шагам и посмотрим, как работает кастомная валидация в Contact Form 7.
Основы кастомной валидации в Contact Form 7
Для того чтобы добавить кастомную валидацию в Contact Form 7, необходимо использовать фильтры WordPress, которые предоставляет плагин. В частности, мы будем использовать фильтры вида wpcf7_validate_email*, wpcf7_validate_tel* и wpcf7_validate_textarea*. Эти фильтры позволяют добавлять кастомные правила валидации для полей электронной почты, номера телефона и текстовых областей.
Для этого вам понадобится:
Открыть файл functions.php в вашей теме WordPress.
Добавить код для кастомной валидации полей.
Часть 1. Проверка email
Первый шаг — валидация поля электронной почты. Обычно необходимо проверить, чтобы адрес email соответствовал определённому формату и включал только доверенные домены, такие как gmail.com, yandex.ru или mail.ru. Также можно добавить проверку на пустое значение, чтобы предотвратить отправку формы без заполненного поля email.
Код для валидации email
Вот пример функции, которая выполняет такие проверки:
// Валидация email
add_filter('wpcf7_validate_email*', 'custom_email_validation_filter', 20, 2);
function custom_email_validation_filter($result, $tag) {
$email = isset($_POST[$tag->name]) ? trim($_POST[$tag->name]) : '';
// Проверка на пустое значение
if (empty($email)) {
$result->invalidate($tag, "Поле email не должно быть пустым.");
return $result;
}
// Регулярное выражение для проверки доменов почты
if (!preg_match('/^[a-zA-Z0-9._%+-]+@(mail\.ru|gmail\.com|yandex\.ru)$/', $email)) {
$result->invalidate($tag, "Введите корректный email");
}
return $result;
}
Пояснение кода
- Проверка на пустое значение: если поле пустое, функция сразу возвращает сообщение об ошибке и прерывает выполнение дальнейшей проверки.
- Проверка домена: используется регулярное выражение, которое проверяет, чтобы email заканчивался только на один из допустимых доменов (mail.ru, gmail.com, yandex.ru). Если домен не подходит, пользователь увидит сообщение об ошибке.
Как это работает?
Данный фильтр вызывается при отправке формы. Если email не соответствует правилам, форма не отправляется, и пользователю выводится сообщение с объяснением.
Часть 2. Проверка номера телефона
Следующий шаг — это проверка номера телефона. Мы хотим убедиться, что пользователь ввел 10-значный номер телефона, без дополнительных символов или пробелов. Для этого можно использовать регулярное выражение, чтобы отфильтровать все нечисловые символы, и затем проверять длину строки.
Код для валидации телефона
// Валидация телефона
add_filter('wpcf7_validate_tel*', 'custom_phone_validation_filter', 20, 2);
function custom_phone_validation_filter($result, $tag) {
$phone = isset($_POST[$tag->name]) ? trim($_POST[$tag->name]) : '';
$phoneValue = preg_replace('/\D/', '', $phone);
// Проверяем длину номера телефона
if (strlen($phoneValue) !== 10) {
$result->invalidate($tag, "Введите корректный номер телефона (10 цифр).");
}
return $result;
}
Пояснение кода
- Удаление всех нечисловых символов: сначала мы убираем все символы, кроме цифр, чтобы получить чистую строку из чисел.
- Проверка длины: если длина полученной строки не равна 10 символам, функция возвращает ошибку.
Часть 3. Проверка текстовой области на наличие ссылок
Часто бывает полезно запретить пользователям вставлять ссылки в текстовые области, чтобы предотвратить спам. Также можно добавить проверку на пустое значение, чтобы пользователь не отправил пустое поле.
Код для проверки текстовой области
// Валидация текстовой области
add_filter('wpcf7_validate_textarea*', 'custom_review_validation_filter', 20, 2);
function custom_review_validation_filter($result, $tag) {
$review = isset($_POST[$tag->name]) ? trim($_POST[$tag->name]) : '';
// Проверяем наличие ссылок
if (preg_match('/https?:\/\/[^\s]+|www\.[^\s]+/i', $review)) {
$result->invalidate($tag, "Ваше сообщение не должно содержать ссылки.");
}
// Проверка на пустое значение
if (empty($review)) {
$result->invalidate($tag, "Поле не должно быть пустым.");
}
return $result;
}
Пояснение кода
- Проверка наличия ссылок: используется регулярное выражение, которое ищет ссылки в тексте. Если в тексте есть http://, https:// или www., функция возвращает ошибку.
- Проверка на пустое значение: если поле пустое, отображается соответствующее сообщение.
Как это работает?
Когда пользователь пытается отправить форму с ссылкой в текстовой области, Contact Form 7 отклоняет отправку и выводит сообщение об ошибке.
Как применить кастомную валидацию в вашем проекте?
Теперь, когда у нас есть рабочий код, давайте подытожим, как его применить:
Скопируйте весь код, представленный выше, в файл functions.php вашей темы.
Проверьте, чтобы в вашей форме в админке были установлены обязательные поля для email, телефона и текстовой области.
Сохраните изменения и протестируйте форму, проверяя, что сообщения с ошибками отображаются корректно.
Советы по доработке и улучшению
Дополнительные проверки. Вы можете добавить проверку на минимальную длину для текстовых полей или другие домены для email, если это требуется.
Сообщения об ошибках. Настройте сообщения так, чтобы они были более информативными для пользователей.
Локализация. Если ваш сайт поддерживает несколько языков, создайте разные сообщения для каждого из них.
Настройка кастомной валидации для Contact Form 7 дает вам больше контроля над отправкой данных. Такие проверки, как запрет на использование определенных доменов почты или фильтрация ссылок, помогают улучшить качество данных и избежать лишнего спама. Надеемся, что этот пример кода и объяснения помогут вам настроить проверку на вашем сайте WordPress.
