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

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

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

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

E-mail

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

URL

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

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

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

Число (spinbox)

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

Дата

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

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

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

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

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

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

Checkboxes

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

Radio buttons

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

Acceptance

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

Вопрос

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

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

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

Настройки можно не менять, копируете и вставляете 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

Стиль уведомлений 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; }

(Последнее обновление: 19.05.2019)

Приветствую вас, уважаемый читатель! Сегодня я покажу вам, как создать форму обратной связи с автором сайта/блога в вордпресс, при помощи популярного плагина Contact Form 7 (более 5 млн. установок). В пост включено: правильная настройка Contact Form 7 , защита от спама, как изменить и настроить внешний вид формы. А также указал на основные причины - почему не работает и не отправляет письма контактная форма .

Контактная форма является важным средством для поддержки связи со своими читателями и наоборот. Чиркнуть личное письмецо, сделать предложение автору (от которого он не сможет отказаться), задать вопрос, отправить какой нибудь и многое другое. Все это возьмет на себя и не разгласит посторонним ценную информацию, наша контактная форма WordPress Contact Form 7. Вот, как то, так. Написал так написал, самому аж понравилось.

О, письмо пришло! Контактная форма 7 молодец

Не буду вас утомлять, уважаемый читатель, всякой писаниной - перейдем к делу. Установка и правильная настройка модуля для Вордпресс - контактная форма 7.

Плагин WordPress Contact Form 7

Плагин для WP Contact Form 7

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

Все манипуляции производим в админке вордпресс. Для того, чтобы установить плагинчик, в разделе "Плагины" нажимаем "Добавить новый". Вводим в окошко "Поиска" Contact Form 7. Естественно он отобразится первым. Кликаем кнопку "Установить:

Как установить плагин

Контактная форма № 1 по умолчанию

Из картинки видно, что по умолчанию представлена стандартный вариант формы для связи и готовый шорткод для вставки на новую страницу, запись или на боковую панель (через текстовый виджет). Contact form 7 внешний вид по умолчанию, установленная на отдельной странице сайта:

Внешний вид: Стандартная контактная форма на сайте WordPress

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

Откроется страница "Редактировать контактную форму". Плагин на русском языке и поэтому вам разобраться что к чему, будет очень легко. Вкладка "Шаблон формы". Вы можете изменить шаблон формы под свои нужды.

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

Редактировать контактную форму. Вкладка файл

Откроется окно - Генератор тега формы: файл:

Чтобы прикрепить файл загруженный к почте, вам нужно вставить тег ()

Контактная форма 7 применяет ограничения по умолчанию для типа файла и размера файла. Когда вы не устанавливаете свои параметры, то по умолчанию расширения файлов являются: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. А допустимый размер файла составляет 1 МБ (1048576 байт). Жмём кнопочку "Вставить тег":

Тег файл вставлен в шаблон формы

Где отметили курсором мышки там и появится дополнительный тег. Если вставился не в том месте, то просто копируете его и помещаете в нужное. Таким же способом добавьте нужные теги в вашу форму. Обязательно после добавления дополнительных тегов нажимайте синею кнопку "Сохранить". А вот так, будет выглядеть кнопка для прикрепления файла к письму, после поля сообщения:

Кнопка Выберите файл в контактной форме

Если всё правильно делаете, то проблем с дополнительными полями, у вас не будет.

Ещё проверьте вкладки Письмо, Уведомления при отправке формы и Дополнительные настройки. По моему там и менять ничего не надо. Если только в Дополнительных настройках можно указать параметр - только для подписчиков - subscribers_only: true . Для подробной информации будет ссылка на страницу настроек дополнительных параметров.

А теперь, друзья, нам нужно подготовленную контактную форму разместить на отдельную, новую страницу или боковую панель веб-ресурса. Делается это легко.

Размещаем контактную форму на отдельной странице сайта/блога

После всех настроек и сохранения формы, скопируйте шорткод на странице Контактные формы или Редактировать контактную форму. После этого, создайте новую страницу - раздел Страницы - Добавить новую. Вписываем название страницы, например "Контакты". Переключаем редактор сообщений в режим "Текст" и вставляем шорткод в поле сообщений:

Новая станица с контактной формой

Если у вас новая страница автоматически добавляется в меню, то выставляем "Порядок" 1, 2 или 3 (какая по счету в меню, будет отображаться страница Контакт). Нажимаем кнопку "Опубликовать". Всё. Готово. Так же вы можете добавить страницу в меню вручную. Теперь у вас установлена форма для связи с автором блога/сайта.

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

Получаете спам через Contact Form 7?

Есть защита. Спамеры затрагивают всё, ваши контактные формы не являются исключением. Прежде чем вас заспамят, защитите ваши контактные формы с помощью мощных анти-спам функций Contact Form 7.

Contact Form 7 поддерживает фильтрацию спама с Akismet. Интеллектуальная reCAPTCHA блокирует раздражающих спам ботов. Используя черный список комментариев вы можете также блокировать сообщения, содержащие определенные ключевые слова или отправляемые с определённых IP адресов.

Нажмите пункт "Интеграция". Сервис Google reCAPTCHA защищает вас от спама и других видов автоматического злоупотребления. С модулем интеграции reCAPTCHA Контактной формы 7 вы можете заблокировать форму отправку спам-ботами.

Интеграция Google reCAPTCHA v3: защита от спама

Интеграция плагина с другими сервисами recaptcha

Топчите Setup Integration, а после перейдите по ссылке, чтобы получить ключи ReCaptcha API:

reCAPTCHA - это сервис Google

Чтобы начать использовать reCAPTCHA, сначала необходимо зарегистрировать ваш сайт WordPress. reCAPTCHA - это сервис Google, поэтому для его использования вам необходим аккаунт Google. Войдите в Google, используя учетную запись, и перейдите по ссылке https://www.google.com/recaptcha/admin . Вы увидите простую регистрационную форму, такую ​​как:

Зарегистрировать сайт WordPress. Goodle reCAPTCHA

Укажите название. Выберите reCAPTCHA v3 (для работы reCAPTCHA v3 не нужен виджет CAPTCHA (флажок «Я не робот», используемый в reCAPTCHA v2)) и введите домен сайта в поле Домены. После регистрации сайта вы получите ключ сайта и секретный ключ. Введите их (скриншот выше) и сохраните настройки. Вот и все. Теперь ваша контактная форма используют счет reCAPTCHA, чтобы проверить, была ли отправлена сообщение от человека или от спам-бота.

Если вы решите установить Contact Form 7, то я советую дополнительно к нему установить аддон Contact Form 7 Style. Он позволит вам редактировать внешний вид вашей формы. Вы сможете не только выбрать один из готовых шаблонов, но и создать свой собственный уникальный дизайн. Хотите изменить внешний вид? Тогда продолжение специально для вас, ценителей красоты.

Внешний вид контактной формы - Contact Form 7 Style

Стили для форм обратной связи 7

Плагин Contact Form 7 Style - это аддон для Contact Form 7, который необходимо установить на вашем сайте WordPress. Поддерживает пользовательские стили, которыми можно легко управлять через панель администратора. Также есть предопределенные шаблоны которые можно активировать в настройках контактной форме 7. В настройках основного плагина появится новая вкладка - Contact Form 7 Style Template. Настройка внешнего вида:

Готовые шаблоны для формы

Пример, я изменил стандартный внешний на такой симпатичный:

Внешний вид формы для связи

Не забывайте, что можно задать свои, пользовательские параметры стиля:

Плагин поддерживает пользовательские стили, которыми можно управлять через админпанель

И в заключение:

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

Почему не работает (не отправляет письма) Contact Form 7?

1. Проблемы вашего хостинга. Важно отметить, что отправка и получение электронных писем в значительной степени зависит от сервера, на котором размещен ваш сайт WordPress;
2. Убедитесь, что используется правильный обратный электронный адрес;
3. Ваше письмо может рассматриваться как спам;
4. Плагины или тема конфликтует с Contact Form 7;
5. Конфликты Javascript.

