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

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

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

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

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

Спасибо за оставленную заявку
Ожидайте звонка
Готовые решения для Вашего бизнеса
Увеличу число заявок, продаж и прибыль через интернет. Гарантировано!


Мое предложение
Мое предложение

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

Вид услуги *
Разработка сайтаКонтекстная рекламаСЕО продвижениеАналитикаПоддержка и ведениеГотовые сайты

Бюджет *
До 3 000 руб.До 6 000 руб.До 10 000 руб.До 15 000 руб.До 20 000 руб.До 25 000 руб.До 30 000 руб.До 60 000 руб.До 100 000 руб.

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

Введите контактный 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, Тема, Сообщение. Если Вам все поля устраивают или вы побыстрее хотите испытать форму в работе, просто добавьте ШОРТКОД, который сгенерировала форма на страницу в Вордпрес.

Фото 1

[/gn_spoiler]

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

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

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

2014-11-17_1535388

Фото 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 404 "Not Found"][/php]

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

2015-05-19_223604

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

[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

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

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

[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 ( включает в себя иконки возле поля )

2015-07-21_112145

[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.com/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.

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

2015-07-25_232729

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

2015-07-25_232946

[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]

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

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"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

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

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

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

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

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

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

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

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

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

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

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

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

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

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Обсудить условия
Вкратце опишите Вашу ситуацию или задайте свои вопросы, я свяжусь с вами в течении 15 минут в рабочее время
Введите контактный E-mail (используется для ответа)

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

Сообщение

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