Главная / Плагины / Настройка плагина Contact Form 7

Настройка плагина Contact Form 7

Плагин Contact Form 7 поможет организовать обратную связь на вашем сайте.

Скачать плагин Contact Form 7 можно на официальном сайте WordPress Скачать

Скачать плагин Really Simple CAPTCHA можно на официальном сайте WordPress Скачать

Как установить и подключить этот плагин мы рассмотрели в уроке «Форма обратной связи для сайта«, сейчас разберемся с дополнительными функциями плагина  Contact Form 7. Форма корректно работает на мониторах, планшетах, телефонах и ноутбуках. Кстати если у вас сломался ноут, то есть сервис где делают ремонт ноутбуков HP.

После того как вы скачали и активировали плагин зайдите в настройки плагина  перейдя в новый раздел панели управления «Контакты».

Наведите мышкой на название формы и выберите «Редактировать»

редактировать Contact Form7

Откроется окно изменения параметров формы

имя формы ContactForm7

 

Так как на сайте может использоваться не одна, а несколько форм (форма отправки сообщения, форма заказа звонка, форма с анкетными данными), то чтобы не возникало путаницы какая форма за что отвечает, нужно изменить имя формы. Для этого кликните по названию формы 1.

В блоке №2 отображается то, что будет выводится на странице в форме. Сначала идет текст, название поля, после код этого поля.  Вы можете изменить текст на тот который вам нужен.

Для добавления новых полей в форму нажмите на выпадающий список №3 — «Сгенерировать тэг» и из выпадающего списка выберите необходимый элемент.

  • Текстовое поле
  • E-mail
  • URL
  • Номер телефона
  • Число (spinbox)
  • Число (slider)
  • Дата
  • Текстовое поле
  • Выпадающее меню
  • Checkboxes
  • Radio buttons
  • Acceptance
  • Вопрос
  • CAPTCHA
  • Отправка файла
  • Кнопка отправки

Подсказки и поля формы по умолчанию располагаются так: вверху подсказка, внизу элемент.  Если хотите расположить описание и элемент в одну строку — уберите после текста тэг <br />
. Весь блок с описанием и элементов должен быть в одну строку и находиться внутри тэга <p>.

Текстовое поле

Из выпадающего списка выберем элемент «Текстовое поле»

добавить текстовое поле Contact Form 7

Если любая функция которую добавляете обязательна — поставьте галочку 1 и не забудьте от этом написать в описании.

Можно в поле ввода добавить дополнительную информацию, чтобы сделать более понятным заполнение формы. Отметьте галочкой пункт 2 «Использовать как заполнитель (placeholder)?» и рядом в поле впишите подсказку. При заполнении этого поля в форме текст подсказки исчезнет. Дальше следуйте подсказкам плагина. В результате получится такое вот поле в готовой форме:

Обязательно вставьте код в шаблон письма, иначе данные из этого поля не передадутся на почту! Это касается не только текстовых полей но и любых других элементов.

E-mail

поле email

Используется для передачи в форму адреса почтового ящика отправителя

URL

поле url

Позволяет добавить в форму адрес сайта.

Номер телефона

поле телефон

В это поле возможно вписать только цифры

Число (spinbox)

поле число

Поле, в котором можно установить количество чего-либо, например товара. Количество устанавливается стрелками вверх/вниз.

Дата

поле дата

Вставляет в форму календарь с возможностью выбора даты. Например используется для резервации номеров в отеле. Дата заезда, дата отбытия.

Текстовое поле

текстовое поле

Да, не удивляйтесь 🙂 Еще одно текстовое поле. На этот раз, это поле имеет большие размеры и позволяет писать в него много текста. Например отзывы, комментарии.

Выпадающее меню

выпадающий список

Когда много вариантов чего-либо и необходимо выбрать какой то пункт из большого списка, например список городов, улиц, товаров.

поле выпадающий список

Список необходимо разместить в поле Выбор, каждый пункт с новой строки.

Checkboxes

поле чекбоксынастройка чекбоксов

Флажком, или на жаргоне разработчиков чекбоксом, называется элемент, который создает поле для проставления галочки. Это поле имеет два состояния — отмечена галочка или нет. Возможен множественный выбор. Располагаются только в ряд, если отметить галочкой «Сделать чек-боксы взаимоисключающими?» то будет возможен выбор только одного параметра.

