Contact Form 7 — плагин формы обратной связи, формы заказать звонок, формы для сбора любых данных, форма онлайн заявки и др., для сайтов, работающих на движке WordPress.
Содержание
На мой взгляд лучшее решение что существует на момент 2018 года. Плагин очень гибок в настройке и имеет широкой спектр применения. Я применяю данную форму на всех сайтах которые я разрабатываю.
Общие сведения об установке
Схему установки плагина описывать не стану. Предположим это мы умеем.
После того как плагин активирован, сбоку в админке, в меню, появляется новый раздел под названием: Contact Form 7. Переходим в него. Здесь осуществляется настройка внутренних полей формы.
Вид по умолчанию форма Contact Form 7
Если Вам все поля устраивают или вы побыстрее хотите испытать форму в работе, просто добавьте ШОРТКОД, который сгенерировала форма на страницу в Вордпрес.
Фото 1
Как использовать плагин Contact Form 7 как модуль заказать звонок ?
Здесь существует несколько решений. Давайте рассмотрим их.
1) Если мы хотим чтоб форма захвата выводилась в открытом виде (это значит что поля формы видны стразу), как на фото, то редактируете поля, как показано на фото 1, таким образом, чтоб осталось 2 поля – имя и телефон (ну или любое другое кол-во.)
Форма захвата в открытом виде
Как изменять размер полей Contact Form 7
На странице настройки плагина Contact Form 7 есть код, который отвечает за поля, которые будут присутствовать в форме.
Размеры (ширина) полей Contact Form 7 и расстояние между ними регулируются путем добавление размеров или с помощью CSS:
Путем добавления размера путем Contact Form 7 или через CSS
Пример путем Contact Form 7
[textarea your-message 130×20]
- 130 – задает ширину поля
- 20 – задает максимальное количество символов в нем.
Путем CSS
[sociallocker]
Пример путем CSS где width нужное значение. Можно указывать в пикселях, процентах и т. д.
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="password"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="password"],
.wpcf7 input[type="file"],
.wpcf7 textarea {
padding: 15px 20px 15px 50px;
margin: 5px 0 0 0;
width: 100%;
box-sizing: border-box;
background-color: #f8f8f8;
background-image: none;
border: #efefef solid 2px;
font-size: 15px;
-webkit-transition: .07s ease-in-out;
transition: .07s ease-in-out;
}[/sociallocker]
Стилизация сообщения об ошибке в Contact Form 7
Если в код контакт формы добавить строку – html_class=”use-floating-validation-tip” то при наведении на поле где есть ошибка, сообщение об ошибке пропадет.
[contact-form-7 id=”1234″ title=”Contact form 1″ html_class=”use-floating-validation-tip”]
Позиционирование информации об ошибке
Для такого же результата добавляем код:
.wpcf7 span.wpcf7-not-valid-tip {
background: none repeat scroll 0 0 #DD0000;
color: #FFFFFF;
font-size: 16px;
right: 0;
width: 10px;
height: 14px;
padding: 3px 5px;
position: absolute;
top: 10px;
}
.wpcf7-form div.wpcf7-response-output {
display: none !important;
}
Готовые современные стили 2018-2019 года для Contact Form 7
Стиль №1
/*---------------------------------------------------------------------------------*/
/* Contact Form 7 CSS */
/*---------------------------------------------------------------------------------*/
span.wpcf7-form-control-wrap input, span.wpcf7-form-control-wrap textarea, .wpcf7-submit{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9');
background: -webkit-gradient( linear, left top, left bottom, color-stop(.5, white), color-stop(1, rgba(233, 233, 233, .5)) );
background: -moz-linear-gradient( center bottom, rgb(233,234,235) 0%, rgba(255,255,255,0) 85% );
border: 1px solid #aeaeae; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; box-shadow: 0 0 5px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2); -moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
line-height:12px;
margin: 0 0 0 5px;
padding: 10px;
width: 300px;
}
span.wpcf7-form-control-wrap input{
width: 250px;
}
span.wpcf7-form-control-wrap input:focus, span.wpcf7-form-control-wrap textarea:focus{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff');
background-image: none;
border: 1px solid #666666; box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none;
}
.wpcf7-submit{
background:#F1F2F3; box-shadow: -1px 1px 3px rgba(0,0,0,.25); -webkit-box-shadow: -1px 1px 3px rgba(0,0,0,.25); -moz-box-shadow: -1px 1px 3px rgba(0,0,0,.25);
font-family:sans-serif;
text-align: center;
width: 120px;
margin:0px auto;
cursor:pointer;
text-transform:uppercase;
padding: 3px;
margin:0px auto;
}
}
.wpcf7-submit:hover{
border:1px solid #888;
}
.wpcf7-not-valid-tip, div.wpcf7-validation-errors{
border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; box-shadow: 0 0 3px rgba(0,0,0,.25); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.25); -moz-box-shadow: 0 0 3px rgba(0,0,0,.25);
padding:8px 5px 5px !important;
}
.wp_syntax {
width: 530px !important;
}Стиль 2
/*---------------------------------------------------------------------------------*/
/* Contact Form 7 CSS */
/*---------------------------------------------------------------------------------*/
body input[type=text].wpcf7-not-valid, body input[type=email].wpcf7-not-valid, body input[type=tel].wpcf7-not-valid, body textarea.wpcf7-not-valid {
border: 1px solid #ec3c06;
}
body span.wpcf7-not-valid-tip {
display: block;
color: #ec3c06;
border: none;
position: relative;
top: auto;
left: auto;
padding: 0;
margin-top: 2px;
background: none;
font-size: 15px;
}
body div.wpcf7-validation-errors {
background: #ffe2e2;
border: 1px solid #ff8a8a;
color: #ec3c06;
}
body div.wpcf7-response-output {
margin: 10px 0;
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 5px;
}
body .wpcf7-mail-sent-ng {
background: #fff2e2;
border: 1px solid #ffbc8a;
color: #e17731;
}
body .wpcf7-mail-sent-ok {
background: #e8ffe2;
border: 1px solid #6fdf51;
color: #1ea524;
}
.wpcf7-captchac {
padding: 20px 40px;
border: 1px solid #dee1e1;
margin-bottom: 10px;
}
textarea, input[type=text], input[type=email], input[type=url], input[type=password], input[type=tel] {
border: 1px solid #ccc;
padding: 10px 20px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}Стиль №3
/*---------------------------------------------------------------------------------*/
/* Contact Form 7 CSS */
/*---------------------------------------------------------------------------------*/
body input[type=text].wpcf7-not-valid, body input[type=email].wpcf7-not-valid, body input[type=tel].wpcf7-not-valid, body textarea.wpcf7-not-valid {
border: 1px solid #ec3c06;
background-color: #fedddd;
color: #54667a;
}
body span.wpcf7-not-valid-tip {
display: block;
color: #ec3c06;
border: none;
position: relative;
top: auto;
left: auto;
padding: 0;
margin-top: 2px;
background: none;
font-size: 15px;
}
body div.wpcf7-validation-errors {
background: #ffe2e2;
border: 1px solid #ff8a8a;
color: #ec3c06;
}
body div.wpcf7-response-output {
margin: 0 !important;
width: 100% !important;
padding: 15px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 5px;
}
body .wpcf7-mail-sent-ng {
background: #fff2e2;
border: 1px solid #ffbc8a;
color: #e17731;
}
body .wpcf7-mail-sent-ok {
background: #e8ffe2;
border: 1px solid #6fdf51;
color: #1ea524;
}
.wpcf7-captchac {
padding: 20px 40px;
border: 1px solid #dee1e1;
margin-bottom: 10px;
}
input[type=text], input[type=email], input[type=url], input[type=password], input[type=tel] {
border: 1px solid #efefef;
padding: 10px 20px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background: rgb(240, 240, 240);
margin-bottom: 10px;
}
textarea{
border: 1px solid #efefef;
padding: 10px 20px;
background: #F8F8F8 ;
width: 100%;
height: 150px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
input[type=text] {
background: #F8F8F8 url(img/icon-cf7.png) no-repeat;
height: 50px;
padding: 0 0 0 45px;
background-position: 0 -10px;
}
input[type=tel] {
background: #F8F8F8 url(img/icon-cf7.png) no-repeat;
padding: 0 0 0 45px;
background-position: 0 -54px;
height: 50px;
}
input[type=email] {
background: #F8F8F8 url(img/icon-cf7.png) no-repeat;
padding: 0 0 0 45px;
background-position: 0 -75px;
height: 50px;
}
.use-floating-validation-tip span.wpcf7-not-valid-tip {
display: none;
}
.mybtn {
text-transform: uppercase;
position: relative;
display: block;
width: 100%;
font-size: 16px;
line-height: 40px;
text-align: center;
color: #FFF;
box-shadow: 0px 4px 0px #c2a400;
border: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
background: #FFBF17;
cursor: pointer;
margin-top: 20px;
}Для стилизации кнопки на как на скриншоте, я добавил к кнопке submit свой стиль mybtn – [submit class:mybtn “Отправить” ]
Для отображение иконок добавить их в папку где лежит шаблон \ img – https://max-webs.ru/wp-content/uploads/2012/06/icon-cf7.png
Сообщение об успешной отправке или страница спасибо в Contact Form 7
По стандарту, после отправки сообщение с сайта, с использованием Contact Form 7, мы видим следующие сообщение: Ваше сообщение было отправлено успешно. Спасибо. и форма обнуляется.
Стилизируем данное действие
.wpcf7-form.sent .wpcf7-step,
.wpcf7-form.sent .wpcf7-submit {
display: none;
}
html div.wpcf7-mail-sent-ok {
border: 0 !important;
font-size: 30px;
text-align: center;
color: #222 !important;
background: transparent !important;
font-size: 18px;
}
div.wpcf7-response-output {
clear: both;
margin: 0 0 50px 0 !important;
}
.sent .popup-wrapp {
display: none;
}
.wpcf7-mail-sent-ok:before {
position: relative;
content: "\f00c";
font: normal normal normal 14px/1 FontAwesome;
display: block;
width: 80px;
height: 80px;
margin: 20px auto 15px;
border: #2dbf5b solid 3px;
line-height: 74px;
border-radius: 50%;
font-size: 38px;
text-align: center;
color: #2dbf5b;
background: transparent;
}П. С. заранее должны подключены FontAwesome
Переадресацию на другую страницу
Так же есть возможность сделать переадресацию на другую страницу, при безошибочно заполненной формы.
В дополнительные действия в настройках Contact Form 7 пишем код:
on_sent_ok: "location.replace('https://любой-адрес.ру/');"
Подставляем различные значения в поле
Допустим, мы используем Contact Form 7 как быстрый заказ, где предлагается ввести только имя и телефон. В таком случае, нам придется спрашивать у клиента, какой товар он заказал, или использовать скрытые поля для пометки, с какого URL отправлено письмо, или же мы можем использовать плагин Contact Form 7 Dynamic Text Extension.
Он добавляет возможность вставки новых полей
После вставки нового поля, при открытии страницы или формы popup, видим уже подставленное значение (в моем случае это произвольные поля WordPress), которое я прописал при публикации товара.
[dynamictext dynamicname "CF7_get_custom_field key='Marque'"]Как сделать ?
В шаблон формы добавляем:
[dynamictext dynamictext-580 id:artikul "CF7_get_custom_field key='artikyl'"]где – artikyl – моё произвольное поле, а в шаблон письма добавляем
товар – [dynamictext-580]
В итоге после отправки сообщения на почту нам придет письмо следующего содержания:
