Contact Form 7 — плагин формы обратной связи, формы заказать звонок, формы для сбора любых данных, форма онлайн заявки и др., для сайтов, работающих на движке WordPress. На мой взгляд лучшее решение.
Содержание
Плагин очень гибок в настройке и имеет широкой спектр применения.
[gn_spoiler style=”fancy” title=”Общие сведения об установке”]
Схему установки плагина описывать не стану. Предположим это мы умеем.
И так, устанавливаем плагин Contact Form 7. Сбоку в админке, в меню появляется новый раздел под названием: Contact Form 7. Переходим в него. Здесь осуществляется настройка внутренних полей формы.
По умолчанию форма имеет поля: Имя. Email, Тема, Сообщение. Если Вам все поля устраивают или вы побыстрее хотите испытать форму в работе, просто добавьте ШОРТКОД, который сгенерировала форма на страницу в Вордпрес.
Фото 1
[/gn_spoiler]
Как использовать плагин Contact Form 7 как модуль заказать звонок ?
Здесь сущесвует несколько решений. Давайте рассмотрим их.
1) Если мы хотим чтоб форма захвата выводилась в открытом виде (это значит что поля формы видны стразу), как на фото 2, то редактируете поля, как показано на фото 1, таким образом, чтоб осталось 1 поле – Ваш телефон, ну или любое другое кол-во.
Фото 2
Если полей нужно добавить, нажимайте кнопка сгерерировать тэг, выбираете нужный пункт и вставляете код в 2 формы (1 – та, которая выводит поле Ваш телефон на сайт, и 2 – та, которая отправляет Вам данные на почту)
Как изменять размер полей Contact Form 7
На странице настройки плагина Contact Form 7 есть код, который отвечает за поля, которые будут присутствовать в форме.
По умолчанию, код выглядит так:
[php]
Ваше имя (обязательно)
[text* your-name]
Ваш E-Mail (обязательно)
[email* your-email]
Тема
[text your-subject]
Сообщение
[textarea your-message]
[submit "Отправить"]
[/php]
Размеры (ширина) полей Contact Form 7 и расстояние между ними регулируются путем добавление размеров или с помощью CSS:
Путем добавления размера:
[textarea your-message 130×20]
То есть добавляем значения 130×20 после стандартного кода.
Например:
[php]
Ваше имя (обязательно)
[text* your-name <strong>30×20</strong>]
Ваш E-Mail (обязательно)
[email* your-email <strong>30×20</strong>]
Тема
[text your-subject <strong>20×20</strong>]
Сообщение
[textarea your-message <strong>60×20</strong>]
[submit "Отправить"]
[/php]
Я сделал следующие вещи:
- Что означают эти цифры ? Например – [text 1=”your-name” 2=”<strong>30×20</strong>” language=”*”][/text]
- 1 цифра – 30 – задает ширину поля
- 2 цифра – 20 – задает максимальное количество символов в нем.
Путем CSS
[php]
input[type=text], input[type=email], input[type=url], input[type=password], input[type=tel] {
border: 1px solid #efefef;
padding: 10px 20px;
width: 100%;
}
[/php]
где width: 100% – задает ширину на весь блок. может быть параметр в Px (300px)
Сообщение об ошибке
Если в код контакт формы добавить строку – html_class=”use-floating-validation-tip” то при наведении на поле где есть ошибка, сообщение об ошибке пропадет.
[php][contact-form-7 id="1234" title="Contact form 1" html_class="use-floating-validation-tip"][/php]
Позиционирование информации об ошибке
Для такого же результата добавляем код:
[php]
.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;
}
[/php]
wpcf7-form div.wpcf7-response-output – самое нижнее сообщение об ошибке.
1 тип – CSS для Contact Form 7
[php]
/*———————————————————————————*/
/* 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;
}
[/php]
2 тип – CSS для Contact Form 7
[php]
/*———————————————————————————*/
/* 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;
}
[/php]
3 тип – CSS для Contact Form 7 ( включает в себя иконки возле поля )
[php]
/*———————————————————————————*/
/* 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;
}
[/php]
Для стилизации кнопки на как на скриншоте, замените стандартный код на [submit class:mybtn “Отправить” ]
Для отображение иконок добавить их в папку где лежит шаблон \ img.
[php]https://max-webs.ru/wp-content/uploads/2012/06/icon-cf7.png[/php]
Переадресация при безошибочном заполнении Contact Form 7
По стандарту, после отправки сообщение с сайта, с использованием Contact Form 7, мы видим следующие сообщение: Ваше сообщение было отправлено успешно. Спасибо.
Если Вам нужно вместо этого сообщение добавить что либо другое, например другой текст с картинкой, то дописываем следующие параметры:
1 часть в CSS
[php]
.wpcf7-form.sent
{
display:none;
}
#thankYou
{
font-size: 18px;
display: none;
}
[/php]
Это на старницу где размещена контакт форма в HTML редактор, чтоб вставились DIVы.
[php]
<div id="thankYou">Thank you</div>
[/php]
В дополнительные действия в настройках Contact Form 7
[php]
on_sent_ok: "$(‘#thankYou’).show()"
[/php]
А так же есть возможность сделать переадресацию на другую страницу, при безошибочно заполненной формы.
В дополнительные действия в настройках Contact Form 7 пишем код:
[php]
on_sent_ok: "location.replace(‘https://любой-адрес.ру/’);"
[/php]
Подставляем различные значения в поле
Допустим, мы используем Contact Form 7 как быстрый заказ, где предлагается ввести только имя и телефон. В таком случае, нам придется спрашивать у клиента, какой товар он заказал, или использовать скрытые поля для пометки, с какого URL отправлено письмо, или же мы можем использовать плагин Contact Form 7 Dynamic Text Extension.
Он добавляет возможность вставки новых полей
После вставки нового поля, при открытии страницы или формы popup, видим уже подставленное значение (в моем случае это произвольные поля WordPress), которое я прописал при публикации товара.
[php][dynamictext dynamicname "CF7_get_custom_field key=’Marque’"][/php]
Как сделать ?
В шаблон формы добавляем:
[php][dynamictext dynamictext-580 id:artikul "CF7_get_custom_field key=’artikyl’"][/php]
где – artikyl – моё произвольное поле, а в шаблон письма добавляем
[php]товар – [dynamictext-580][/php]
В итоге после отправки сообщения на почту нам придет письмо следующего содержания:
Удачи всем, разработка, продвижение и поддержка сайтов by Macsimus