Если вы не можете отправлять электронные письма из этого плагина, вполне вероятно, что вы не можете отправлять электронные письма из WordPress в целом. В случае чего, господа, получить на часто задаваемые вопросы по работе плагина вы можете на странице https://contactform7.com/faq/.

Или на форуме поддержки https://wordpress.org/support/plugin/contact-form-7/ . Английский язык не беда, с переводом любимого браузера будет всё понятно.

На этом у меня всё. Вроде, ни чего не забыл. Всего доброго. Удачи, друзья.

P.S. Оказывается на редактирование старых постов (информация для читателей должна быть актуальной всегда) уходит столько же времени, как на написание новой инструкции. Ужас!

В этом материале будет детально описана настройка Contact Form 7 - плагина для такой популярной платформы по созданию и продвижению сайтов в Глобальной паутине, как «Вордпресс». Этот программный инструмент позволяет создавать и конфигурировать формы обратной связи.

Немножко о «Вордпрессе»

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

Сильные и слабые стороны данной платформы по созданию и продвижению сайтов

Плюсы этой программной платформы такие:

Простота и открытость исходных кодов.

Внушительное количество справочной информации.

Возможность разработки любого по степени сложности тематического ресурса в интернете за кратчайшие сроки.

Высокое быстродействие без дополнительных программных надстроек (плагинов).

А вот недостатки в этом случае следующие:

Сайты, созданные на основе «Вордпресс», не справятся с большой нагрузкой.

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

и зачем они нужны сайтам на базе платформы «Вордпресс»

Базовый функционал такой системы управления контентом, как «Вордпресс», весьма скромный. Его лишь достаточно для разработки наиболее простых блогов и сайтов. Чтобы хоть как-то улучшить ситуацию с функциональностью программной платформы и добавить ей гибкости, разработчикам приходиться доустанавливать специальные мини-программы, которые на профессиональном жаргоне называются плагинами. Одной из таких и является Contact Form 7. Настройка плагина позволяет на определенной странице системы управления контентом создать форму обратной связи с расширенным уровнем функциональности.

Специализация «Контакт форм 7»

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

Порядок установки плагина

Существует три способа установки плагинов на платформе «Вордпресс»:

Путем скачивания ZIP-архива из глобальной паутины и «заливки» его в соответствующий каталог интернет-ресурса.

С использованием различного рода FTP-клиентов.

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

Заходим в административную панель «Вордпресса».

Затем необходимо переместиться в раздел «Плагины».

В открывшемся окне выбираем пункт «Добавить новый».

В строке поиска вводим название плагина - Contact Form 7 - и после этого наводим указатель мышки на кнопку «Поиск» и делаем однократный клик. После этого начнется операция поиска необходимого программного обеспечения.

По ее окончании высветится список найденных плагинов. В этом списке находим тот, который нам нужен, и кликаем по кнопке с надписью «Установить», которая расположена напротив него.

После этого система управления контентом автоматически загрузить и установит этот плагин.

На следующем этапе необходимо активировать инсталлированного программное обеспечение. Для этого переходим на вкладку «Плагины» и в списке находим Contact Form7. Рядом с ним находится надпись: «Активировать», по ней и кликаем один раз мышкой.

Обновляем административную панель системы управления контентом и находим среди ее пунктов Contact Form7. Это и есть условие успешной инсталляции этого популярного и функционального плагина.



Алгоритм настройки «Контакт форм 7»

Настройка Contact Form 7 состоит из таких пунктов:

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

На следующем этапе выбираем язык формы и задаем ее название.

Затем нужно, при необходимости, переконфигурировать ее шаблон.

Сохраняем внесенные изменения.

Создаем новую страницу с полученным ранее кодом.

На завершающем этапе необходимо перейти на сайт и проверить корректную работу созданного элемента интерфейса интернет-ресурса.

Создаем новую форму

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

Заходим в меню этого плагина и выбираем пункт «Формы».

В окне, которое откроется после этого, необходимо поставить флажок напротив пункта «Контактная форма1».

Затем сверху над ней, в выпадающем списке «Действия», выбираем пункт «Удалить».

В ответ появится вопрос на подтверждение выполняемых действий. Необходимо подтвердить удаление формы и кликнуть мышкой на кнопке «Да».

На следующем выбираем пункт меню: «Создать новую» в административной панели «Вордпресс» «Contact Form7».

В открывшемся окне в выпадающем списке выбираем язык интерфейса будущей формы - «русский». После жмем кнопку «Создать».

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

Задаем название формы

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



Редактируем шаблон «Контакт форм 7»

В этом же самом окне с названием созданной формы есть 4 вкладки. Первая из них — «Шаблон». По умолчанию здесь сформировано лишь 5 элементов:

Место набора имени посетителя интернет-ресурса.

Поле набора адреса электронного почтового ящика посетителя, задавшего вопрос.

Еще одно поле позволяет набрать тему вопроса.

Последний элемент формы по умолчанию — это кнопка с надписью «Отправить».

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

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

В этом же самом месте можно изменить ввода в Contact Form 7. Настройка ширины любого текстового поля выполняется следующим образом:

Например, необходимо увеличить до 55 количество символов в имени посетителя интернет-ресурса. По умолчанию их 40.

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

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



Остальные вкладки формы

Как было отмечено, первая вкладка носит название «Шаблон формы». Следующая за ней в этом окне - «Письмо». В ней задаются параметры того места, в которое будет отправлять почта с этого интернет-ресурса. На вкладке «Уведомление» формируется текст сообщения, которое будет выводиться в случае успешной отправки письма. Тут же есть также возможность заготовить сообщение и на тот случай, если не получится связаться с администратором сайта с помощью средств. Последняя вкладка в Contact Form 7 - «Дополнительные настройки». В ней находятся те параметры, которые на практике используются весьма и весьма редко. Например, можно с ее помощью настроить отслеживание введенного пользователем текста средствами «Яндекс» - метрики.

Поля, которые можно добавить с помощью этого плагина в эту форму

Настройка Contact Form 7 для Wordpress позволяет добавить такие элементы интерфейса на форму обратной связи:

• Тестовое поле — универсальный элемент интерфейса, в который можно ввести любой набор символов.

  E-Mail - место ввода названия электронного почтового ящика.

  URL - поле набора адреса интернет-странички.

  Номер телефона — позволяет ввести номер телефона в международном формате.

  Элемент «Число (spinbox)» позволяет создать поле ввода любого целочисленного значения (например, возраста посетителя).

  Элемент «Число (Slider)» добавляет на форму ползунок, с помощью которого можно будет выбрать числовое значение из заданного диапазона.

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

  В свою очередь, пункт выпадающего меню «Текстовое поле» предназначен для набора текстовой части электронного письма.

  Следующий пункт - «Выпадающее меню» - позволяет из фиксированного списка выбрать необходимый параметр.

  А вот «CheckBoxes» предназначен для выбора одного или нескольких значений из заданного списка.

  Элемент интерфейса «Radio Buttons» практически идентичен предыдущему. Разница лишь в том, что в этом случае можно выбрать лишь один правильный вариант, в то время как «CheckBoxes» может иметь несколько правильных значений.

  Пункт «Acceptance» позволяет добавить всего один флажок на создаваемую форму. Как правило, он используется для ознакомления с какими - либо условиями и без их принятия в дальнейшем не будет возможна отправка электронного письма.

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

  Второй вариант защиты — это «CAPTCHA». При его выборе на форме добавиться отдельный раздел, в котором будет отображаться картинка с символами и дополнительное поле для их ввода.

  Следующий пункт - «Отправка файла». Позволяет добавить к тексту письма файл с различного рода пояснениями и комментариями для администратора ресурса.

  Последний пункт - «Кнопка отправки» - позволяет добавить соответствующий элемент интерфейса.

Сохраняем внесенные изменения

После того как необходимые значения заданы, а форма должны образом сконфигурирована, необходимо все это сохранить. Для этого в окне редактирования плагина подымаемся в его верхнюю часть. Здесь должна быть кнопка «Сохранить». Наводим указатель манипулятора на нее и делаем однократное нажатие на ней. В ответ появится код формы, который выделяем с помощью все того же указателя мышки и копируем. Далее перемещаемся в административной панели системы управления контентом в пункт «Страницы». Затем создаем новую страницу с необходимым названием (например, «обратная связь», «Контакты» или «Задать вопрос администратору ресурса»). Потом переводим курсор набора в поле ввода ее кода. При этом необходимо перевести режим набора кода в «Текст» на панели параметров. После этого вставляем ранее полученный код формы. Далее в правой части интерфейса находим кнопку «Опубликовать» и наводим на нее мышку. На следующем этапе совершаем однократное нажатие левой кнопки мышки на этом элементе интерфейса системы управления контентом.



Проверяем полученный результат

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

Плюсы и минусы плагина. Альтернативные варианты

Отличным решением для начинающего разработчика по созданию формы обратной связи является мини-программа Contact Form 7. Настройка отправки почты, создание элементов интерфейса и прочих важных элементов интерфейса в этом случае большей частью автоматизировано и требует минимальных знаний пользователя. Поэтому для простенького интернет-ресурса начального уровня и с начинающим администратором — это отличное решение. Но ведь любой плагин — это дополнительная нагрузка на ресурсы интернет-странички, которая снижает быстродействие. Как результат, более продвинутые пользователи рекомендуют уходить от такого простого способа создания формы обратной связи. Ее также можно и самостоятельно создать с помощью HTML, CSS и JS, пусть и с меньшим уровнем функциональности. При этом снизится потребность в вычислительных ресурсах сайта и существенно повысится уровень быстродействия.



Итоги

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

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

Документация и поддержка

Скриншоты

Установка

1. Загрузите всю папку contact-form-7 в директорию /wp-content/plugins/ .
2. Активируйте плагин на странице «Плагины» в панели управления WordPress.

В меню консоли WordPress вы найдёте вкладку ‘Обратная связь’.

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

Отзывы

I see a lot of people hating on this plugin because they"re using some unsupported version that is bundled in a theme, - all I can say from my own experience is that after using it for several years on many sites is a big thank you to the devs that keep it up to date and free for everyone. It"s extremely easy to set up and customize. Cheers!

Участники и разработчики

«Contact Form 7» - проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Журнал изменений

Для получения дополнительной информации смотрите Релизы .

5.1.6

• CSS: removes a style rule from the stylesheet that was unnecessary and conflicting with Twenty Twenty’s rules.
• REST API: retrieves the contact form ID explicitly from the route parameters.

5.1.5

• Config Validator: New test item for the unavailable_html_elements error.
• Config Validator: New test item for the attachments_overweight error.

5.1.4

• reCAPTCHA: Представляем константы WPCF7_RECAPTCHA_SITEKEY и WPCF7_RECAPTCHA_SECRET.
• reCAPTCHA: Представляем перехватчики фильтра wpcf7_recaptcha_sitekey и wpcf7_recaptcha_secret.
• Добавление параметра $status к фильтру wpcf7_form_response_output.
• Создает случайный код, когда пользователь является зарегистрированным пользователем.
• Представляем WPCF7_ContactForm::unit_tag(), публичный метод, возвращающий тэг юнита.
• reCAPTCHA: выдаёт иное сообщение в спам-журнал в случаях, когда маркер ответа пуст.
• Флажок согласия: поддержка опции label_first в согласительном тэге формы.

5.1.3

• Исправлена ошибка, приводившая к невозможности отменить выбор параметра во вкладке Почта.

5.1.2

• Постоянный контакт: Представлен селектор списка контактов.
• Постоянный контакт: Представлена дополнительная настройка constant_contact.
• reCAPTCHA: представлены перехватчики фильтров wpcf7_recaptcha_actions и wpcf7_recaptcha_threshold.

5.1.1

• reCAPTCHA: Изменяет реакцию на пустые токены ответа.

5.1

• Представлен модуль интеграции Постоянный контакт.
• Обновлён модуль reCAPTCHA для поддержки reCAPTCHA v3.
• Добавляет правила стиля Тёмного режима.

5.0.5

• Исправлена проблема несоответствия между get_data_option() и get_default_option() в классе WPCF7_FormTag.
• Глушит ошибки PHP, возникающие при вызовах unlink().
• Представлена wpcf7_is_file_path_in_content_dir() для поддержки константы UPLOADS.

5.0.4

• Явно устанавливает аргумент power_type в вызове register_post_type(), для исправления проблемы, связанной с несанкционированным повышением привилегий.
• Вложение локального файла — запрещено указывать абсолютные пути к файлам, расположенным вне директории wp-content.
• Валидатор конфигурации — добавляет тестовый элемент для обнаружения некорректных настроек файлов вложений.
• Исправлена ошибка в функции обратной совместимости JavaScript для устаревших браузеров, которые не поддерживают атрибут-заполнитель HTML5.
• Чекбокс согласия — отключает функцию do-not-store форм-тэга.

5.0.3

• CSS: Применение стиля курсора «не разрешено» при наведение на кнопки отправки в неактивном состоянии.
• Флажок согласия: ревизия пользовательского интерфейса генератора тегов, для поощрения использования лучших опций защиты личных данных.
• Внедрение функции wpcf7_anonymize_ip_addr().
• Представлена опция consent_for:storage для всех типов форм-тэгов.

5.0.2

• Добавлен раздел «Уведомления о приватности» в файл readme.txt.
• Обновлен контент в мета-блоке Информация.
• Используйте get_user_locale() вместо get_locale(), где это более уместно.
• Флажок согласия: Сброс статуса отключенных кнопок отправки после успешного применения.

5.0.1

• Исправлено некорректное использование _n().
• Проверка конфигурации: исправлено неверное количество предупреждений на вкладке «Дополнительные параметры».
• Проверка конфигурации: исправлена неправильная обработка специального почтового тега [_site_admin_email] в поле заголовка «От».
• Флажок Acceptance: указанные атрибуты class и id были применены к неправильному элементу HTML.
• Проверка конфигурации: если для почтовых ящиков, таких как Cc или Reply-To, существует дополнительный почтовый заголовок, но возможное пустое значение, будет возвращена ошибка «Неверный синтаксис почтового ящика».
• Явно укажите четвертый параметр add_action(), чтобы избежать передачи непреднамеренных значений параметров.
• Проверьте, не является ли целевой каталог пустым, прежде чем удалять его.

5.0

• Дополнительные настройки: on_sent_ok и on_submit были удалены.
• Новая дополнительная настройка: skip_mail.
• Фламинго: заголовок входящего канала изменяется вместе с изменением заголовка соответствующей контактной формы.
• События DOM. Весь объект ответа API доступен через свойство event.detail.apiResponse.
• Почта HTML: добавляет атрибуты, связанные с языком, в заголовок HTML.
• Загрузка файла: Устанавливает атрибут принятия в поле загрузки.
• Представлен новый класс WPCF7_MailTag.
• Позволяет прервать попытку отправки почты, используя перехватчик действия wpcf7_before_send_mail. Кроме того, вы можете установить пользовательский статус и сообщение через перехватчик действия.
• Флажок Acceptance: позволяет указывать условия в части содержимого тега формы.
• Флажок Acceptance: Поддерживает параметр опциональности.
• Новые специальные почтовые теги: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_nickname], and [_user_display_name].
• Новые перехватчики фильтров: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_{$type}, and wpcf7_mail_tag_replaced_{$type}
• Новые функции form-tag: zero-controls-container и not-for-mail