Contact form 7 как обязательные поля обводить красным?
Здравствуйте, может кто-то знает как настроить валидацию в плагине Contact form 7 таким образом, что бы при пустом поле ( если оно обязательное ) обводилось красным
Дополнительно:
предположим, что обязательное поле имеет атрибут required
тогда как-то так
input:required { border: 1px solid red; } |
input:required { border: 1px solid red; }
возможно cf7 подставляет свои классы, тогда обращаться по ним
Ответы:
Привет.
.wpcf7-not-valid {border: 1px red solid;}
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
В Contact Form 7 обязательное поле после неудачной отправки получает класс
wpcf7-not-validи атрибутaria-invalid="true". Поэтому для красной обводки достаточно CSS. Никакой отдельный PHP для этого обычно не нужен..wpcf7-form-control.wpcf7-not-valid { border: 1px solid #e53935; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12); } .wpcf7-form-control.wpcf7-not-valid:focus { outline: none; border-color: #d32f2f; box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2); }
Если тема задаёт стили более сильными селекторами, уточните селектор под вашу форму:
.wpcf7 form input.wpcf7-not-valid, .wpcf7 form textarea.wpcf7-not-valid, .wpcf7 form select.wpcf7-not-valid { border-color: #e53935; }
Не используйте просто
input:required. Такой CSS подсветит все обязательные поля сразу, ещё до отправки формы, и пользователь увидит красную форму даже до ошибки. Лучше подсвечивать именно.wpcf7-not-valid, потому что этот класс появляется после валидации.Можно дополнительно подсветить label или контейнер поля. Для этого удобно оборачивать поля в блок:
<label>Ваш телефон [tel* your-phone] </label>
Если хотите менять класс у родителя, можно использовать JS-событие CF7:
document.addEventListener('wpcf7invalid', function (event) { event.target.querySelectorAll('.wpcf7-not-valid').forEach(function (field) { field.closest('label')?.classList.add('has-error'); }); });document.addEventListener('wpcf7invalid', function (event) { event.target.querySelectorAll('.wpcf7-not-valid').forEach(function (field) { field.closest('label')?.classList.add('has-error'); }); });
Но в большинстве случаев хватает CSS по классу
wpcf7-not-valid. После успешной отправки CF7 сам убирает ошибочные классы при следующей валидации.После добавления CSS проверьте несколько типов полей: текстовое поле, телефон, email, textarea, select и checkbox. У чекбоксов красную рамку лучше задавать не самому input, а контейнеру строки, иначе визуально она может выглядеть криво. Для единообразия можно обернуть каждое поле в блок
.form-rowи подсвечивать его через JS только после событияwpcf7invalid.