В контакт форме 7 есть несколько разновидностей отобразить валидацию
1 – текст о неправильном заполнение
2 – визуально выделить поле input
Как выглядят сообщения об ошибках визуально
По умолчанию включено уведомление 1 (текстовое), с помощью CSS можно настраивать его местоположение, цвет, размер и т.д.
Визуально выделить input можно так же с помощью CSS. Для того чтоб выглядело все как на картинке, нужно добавить в CSS
[php]
input[type=checkbox].wpcf7-not-valid,
input[type=file].wpcf7-not-valid,
input[type=text].wpcf7-not-valid,
body input[type=email].wpcf7-not-valid,
body input[type=tel].wpcf7-not-valid,
textarea.wpcf7-not-valid, select.wpcf7-not-valid {
border: 1px solid #ec3c06;
background-color: rgb(255, 232, 232) !important;
-moz-transition: background-color 0.8s 0.1s ease;
-o-transition: background-color 0.8s 0.1s ease;
-webkit-transition: background-color 0.8s 0.1s ease;
}
input.wpcf7-not-valid::-webkit-input-placeholder {color:#ec3c06;}
input.wpcf7-not-valid::-moz-placeholder {color:#ec3c06;}/* Firefox 19+ */
input.wpcf7-not-valid:-moz-placeholder {color:#ec3c06;}/* Firefox 18- */
input.wpcf7-not-valid:-ms-input-placeholder {color:#ec3c06;}
[/php]
По умолчанию сообщение об заполнение Checkbox в Contact Frorm 7 отсутсвует, для того чтоб добавить текстовое уведомление о том что поля Checkbox обязательно для заполнения необходимо в поле Additional Settings без кавычек точек и прочего.
[php]acceptance_as_validation: on[/php]
Стилизируем Checkbox в Contact Form 7 и добавляем валидацию
Для того чтоб стилизировать и добавить валидацию будем использовать JS и CSS
Добавляем JS
[php]
jQuery(document).ready(function($) {
$(function() {
$(‘.wpcf7-list-item label’).click(function() {
if ($(‘:checked’, this).length > 0) {
$(this).addClass(‘selected’);
} else {
$(this).removeClass(‘selected’);
}
});
});
});
[/php]
Данный код добавляет к label чексбокса класс checked при нажатии на чекбокс
Но для того чтоб так было добавлено необходимо при добавлении чекбоксов нажать галочку Wrap each item with label element
Теперь остается добавить CSS
[php]
input[type="checkbox"] {
display: none;
}
.wpcf7-list-item label {
display: inline-block;
line-height: 20px;
vertical-align: middle;
position: relative;
padding-left: 5px;
cursor: pointer;
user-select: none;
color: #424242;
}
.wpcf7-list-item label::before {
position: absolute;
content: "";
width: 10px;
height: 5px;
top: 6px;
left: 4px;
margin-left: -18px;
border: 2px solid #000;
border-top: none;
border-right: none;
background: transparent;
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0;
-webkit-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
z-index: 1;
}
.wpcf7-list-item label::after{
position: absolute;
content: "";
width: 18px;
height: 18px;
left: 0;
top: 0;
margin-left: -18px;
background-color: white;
border: 1px solid #424242;
-webkit-border-radius: 3px;
border-radius: 3px;
background-clip: padding-box;
cursor: pointer;
}
.wpcf7-list-item label.selected::before, .wpcf7-list-item input[type="radio"]:checked+label::before, .radio-btn input[type="checkbox"]:checked+label::before, .radio-btn input[type="radio"]:checked+label::before {
opacity: 1;
}
.wpcf7-list-item input[type="checkbox"]:checked+label::after, .wpcf7-list-item input[type="radio"]:checked+label::after, .radio-btn input[type="checkbox"]:checked+label::after, .radio-btn input[type="radio"]:checked+label::after {
border: 3px solid #000;
}
.wpcf7-not-valid .wpcf7-list-item label {
color: red;
}
.wpcf7-not-valid .wpcf7-list-item label::after {
border-color: red;
}
[/php]
