+7-499-70-300-44
заказать звонок
Заказать обратный звонок

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

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

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

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

Спасибо за оставленную заявку
Ожидайте звонка

Contact Form 7 — плагин контактной формы для WordPress

Блог вебмастера

Contact Form 7 — плагин формы обратной связи, формы заказать звонок, формы для сбора любых данных, форма онлайн заявки и др., для сайтов, работающих на движке WordPress. На мой взгляд лучшее решение.

Плагин очень гибок в настройке и имеет широкой спектр применения.

Contact Form 7

[gn_spoiler style=»fancy» title=»Общие сведения об установке»]

Схему установки плагина описывать не стану. Предположим это мы умеем.

И так, устанавливаем плагин Contact Form 7. Сбоку в админке, в меню появляется новый раздел под названием: Contact Form 7. Переходим в него. Здесь осуществляется настройка внутренних полей формы.

2014-11-17_153908

По умолчанию форма имеет поля: Имя. Email, Тема, Сообщение. Если Вам все поля устраивают или вы побыстрее хотите испытать форму в работе, просто добавьте ШОРТКОД, который сгенерировала форма на страницу в Вордпрес.

Contact Form 7 - плагин контактной формы для WordPress

Фото 1

[/gn_spoiler]

Как использовать плагин Contact Form 7 как модуль заказать звонок ?

Здесь сущесвует несколько решений. Давайте рассмотрим их.

1) Если мы хотим чтоб форма захвата выводилась в открытом виде (это значит что поля формы видны стразу), как на фото 2, то редактируете поля, как показано на фото 1, таким образом, чтоб осталось 1 поле — Ваш телефон, ну или любое другое кол-во.

2014-11-17_1535388

Фото 2

Если полей нужно добавить, нажимайте кнопка сгерерировать тэг, выбираете нужный пункт и вставляете код в 2 формы (1 — та, которая выводит поле Ваш телефон на сайт, и 2 — та, которая отправляет Вам данные на почту)

Как изменять размер полей Contact Form 7

На странице настройки плагина Contact Form 7 есть код, который отвечает за поля, которые будут присутствовать в форме.

По умолчанию, код выглядит так:

Ваше имя (обязательно)


Ваш E-Mail (обязательно)
[email* your-email]

Тема


Сообщение
[textarea your-message]

[submit "Отправить"]

Размеры (ширина) полей Contact Form 7 и расстояние между ними регулируются путем добавление размеров или с помощью CSS:

Путем добавления размера:

[textarea your-message 130×20]

То есть добавляем значения 130×20 после стандартного кода.

Например:

Ваше имя (обязательно)


Ваш E-Mail (обязательно)
[email* your-email <strong>30x20</strong>]

Тема


Сообщение
[textarea your-message <strong>60x20</strong>]

[submit "Отправить"]

Я сделал следующие вещи:

  • Что означают эти цифры ? Например —  
  • 1 цифра — 30 — задает ширину поля
  • 2 цифра — 20 — задает максимальное количество символов в нем.

Путем CSS

input[type=text], input[type=email], input[type=url], input[type=password], input[type=tel] {
border: 1px solid #efefef;
padding: 10px 20px;
width: 100%;
}

где width: 100% — задает ширину на весь блок. может быть параметр в Px (300px)

Сообщение об ошибке

Если в код контакт формы добавить строку — html_class=»use-floating-validation-tip» то при наведении на поле где есть ошибка, сообщение об ошибке пропадет.

[contact-form-7 404 "Not Found"]

Позиционирование информации об ошибке

2015-05-19_223604

Для такого же результата добавляем код:

.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;
}

wpcf7-form div.wpcf7-response-output — самое нижнее сообщение об ошибке.


1 тип — CSS для Contact Form 7

Contact Form 7


/*---------------------------------------------------------------------------------*/
/* 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 тип — CSS для Contact Form 7

Screen-Shot-2013-07-24-at-16.34.411


/*---------------------------------------------------------------------------------*/
/* 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 тип — CSS для Contact Form 7 ( включает в себя иконки возле поля )

2015-07-21_112145


/*---------------------------------------------------------------------------------*/
/* 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 class:mybtn «Отправить» ]

Для отображение иконок добавить их в папку где лежит шаблон \ img.

http://myhelps.ru/wp-content/uploads/2012/06/icon-cf7.png

Переадресация при безошибочном заполнении Contact Form 7

По стандарту, после отправки сообщение с сайта, с использованием Contact Form 7, мы видим следующие сообщение: Ваше сообщение было отправлено успешно. Спасибо.

Если Вам нужно вместо этого сообщение добавить что либо другое, например другой текст с картинкой, то дописываем следующие параметры:
1 часть в CSS

.wpcf7-form.sent
{
    display:none;
}

#thankYou
{
    font-size: 18px;
    display: none;
}
 

Это на старницу где размещена контакт форма в HTML редактор, чтоб вставились DIVы.

<div id="thankYou">Thank you</div>
 

В дополнительные действия в настройках Contact Form 7

 on_sent_ok: "$('#thankYou').show()"

 

А так же есть возможность сделать переадресацию на другую страницу, при безошибочно заполненной формы.

В дополнительные действия в настройках Contact Form 7 пишем  код:

on_sent_ok: "location.replace('http://любой-адрес.ру/');"

Подставляем различные значения в поле

Допустим, мы используем Contact Form 7 как быстрый заказ, где предлагается ввести только имя и телефон. В таком случае, нам придется спрашивать у клиента, какой товар он заказал, или использовать скрытые поля для пометки, с какого URL отправлено письмо, или же мы можем использовать плагин Contact Form 7 Dynamic Text Extension.

Он добавляет возможность вставки новых полей

2015-07-25_232729

После вставки нового поля, при открытии страницы или формы popup, видим уже подставленное значение (в моем случае это произвольные поля WordPress), которое я прописал при публикации товара.

2015-07-25_232946

[dynamictext dynamicname "CF7_get_custom_field key='Marque'"]

Как сделать ?

В шаблон формы добавляем:

[dynamictext dynamictext-580 id:artikul "CF7_get_custom_field key='artikyl'"]

где — artikyl — моё произвольное поле, а в шаблон письма добавляем

товар - [dynamictext-580]

В итоге после отправки сообщения на почту нам придет письмо следующего содержания:

2015-07-25_233326

Удачи всем, разработка, продвижение и поддержка сайтов by Macsimus

Другие статьи

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

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

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

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

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

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

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

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

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

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

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

Введите адрес сайта, который нуждается в продвижении *

Указать точное время звонка

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

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

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

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

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

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

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

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

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

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка