Contact form 7 настройка

Каждому владельцу сайта хочется иметь контактную форму для отправки сообщений от пользователей и получения их на свою почту. Это, так называемая форма обратной связи. Тоесть, посетитель может отправить свое письмо веб-мастеру прямо с сайта, не открывая свой почтовый ящик. Лучший плагин для реализации этой функции Contact Form 7 не отправляет письма. В моей статье описана правильная настройка плагина Contact Form 7, чтобы все работало корректно.

Принцип действия плагина Contact Form 7

Данная форма располагается на любой странице вашего сайта (нужно лишь скопировать строчку и вставить ее в нужное место). Посетитель сайта заполняет обязательные поля (к примеру, свое имя, e-mail, сообщение), и плагин через один почтовый ящик (назовем его «отправитель») посылает письмо на другой ящик («получатель»).

Тоесть, вы должны зарегистрировать 2 почтовых ящика – отправитель и получатель. Отправитель лучше создать в Яндекс почте, а получатель – это официальный ящик вашего сайта.

Настройка плагина Contact Form 7. Инструкция

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

2) Настраиваем контактную форму плагина Contact Form 7. Нажмите «Изменить» и далее «Шаблон формы». Вот пример, как она должна выглядеть с обязательными полями: имя пользователя, его почта, сообщение и кнопка «отправить»:

3) Вкладка «Письмо» отвечает за внешний вид писем, которые вы получаете.

Кому – адрес ящика получатель

От кого – [your-name] <адрес ящика отправитель>

Тема – [your-subject]

Тело письма – [your-email] [your-message]

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

Настройка плагина WP-Mail-SMTP. Инструкция

From Email – адрес ящика отправитель

From Name – к примеру, название вашей организации или ваше имя

Mailer – функция отправки писем. Выберите «Send all WordPress emails via SMTP»

SMTP Options

SMTP Host – для Яндекс почты smtp.yandex.ru

SMTP Port – для Яндекс почты 465

Encryption – Use SSL encryption

Authentication – Yes: Use SMTP authentication

Username – логин на вашей почте отправитель

Password – пароль на вашей почте отправитель

Настройка завершена. Сохраните изменения.

buxrabota.com

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

E-mail

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

URL

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

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

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

Число (spinbox)

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

Дата

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

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

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

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

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

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

Checkboxes

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

Radio buttons

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

Acceptance

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

Вопрос

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

CAPTCHA

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

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

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

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

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

К форме отправки сообщения можно прикрепить файл. В настройках можно указать максимальный размер в байтах, и разрешенные форматы для загрузки, например .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;  }  

urokwp.ru

Настройка Contact Form 7

Тут нам придется разобраться в четырех вкладках — «Шаблон формы«, «Письмо«, «Уведомления при отправке формы» и «Дополнительные настройки«. Рассмотрим каждую в отдельности.

Шаблон формы

Пожалуй, самая важная из вкладок настроек плагина. Шаблон формы представляет из себя редактор кодов плагина. Тут уже находятся существующие короткие коды стандартной контактной формы. Можно их удалять или добавлять новые. Рассмотрим назначение всех кодов, доступных в редакторе.

1. text — текстовое поле для ввода короткого текста в одну стоку (имя, тема сообщения и т.д.).

2. email – поле для ввода адреса email. Письмо с некорректным адресом не удастся отправить, именно этим и отличается поле от простого текстового. (Оба этих поля обычно обязательны к заполнению, что исключает рассылку анонимных сообщений).

3. URL — адрес сайта или страницы.

4. tel — номер телефона, не надо объяснять что это такое.

5.1 number — число (spinbox), количество чего-либо, например заказываемого товара.

5.2 number — число (slider), что это за шляпа, я так и не понял. Скажу спасибо тому, кто мне объяснит в комментариях его назначение.

6. date  — дата в формате дд.мм.гггг.

7. text area — текстовое поле, вмещает в себя текст большого объема, собственно само сообщение.

8. drop-down menu —  выпадающее меню, создаст выпадающее меню.

9. Checkboxes – генерирует «чекбоксы». Пользователь выбирает нужное установкой галочек.

10. Radio buttons – в буквальном переводе «радиокнопки». Настройка, как и в выпадающем меню. Пользователь выбирает нужный вариант из предложенных.

11. Acceptance – по принципу «С правилами ознакомлен и согласен». Пока пользователь не поставит галочку, кнопка отправки сообщения будет не активна.

12. quiz — вопрос, защита от спам-роботов. Перед отправкой сообщения необходимо ответить на однозначный вопрос, который вы зададите в настройках. Перед вертикальным слешем пишется вопрос, а за ним правильный ответ.

13. reCaptcha – тоже защита от спама, но с помощью генерируемой картинки с символами, которые необходимо ввести в поле перед отправкой сообщения. (Спам через контактную форму рассылается очень редко. Советую не использовать защиту, чтобы не раздражать отправителя).

14. file — отправка файла, генерирует код для создания кнопки выбора файла и прикрепления его к письму.

15. submit — кнопка отправки, сама кнопка, нажатием на которую, сообщение отправляется.

!!! Для наглядности, ближе к концу статьи, я размещаю форму, созданную из всех вышеперечисленных тегов, кроме каптчи. Можете оценить их в действии. Ни одно поле в форме необязательно к заполнению! Разрешаю вам наслать мне разных анонимных сообщений ? ? :-). Цензура отсутствует.

Для примера рассмотрим процедуру добавления кода прикрепления файла «file» в контактную форму. Процесс этот довольно прост. Выполните следующие действия:

• — Поставьте курсор в то место редактора, куда должна встать кнопка прикрепления файла к письму.
• — Нажмите на кнопку «file» в верхней панели редактора шаблона формы. Откроется следующее окно.

1. Если поставить тут галочку, пользователь не сможет отправить сообщение без прикрепленного файла. Обратите внимание, в коде кнопки за file появится звездочка. Эту опцию можно назначить любому полю вашей контактной формы.
2. Тут итак все понятно. Скопируйте надпись в этом поле, вам она обязательно понадобится на следующей вкладке «Письмо«. Иначе прикрепленный файл просто не дойдет до адресата.
3. Сюда впишите разрешенный размер файла. Если оставить поле пустым, то по умолчанию ограничитель будет равен 1 mb . Допускается вписывать только целые числа просто в байтах, в mb или в kb.
4. Разрешенные типы файлов вписывайте через вертикальный слэш. Если ничего не писать, то по умолчанию будут разрешены файлы с расширениями jpg, jpeg, png, gif,pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, wmv.
5. Если не знаете для чего нужны поля Id attribute и Class attribute, то и заполнять их не следует. А завершающим действием останется только нажатие кнопки «Insert Tag«.

В редакторе формы можно дописать над кодом «Прикрепить файл«, чтобы посетители не ломали голову о назначении этой кнопки. И не забудьте вставить теги абзаца и переноса строки, о которых я упоминал выше.

Приступим к рассмотрению следующей вкладки — «Письмо«.

Письмо

Итак, после создания своей контактной формы перейдите на вкладку «Письмо». Эта часть настроек отвечает за доставку, внешний вид и информативность писем, пришедших адресату, то есть Вам.

1. Обязательно впишите сюда адрес своей электронной почты, на который будут приходить сообщения. Иначе, почта просто не дойдет.
2. Два коротких кода «[your-name]» и «<[your-email]>» сообщат имя отправителя и его E-mail.
3. Тема сообщения, с которой к вам обращается посетитель.
4. ——
5. Само тело сообщения. Вы можете использовать для информативности любые коды, которые использовали в шаблоне (они представлены в шапке вкладки, сразу под надписью «In the following fields, you can use these mail-tags:«. Сопровождайте коды в теле сообщения понятными пояснениями, например От кого, Тема сообщения, Тело сообщения.
6. Можно не получать пустые строки с полей, необязательных к заполнению, если отправитель их не заполнил. Попробуйте также опцию HTML  формата письма.
7. В поле «File Attachments» обязательно вставьте код для вложения, если вы поставили кнопку прикрепления файла. Об этом я говорил выше.
8. Опцию «Письмо 2» активируют в качестве дополнительного почтового шаблона для автоответчика. Об этой опции и как ей пользоваться я напишу немного позже.

Уведомления при отправке формы

Тут все переведено и понятно, даже скриншот делать не буду. Всплывающие сообщения, написанные в полях вкладки, получит отправитель при неправильном заполнении формы, успешном или неуспешном отправлении сообщения.

С переводом на русский язык тут пока проблем нет. Однако, с каждым обновлением плагина картина может меняться, как на других вкладках. Если это произойдет, сообщите в комментариях, переведем.

Дополнительные настройки

Эта часть статьи еще не готова к публикации. Скажу лишь, что тут вы можете настроить отслеживание заполнения форм пользователями, например в Яндекс метрике.

Можно еще изменить размер полей в контактной форме. Размер текстового поля в одну строчку задается числовыми значениями в конце тега перед закрывающейся квадратной скобкой. Например, вот тег для имени с новыми размерами —  [text* your-name 50/41]. Здесь 50 — длина текстового поля, а 41 — количество символов, которое можно в это поле прописать. Если ничего не прописывать, длина текстового поля по умолчанию равняется 40, а разрешенное количество символов до бесконечности.

Вот тег с измененными размерами для сообщения —  [textarea your-message 80×10]. Здесь 80 — длина поля в символах, а 10 — его высота в строчках. Экспериментируйте с этими циферками пока размеры полей вашей контактной формы не будут гармонично вписываться в дизайн страницы. Ниже картинка для наглядности со стандартной контактной формой.

Вот и все настройки плагина Contact Form 7.

Ошибка при отправке сообщения. Попытайтесь позже или обратитесь к администратору сайта.

Вот такое сообщение всплывает под формой Contact Form 7 в некоторых случаях после попытки отправить сообщение администратору сайта.

1. Почти всегда ошибка кроется не в плагине, а в php функции mail() сервера. Либо эту функцию хостинг не поддерживает, либо функция не включена или работает с ошибками. Если функция php_mail() поддерживается хостингом, то очень часто причиной сбоя отправки сообщений является:

• — Тестовый период хостинга. В этот период функция отправки почты выключена по умолчанию. Решение – оплатить услуги хостинга;
• — Сбой функции на сервере. Решение – обратиться в службу поддержки хостинга. Часто, для восстановления функции, достаточно отлинковать домен, а затем прилинковать его обратно.

2. Намного реже ошибки в отправке сообщений возникают из-за конфликта Contact Form 7 с другим плагином. В этом случае помогает поочередная деактивация плагинов. После деактивации которого Contact Form 7 заработает, тот и является конфликтным.

P.S. Коллеги, проверяйте папку СПАМ вашего почтового ящика после отправки письма самому себе при тестировании работы плагина. Это самая распространенная причина «недоставки» писем адресату, особенно на gmail.

wordpress-book.ru

Настройка Contact Form 7 WordPress?

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

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

Каждая контактная форма имеет свой собственный короткий тег, такой как [contact-form-7 id="71" title="Контактная форма 1"]. Чтобы вставить контактную форму в свой пост, скопируйте шорткод и вставьте его в содержание поста.

Если ваша форма не отображается и выдает ошибку contact-form-7 404 «Not Found»

Код [contact-form-7 404 "Not Found"] является признаком того, что контактная форма заданная шорткодом, не может быть найдена. Убедитесь, что вы используете правильный код вставки. Попробуйте повторить вставку скопировав нужный код еще раз.

Как добавить или отредактировать поле для изменения внешнего вида формы Contact Form 7?

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

Каждый тег имеет строгий синтаксис, поддерживая несколько вариантов. Изучение синтаксиса может быть трудно, но вы можете легко сделать пользовательский тег с помощью генератора тегов вместо этого. Нажмите кнопку тега и после форматирования нажимайте «Создать Тэг». Так же вы можете ознакомиться с тем как изменять внешний вид формы в отдельной статье.

Внутренние настройки формы Contact Form 7.

В каждой форме доступны такие настройки:

• Настройка шаблона формы;
• Письмо;
• Уведомления при отправки формы.

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

Произведя все внутренние настройки Contact Form 7 вы получите отредактированный код для вставки, который будет внедрен вами в нужную область на сайте.

Как указать или изменить тему сообщения?

Просто измените поле «Тема» поле в разделе «Письмо». Для этого зайдите в нужное меню настроек и измените стандартный тег на свое название.

Как установить автоответчик к форме Contact Form 7?

Для того что бы установить автоответчик, который будет срабатывать после того как было успешно отправлено первое письмо нужно перейти в раздел «Письмо, опустится вниз настройки и поставить галочку возле «Письмо 2». После появления формы, настроить по нужным вам критериям, по аналогии с «Письмо 1».

Почта, которая приходит через контактную форму плагина Contact Form 7 показывает «WordPress», как имя отправителя. Как изменить это?

Адрес отправителя состоит из адреса электронной почты отправителя и дополнительного имени отправителя. WordPress присваивает «WordPress» в качестве имени отправителя, если параметр не отформатирован. Если вы хотите использовать другое имя, чтобы «WordPress» больше не появляется в качестве имени отправителя, вы должны явно указать имя отправителя в поле «От:» поле в разделе «письмо»:

 

Можно ли размещать контактную форму вне поста?

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

Как вставлять контактную форму в файле шаблона?

Вы можете вставлять шорткод непосредственно в тему шаблона, для этого будет нужно воспользоваться функцией do_shortcode(). Это можно сделать с помощью такой строки:

<?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' ); ?>

Сообщение об ошибке «Не удалось отправить сообщение». Contact Form не отправляет письма. Что не так?

Причин для такого сообщения обычно может быть несколько:

• Первой актуальной причиной может быть почтовый сервер, с запретом на отправку почтовой формы. В этом случае сообщение об ошибке будет окружено красной линией. Свяжитесь с администратором сервера для решения.
• Второй возможной причиной является то, что форма отправки находится под подозрением спама. В этом случае сообщение об ошибке будет окружено оранжевой линией.

Сообщение ответа «Ваше сообщение было успешно отправлено», но письмо не доходит.

Если показано сообщение в зеленой окантовка это означает, что функция PHP для отправки почты, безусловно, успешно завершена. Так что, если вы не можете получить почту, то весьма возможно, что почта была похищена или удалена.

Если вы можете проверить журнал вашего почтового сервера, это может дать вам некоторые подсказки.Спам-фильтр часто вызывает проблемы такого рода.

Контактная форма перенаправляет на страницу ошибки 404 после отправки.

Эта проблема вызвана сочетанием двух ошибок конфигурации. Во-первых, AJAX JavaScript не работает на вашей контактной форме. Из-за этой проблемы, ваша контактная форма вынуждена перенаправлять после отправки. Во-вторых, ваша контактная форма использует недоступные слова в названиях полей ввода. Этот вопрос смущает WordPress, в результате чего появляются 404 («Not Found») ошибки.

Контактная форма ведет себя странно в некоторых браузерах.

Это может быть вызвано из-за неверного HTML, CSS, Javascript. Пожалуйста, проверьте Вашу страницу формы с валидаторов или инструментов отладки.

Полезные инструменты:

• Firebug — расширение Firefox. Хорошо для отладки JavaScript.
• W3C Markup Validation Service — служба проверки HTML.
• W3C CSS Validation Service — служба проверки CSS.

Как использовать контактную форму на нужном языке, а не на английском.

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

Contact Form 7 устанавливает параметр языка WordPress. После того, как вы измените языковые настройки WordPress, Contact Form 7 также изменяется.

CAPTCHA не работает, изображение не появляется.

Чтобы использовать CAPTCHA, нужно что бы GD и FreeType библиотеки были установлены на вашем сервере. Кроме того, убедитесь, что временная папка для CAPTCHA установлена с правами для записи.

Поле ввода текста для CAPTCHA работает на Internet Explorer, но не в Firefox. Невозможно ввести код.

Это хорошо известная проблема вызванная злоупотреблением тега <label>. Убедитесь, что вы правильно его используете.
Правильное использование:

Это не будет работать правильно:
<label>[captchac your-captcha] Enter the code: [captchar your-captcha]</label>

yrokiwp.ru

Скачайте предложенный js файл к себе на сайт в КАКУЮ ХОТИТЕ директорию. В шаблоне сайте подключите по принципу:

< script type='text/javascript' src='http://ваш_сайт.ru/КАКАЯ_ХОТИТЕ_ДИРЕКТОРИЯ/jquery.maskedinput.js'>