Время чтения: 3 мин. 12 августа 2016 в 7:31 Javascript,Wordpress
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

Валидация в Сontact Form 7

В контакт форме 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 при нажатии на чекбокс

krana-2016-08-12-v-10.27.45-1024×873.png» alt=»Снимок экрана 2016-08-12 в 10.27.45″ width=»1024″ height=»873″ class=»aligncenter size-large wp-image-11260″ />

Теперь остается добавить 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]

Похожие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

[contact-form-7 404 "Not Found"]
Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Запись на бесплатный урок
Введите ваше имя, телефон и skype логин.
Я свяжусь с Вами для уточнения времени прохождения урока.

Введите ваше имя *

Введите контактный телефон *

Введите контактный E-mail *

Выберите программу

Промокод

Задать свой вопрос
Напишите свой вопрос. Я прочитаю его, и дам ответ в течении 15 минут.

Введите ваше имя *

Введите контактный email *

Сообщение