Radio buttons

поле радокнопокRadio buttons настройка

Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Отметив галочкой пункт » Разместить сначала метку, а потом чек-бокс?» меняется расположение метки и поля выбора, по умолчанию сначала выбор, потом метка.

Acceptance

поле соглашение

Подтверждение чего-либо. Допустим соглашение принятия условий описанных выше.

Вопрос

поле вопрос

настройка вопроса Contact Form 7Это первая линия обороны от спама, самая элементарная. В настройка пишите какой то вопрос, можно цифрами, можно буквами или и так и так, и указываете правильный ответ. Если ответ при заполнении формы будет правильным, то форма отправится. Зеленым отмечено какая часть этой формулы будет отображаться на сайте перед полем ввода ответа, красным — ответ. Правильный ответ в формуле пишется после знака | (вертикальной черты)

CAPTCHA

Добавляет в форму защиту от спама.

поле капча

Для работы этой функции необходим еще один плагин Really Simple CAPTCHA.  Скачивайте, устанавливаете, активируйте плагин.

Далее возвращаемся к редактированию формы и добавляем функцию CAPTCHA.

добавление captcha Contact Form 7

Настройки можно не менять, копируете и вставляете 2 строчки перед кнопкой отправить.

Отправка файла

поле отправки файла

добавить загрузку файла Contact Form7

К форме отправки сообщения можно прикрепить файл. В настройках можно указать максимальный размер в байтах, и разрешенные форматы для загрузки, например .jpg .tiff .doc

Кнопка отправки

Отправка формы. В настройках в разделе «Ярлык» — можно дать название кнопки (Отправить, ответить, послать 🙂 )

Настройка внешнего вида Contact Form 7

Так как плагины имеют свойства обновляться, изменения внешнего вида формы будем производить в файле стилей темы сайта style.css

За отображение формы, ее полей и прочих элементов отвечает код:

 

