🚀 Contact Form 7 - плагин контактной формы для Wordpress в г. Москва заказать

17 февраля 2019 в 0:51 Блог веб-разработчика

Содержание

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

На мой взгляд лучшее решение что существует на момент 2018 года. Плагин очень гибок в настройке и имеет широкой спектр применения. Я применяю данную форму на всех сайтах которые я разрабатываю.

Общие сведения об установке

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

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

2014-11-17_153908

Вид по умолчанию форма 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 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;

}

Готовые современные стили 2018-2019 года для Contact Form 7

Стиль №1

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

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

2015-07-21_112145

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

/*---------------------------------------------------------------------------------*/

/* 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://iwebs.pro/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 пишем код:

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

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

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

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

2015-07-25_232729

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

2015-07-25_232946

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

Как сделать ?

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

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

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

товар — [dynamictext-580]

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

2015-07-25_233326

WordPress Contact Form 7 (плагин контактной формы). Расширенные настройки.

Общие сведения об установке

Вид по умолчанию форма Contact Form 7

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

Стилизация сообщения об ошибке в Contact Form 7

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

Готовые современные стили 2018-2019 года для Contact Form 7

Сообщение об успешной отправке или страница спасибо в Contact Form 7

Переадресацию на другую страницу

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

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

Разделы блога

Мои услуги

CMS с которыми мы работаем:

Тип сайта которые мы обслуживаем:

О сайте

Статьи из блога:

Быстрые ссылки

Покупателям