.wpcf7 { background-color:#ddd;	} /*цвет фона формы */
.wpcf7 input,
.wpcf7 textarea{

padding:5px;
color:#1D1D1D;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
line-height: 20px;

border: 1px solid #C7C7C7;

box-shadow: inset 2px 2px 8px #F9F9F9;

-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;

}

.wpcf7 .wpcf7-list-item{
padding-left: 0;
margin-left: 0;
margin-right: 25px;
}

.wpcf7 .wpcf7-list-item input{
border: none;
padding-left: 0;
margin-left: 0;
}

.wpcf7 select{
outline: none;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
}

.wpcf7 input:hover,
.wpcf7 input:focus,
.wpcf7 input:active,
.wpcf7 textarea:hover,
.wpcf7 textarea:focus,
.wpcf7 textarea:active {

background: #FDFDFD;

outline: none;
}

Что есть тут что.

 .wpcf7 input, .wpcf7 textarea — стиль поля ввода (текстового поля)

  1. padding — задает отступ от содержимого до границы элемента. Здесь — отступ от вводимого в поле текста до границы поля. Устанавливается значение в пикселях Xpx, где X количество пикселей. Пример: padding: 5px 3px 6px 8px;
  2. color — цвет текста.
  3. font-family — шрифт полей ввода.
  4. font-size — размер шрифта
  5. line-height — высота строки
  6. border — рамка вокруг поля ввода
  7. box-shadow — тень блока. inset указывает на то, что тень внутренняя. Если нужна внешняя тень, пропустите это значение. Второе и третье значения 2px 2px указывают на смешение тени по горизонтали и вертикали соответственно. Четвертое значение 8px задает радиус размытия тени. Пятое — #F9F9F9 — цвет тени.

 

Настройка кнопки Contact Form 7

 

.buttons_form {
     padding: 0px;
     height: 30px;
     width: 150px !important;
     border: none !important;
     cursor: pointer;
     color: #fff;
     -webkit-border-radius: .5em;
     -moz-border-radius: .5em;
     border-radius: .5em;
     color: #faddde;
     border: solid 1px #980c10;
     background: #d81b21;
     background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
     background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}

Стиль уведомлений Contact Form 7

Он отвечает за сообщения об ошибках или успешной отправке

.wpcf7 .wpcf7-validation-errors{
border:none;
background-color:#246416;
color:#fff;
margin:0;
padding:20px;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ok{
border:none;
background-color:#7ad33f;
margin:0;
padding:20px;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ng{
border:none;
background-color:#349622;
margin:0;
padding:20px;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

color: white;
}

.wpcf7 span.wpcf7-not-valid-tip{
border:none;
background-color:#349622;
padding:5px;
padding-left: 5px;
padding-right: 5px;
border-radius:10px;
width: 290px;
color: white;

/* Drop shadow */
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}

А теперь для удобства весь код целиком с комментариями:

.wpcf7 { background-color:#ddd;	} /*цвет фона формы */
.wpcf7 input,
.wpcf7 textarea{ /* Данная часть кода отвечает за стиль полей ввода, текстовые области */

padding:5px; /* Устанавливает отступ от полей элемента до его содержимого, можно поставить любое знаниче, например 10px */

color:#1D1D1D; /* Цвет текста в полях ввода */

font-family:Arial, Helvetica, sans-serif; /* Шрифт текста в полях ввода */

font-size:16px; /* Размер текста в полях ввода */

line-height: 20px; /* Высота стоки в полях ввода */

border: 1px solid #C7C7C7; /* Рамка вокруг полей. Первое значение - ширина в пикселах, второе - стиль рамки, третье - ее цвет */

box-shadow: inset 2px 2px 8px #F9F9F9; /* Тень от полей ввода. 2px - сдвиг по оси x, 2px - сдвиг по оси y, 8px - радиус размытия тени, #F9F9F9 - цвет тени */

-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;

}

.wpcf7 .wpcf7-list-item{
padding-left: 0;
margin-left: 0;
margin-right: 25px;
}

.wpcf7 .wpcf7-list-item input{
border: none;
padding-left: 0;
margin-left: 0;
}

.wpcf7 select{
outline: none;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
}

.wpcf7 input:hover,
.wpcf7 input:focus,
.wpcf7 input:active,
.wpcf7 textarea:hover,
.wpcf7 textarea:focus,
.wpcf7 textarea:active { /* Данная часть отвечает за стиль полей ввода при наведении на них указателя мыши */

background: #FDFDFD; /* Фон поля ввода при наведении указателя мыши на него */

outline: none; /* Внешняя граница поля ввода текста */
}

.wpcf7 input.wpcf7-submit{/* Данная часть кода отвечает за стиль кнопки Отправить в форме */

-webkit-transition: 0;
-moz-transition: 0;
-o-transition: 0;
transition: 0;

border: none; /* Рамка вокруг кнопки */
position: relative;

color: #fff; /* Цвет текста */

text-transform: uppercase; /* Преобразование текста (uppercase значит, что текст на кнопке будет отображаться заглавными буквами) */

/* Скругление углов кнопки. Значения следующих трех свойств должны быть одинаковы, так как это одно и то же, только для разных браузеров */

-webkit-border-radius: 6px; /* Скругление углов для Chrome */
-moz-border-radius: 6px; /* Скругление углов для Mozilla FireFox */
border-radius: 6px; /* Скругление углов для всех остальных браузеров, в том числе мобильных */

font-size: 14px; /* Размер текста кнопки */
font-weight: bold; /* Стиль текста (bold значит жирный) */
padding-top: 11px; /* Отступ сверху от края элемента до его содержимого */
padding-bottom: 10px; /* Отступ снизу от края элемента до его содержимого */
padding-left: 35px; /* Отступ слева от края элемента до его содержимого */
padding-right: 35px; /* Отступ справа от края элемента до его содержимого */

/* Gradient background - Градиентный фон кнопки */

background-color: #000000; /* Цвет фона кнопки, если градиент не поддерживается браузером */

/*В следующих свойствах цвета должны быть указаны одинаково, так как это одно и то же, только для разных браузеров. Разберем первое свойство. Часть from(#676767), to(#3B3B3B) значит, что надо отобразить градиент, где от цвета #676767) идет переход к цвету #3B3B3B */

background: -webkit-gradient(linear, left top, left bottom, from(#676767), to(#3B3B3B));
background: -moz-linear-gradient(top, #349622, #246416);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#349622', endColorstr='#246416');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)";

/* Drop Shadow - Тень кнопки. Цвет тени указан в RGBA */
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
box-shadow: 0 2px 5px rgba(0,0,0,0.3);

}

/* On hover - Стиль кнопки при наведении указателя мыши. Все почти то же самое, что и в предыдущем блоке */
.wpcf7 input.wpcf7-submit:hover{

cursor: pointer;
text-decoration: none;

background-color: #000000;

background: -webkit-gradient(linear, left top, left bottom, from(#246416), to(#349622));
background: -moz-linear-gradient(top, #246416, #349622);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#246416', endColorstr='#349622');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)";
}

/* On click - стиль кнопки при нажатии на нее се почти то же самое, что и в предыдущем блоке */
.wpcf7 input.wpcf7-submit:active{
top: 1px;

color: #d8c6e2; /* Цвет текста кнопки при нажатии на нее */

background-color: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#246416));
background: -moz-linear-gradient(top, #FF0000, #246416);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#246416');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)";

-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

/* CF7 Messages - Стиль сообщений об успешной отправке, ошибках и т.д. */

.wpcf7 .wpcf7-validation-errors{ /* Стиль сообщений при ошибках валидации */
border:none; /* Рамка блока сообщения */
background-color:#246416; /* Фон */
color:#fff; /* Цвет текста */
margin:0; /* Внешний отступ */
padding:20px; /* Внутренний отступ */

/* Скругление углов для разных браузеров - следующие 3 свойства */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ok{ /* Стиль сообщений об успешной отправке */
border:none; /* Рамка блока сообщения */
background-color:#7ad33f; /* Фон */
margin:0; /* Внешний отступ */
padding:20px; /* Внутренний отступ */

/* Скругление углов для разных браузеров - следующие 3 свойства */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ng{
border:none;
background-color:#349622;
margin:0;
padding:20px;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

color: white;
}

.wpcf7 span.wpcf7-not-valid-tip{
border:none;
background-color:#349622;
padding:5px;
padding-left: 5px;
padding-right: 5px;
border-radius:10px;
width: 290px;
color: white;

/* Drop shadow */
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}

.wpcf7-form .fleft{
float: left;
}

.wpcf7-form .mright20{
margin-right: 20px;
}

.wpcf7-form .mright40{
margin-right: 40px;
}

.wpcf7-form .clear{
clear: both;
}

В тему!

Gravity Forms

Gravity Forms

Gravity Forms v2.0.6 – премиум плагин для создания разных форм на сайте. На сайте еще есть ...

36 комментариев

  1. Статья понравилась. Вроде всё и так было понятно, но с картинками всегда нагляднее и усваивается лучше. Кстати, искал инфу про дополнительные настройки этой контактной формы. Яндекс привет к Вам, но тут их нет. Пойду искать дальше 🙂 любопытно, что в них можно указывать.

    • Андрей

      Дополнительных настроек целая куча, и для их описания есть сайт у разработчиков — http://contactform7.com/docs/
      Но, к сожалению, даже и там не найти ответы на все вопросы. Для воплощения всех идей с формой необходимы знания программирования, которые в одной статье не поместятся 🙂

  2. Настроил форму на сайте http://www.home-engineer.ru , но не знаю как прописать в css доп. настройки.

  3. Ребята, нужна помощь!
    Создал форму обратной связи с помощью CF7 все отлично, кроме двух маленьких сложностей, с которыми я столкнулся. Первое — у выпадающего меню вид отличается от других полей. Все поля выглядят одинаково и под стиль шаблона ВП, а выпадающее меню стандартного виндовского вида. Как мне изменить вид данного меню? В CSS я не столь силен, но и в style.css я ничего не нашел. Второе — как можно поменять размер поля Textareа, чтобы он был по высоте и ширине подходящим? Большое спасибо за ответы.

  4. Всем Привет! Может подскажите! В браузере Firefox поле дата пустое и не появляется календарь. А при вводе даты в поле в формате: дд.мм.гггг пишет «Формат даты некорректен.» Подскажите как исправить если это возможно? Спасибо.

  5. Да… а о дополнительных настройках — шаром покати! Хотелось бы увидеть их.

  6. Евгений

    Привет

    Подскажите плз, поддерживает ли плагин какое-либо программирование по условиям?
    Мне нужен radio-button, в зависимости от которого меняются подписи в placeholderах по умолчанию

    Можно ли это реализовать?
    Спасибо

  7. Евгений

    Кстати
    Может также знаете
    Как «русифицировать» импорт из плагина Flamingo? Кодировка не поддерживается в csv

    спасибо

  8. Николай

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

    • Андрей

      Если все правильно то должно отправляться.
      Если не отправляетя то проблема на хостинге и надо с ними разбираться.
      Попробуйте сделать как описано тут
      А если не поможет то писать в поддержку хостинга.

  9. Добрый день, такая проблема:

    на почту приходят письма с датой формата год-месяц-число, как поменять на привычный нам число-месяц-год

  10. Ребята подскажите пожалуйста, как поменять заливку внутри ячейки формы, а так же цвет рамки формы. Чего-то не получается.

  11. У меня почему-то меняет внешний вид только рамка с сообщением. А все остальные (Имя, тел, почта) — остаются без изменения. Помогите пожалуйста разобраться.

    • Андрей

      Посмотрите пожалуйста что написано ниже «А теперь для удобства весь код целиком с комментариями:» 🙂
      Вроде расписано нормально, сам пользуюсь 🙂 Копирую именно с сайта эти настройки 🙂 Ни чего не добавляю потом от себя 🙂

  12. Подскажите, пожалуйста, как выводить системные сообщения, например, об успешной отправке или ошибках, в popup окне?

    • Андрей

      А при редактировании формы, внизу страницы есть настройка системный сообщений 🙂 Можете написать так как вам надо 🙂

  13. Екатерина

    Скажите пожалуйста, можно ли производить загрузку файлов (изображений) не только с ПК, но и из социальных сетей? instagram например.

  14. Подскажите пожалуйста. После того, как добавил каптчу на форму, при нажатии на кнопку «Отправить», происходит вечная загрузка (значок загрузки/обновления), и сообщение об успешной отправки не выводится. Вообще ни какие не выводяться, будь Успех или Пропал. Как деактивирую плагин каптчи, то все окей.

    • Андрей

      плагин работает корректно на 99,9%. если у вас возникают сложности с ним — возможно какой то из установленных плагинов дает наводку. Отключите все плагины кроме формы и включайте по одному чтобы проверить какой именно конфликтует

  15. Возникла проблема. Добавил форму , все работает отлично. После этого добавил вторую на той же страницы , но вместо второй опять же выводиться первая (дублируется, и там и там первая). Проверил код, вывод форм … прописано все верно

    • Андрей

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

  16. Алексей

    Добрый день!
    Для вывода формы в сайдбар вставляю в текстовый виджет со своим шорткодом, но форма не выводится. При этом во всплывающем окне для заказа обратного звонка все отображается и работает. Смотрю исходный код страницы, а там:

    В чем может быть проблема?

    • Андрей

      что а там? 🙂 вы не написали 🙂
      А причин может быть несколько, от темы тоже зависит, так вот сходу не ответить

  17. Добрый день!
    Как можно сделать чтобы ответное письмо приходило с задержкой в 1 час

  18. Добрый день!
    Можете попробовать помочь со следующей проблемой:
    поставила плагин contact form 7, по умолчанию цвет вводимого текста — светло-серый, нужно поменять цвет на черный. Пробовала менять и в настройках css, и в дополнительный настройках плагина — не работает(

    Последний раз вбила следующий код в доп настройки плагина:
    .wpcf7 input[type=»text»],
    .wpcf7 input[type=»email»],
    .wpcf7 textarea {
    color: #000000;}

    Что может быть не так с этим простейшим кодом?
    Буду очень благодарна за помощь!

  19. Дмитрий

    Добрый день! По умолчанию не подключается css файл плагина на страницу, где есть форма плагина. Отправка работает, а css нет. Из за чего такое может быть?

  20. Добрый день. У меня установлена Contact form 7, но сообщение приходит без вложенного файла. Как можно решить эту проблему?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.