WordPress contact form 7

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

То что явной альтернативы даже среди платных плагинов нет, можно судить по тому как часто используется плагин Contact Form 7. На момент написания поста только с официального сайта WordPress этот плагин был скачен более 28 800 000 раз, а средний рейтинг 4,5 из 5! Это действительно показатель большого успеха. Кроме того, если посмотреть на ТОП продаж премиум тем WP, то практически в каждой из них вы найдете плагин Contact Form 7 как рекомендуемый или установленный по умолчанию.

Плагин Contact Form 7 “живой”, обновляется автором с каждой новой версией WordPress. Баги и ошибки устраняются оперативно. Явных конфликтов с большинством часто используемых плагинов не выявлено.
Плагин Contact Form 7 полностью бесплатен в т.ч. для коммерческого использования. После установки плагина в панели настроек вы найдете обращение автора с просьбой о “пожертвовании”.

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

Официальный форум поддержки >

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

Установка плагина Contact Form 7

Плагин Contact Form 7 вы можете скачать с официального сайта WordPress (ссылка выше), или непосредственно через вкладку “Плагины” > “Добавить новый” > Строка “Поиск плагинов” > вбиваем “Contact Form 7”. Не забудьте активировать плагин перед началом работы: “Плагины” > “Установленные” > находим плагин Contact Form 7> жмем “Активировать”. В боковой административной панели вашего сайта появится новый пункт “Contact Form 7”.

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

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

Пример добавления формы обратной связи

1. Выбираем в административной панели “Contact Form 7” > “Формы” > кнопка на странице “Добавить новую”.

2. Вам будет предложено выбрать язык формы. По умолчанию “русский”. Жмем кнопку “Добавить новую”
3. Перед вами открылось окно где вы можете создать свою форму со своими настройками.

Возможности обширные, но сразу хочу указать на несколько особенностей. Окно в котор открылось содержит несколько вкладок: “Шаблон формы”, “Письмо”, “Уведомления при отправке формы”, “Дополнительные настройки”. Последняя вкладка вам не потребуется, это скорее кастомизация для продвинутых пользователей и программистов. Подробно разберем остальные.

“Уведомления при отправке формы” — это те сообщения которые будет видеть посетитель вашего сайта при отправки формы. Содержаться варианты сообщений как успешной отправки, так и с ошибками и сбоями. По своему усмотрению вы можете поменять эти системные сообщения.

“Шаблон формы” — в этом разделе вы будете генерировать Теги, которые и отвечают за наличие нужных полей в форме.

“Письмо” — это внешний вид и содержание письма которое вам будет приходить после заполнения формы посетителем.

ВНИМАНИЕ: сейчас мы разберем какие теги бывают и какие поля они создают. Все эти теги вносятся в вкладке “Шаблон формы”, но если “ответные теги” вы не вносите в ручную (!) во вкладке “Письмо”, то заполненные формы будут приходить к вам на почту не полные.

4. Варианты тегов в вкладке “Шаблон формы”.

— text: добавляет текстовое поле (короткое).
— email: поле для e-mail.
— URL: поле для указание адреса сайта или любой ссылки.
— tel: поле контактного телефона
— number: поле в которое можно ввести только числовое значение
— date: поле с форматом даты
— text area: добавляет текстовое поле (длинное).
— drop-down menu: выпадающий список. У поля есть дополнительные настройки. Список который будет выпадать указывается в поле “Options”. Причем один элемент списка в одну строку (не через запятую!). Если стоит галочка у “Allow multiple selections” — пользователь сможет выбрать из вашего списка более одного варианта. Если стоит галочка у “Insert a blank item as the first option” — то будет добавленно вверху по умолчанию пустое поле, которое так же может быть выбрано пользователем.

— checkboxes: Чекбокс (галочки). Поле имеет несколько настроек. Список чекбоксов указывается в поле “Options”. Причем один чекбокс в одну строку (не через запятую!). Если стоит галочка у “Put a label first, a checkbox last” по умолчанию галка будет стоять у первого чекбокса. Если отмечен пункт “Make checkboxes exclusive”, то пользователю можно будет отметить только один из чекбоксов.

— radio buttons: радио кнопки. Радио кнопки позволяют всегда выбрать только один пункт из списка. Ввод списка аналогично чекбоксам в столбик. Из настроек можно включить “Put a label first, a checkbox last”, тогда по умолчанию будет выделена первая радио кнопка из списка.

— acceptance: поле чек бокс, без установки галочки в которое сообщение не будет отправлено. Фактически это возможность взять безоговорочное согласие пользователя с чем-то, в противном случае письмо отправлено не будет. Например “Вы соглашаетесь что переданная вами информация будет обрабатываться нашими операторами”.

— quiz: нововведение в плагине. Это поле позволяет создавать вопрос и ответ на него. Идеально использовать в качестве защиты от спама. Посмотрите на оформление вопроса и ответа в форме генерации тега.

Любое поле можно сделать обязательным (обычно такие поля отмечаются *) для заполнения, для этого надо поставить галочку в поле Field type > Required field. Внимание! Не забудьте текстом обозначить пользователям что поле надо заполнить обязательно!

— CAPTCHA: капча устанавливается только как дополнительный плагин. Но в принципе при наличии тега quiz необходимость в капле значительно меньше.

— file: поле создает тег дающий возможность пользователю прикрепить к сообщению файл. В настройках тега можно указать “File size limit (bytes)” максимальный размер прикрепляемого файла, разрешенные типы файлов (расширения через запятую). Внимание, если вы не указываете максимальный размер прикрепляемого файла, то по умолчанию он определяется возможностями вашего сервера. Точную информацию по ограничениям вы можете узнать у компании предоставляющей вам хостинг. Обычно максимальный размер ограничен 10 Мб.

submint: тег добавляет кнопку “Отправить” (название можно поменять).
Это скрин со всеми генерированными мною тегами, а ниже скрин формы на сайте. Обратите внимание, что “Шаблон формы” поддерживает HTML теги, поэтому пояснения для пользователей я оформляю с помощью HTML тегов.

5. Вкладка “Письмо”.

Теперь перейдем в форму генерации письма которое будет отправляться вам и добавим те теги которые мы использовали в “шаблоне формы”. Обратите внимание на скрин. Поля не внесенные в тело письма вынесены наверх вкладки черным цветом, а те которые присутствуют в теле письма — серые.

Вносим их в тело письма (поле “Message Body”): просто копируйте теги выделенные черным и вставляйте их в форму тела письма. Обратите внимание что номера обозначенные в тегах совпадают с уникальными номерами полей которые вы добавляли в шаблоне формы. Таки образом вы можете идентифицировать какое поле к чему относится и подписать их непосредственно в теле письма, что бы потом не запутаться.
Сохраняем изменения.

6. Установка формы на сайт.

C странице создания формы копируем шор код (обычно он выделен синим или коричневым цветом) и вставляем его в любую страницу или пост.

Плюсы и минусы кратко

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

Минусы:
— надо не забывать вносить дополнительные теги в генерированное письмо
— оформление формы и письма требует минимальные знания HTML

Вывод: безусловно отличный редактор, если не сказать — лучший! Радует гибкость, надежность и стабильность. Если бы он был платный, его все равно бы покупали, т.к. по качеству близкого к нему нет и рядом. Рекомендую плагин Contact Form 7.

site2max.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. Настройка плагина позволяет на определенной странице системы управления контентом создать форму обратной связи с расширенным уровнем функциональности.

Специализация «Контакт форм 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.

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

Аналогичным образом можно изменить размеры текстового поля сообщения. Только в этом случае необходим изменить код данного элемента следующим образом [textarea your-message 40 х 30]. В этом случае 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. Настройка плагина в этом случае точно не понадобится.

fb.ru

Принцип действия плагина 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. Согласно статистике каталога плагинов в  WordPress, он активно установлен на более чем на одном миллионе сайтов. А также является наиболее широко используемым решением контактной формы в официальном каталоге плагинов, он также имеет впечатляющий рейтинг пользователей 4,5 звезды из 5 возможных.

Короче говоря, когда речь идет о добавлении свободной формы контакта на WordPress сайте, речь идет о наиболее испытанном и проверенном варианте. Но хорошо ли это?

Давайте взглянем на этот плагин.

5 причин, чтобы рассмотреть вопрос об использовании Contact Form 7

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

Быстрый способ добавить контактную форму на WordPress

Помимо того, что она свободно используемая – которое является основным требованием многих людей! – И имеющий довольно позитивный общий рейтинг от пользователей, одна из лучших причин, чтобы выбрать Contact Form 7. В отличие от некоторых других популярных бесплатных плагинов контактных форм в WordPress, готовая форма контакта автоматически добавляется на ваш сайт сразу после активации.

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

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

Затем вы можете просмотреть страницу, чтобы увидеть, как выглядит форма контакта, и нажмите на кнопку Опубликовать, когда вы будете готовы к активации формы.

Формы также могут быть вставлены в боковые панели и в других виджетов вашей темы, добавив шорткод в текстовый виджет WordPress.

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

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

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

Некоторые проблемы могут возникнуть, если адрес электронной почты, связанный с вашей формой не находится на одном и том же имени домена, как ваш сайт. Например, если доменное имя Вашего веб-сайта AndreyEx.ru, но адрес электронной почты контактной формы использует домен gmail.com, форма представления может не доставить.

Если эта проблема непоставки Contact Form 7 действительно происходит, это обычно проблема с вашим веб – хостингом, а не самим плагином. Есть бесплатные инструменты, которые могут помочь вам преодолеть эту проблему, но самый простой вариант, как правило, чтобы создать и использовать адрес электронной почты с того же домена, что и ваш сайт.

Как легко создавать специальные формы

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

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

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

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

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

Полезный набор полей формы

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

Текущий список полей Contact Form 7 включает в себя:

• Текст
• Эл. адрес
• URL
• Номер телефона
• Число
• Дата
• Текстовая область
• Выпадающее меню
• Флажки
• Радио-кнопки
• Викторина
• Рекапча
• Прикрепленный файл/загрузка
• Кнопка “Отправить”

Как вы можете видеть, все основные поля – плюс несколько дополнительных опций, таких как контрольные опросы и возможность подключать и передавать файлы. Если вам нужно создать основной контактную форму или что-то чуть более продвинутые, такие как электронную форму запроса цитаты, Contact Form 7 должно хватить.

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

Полезная интернет документация и поддержка пользователей

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

Онлайн документация выросла за эти годы, и охватывает все, от начала работы до устранения неполадок. FAQ по Contact Form 7 обширна тоже.

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

Дополнения к Contact Form 7

Как и многие из лучших плагинов WordPress, ряд сторонних дополнений были созданы для расширения Contact Form 7.

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

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

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

Другие особенности Contact Form 7

Некоторые другие причины, по которым вы можете захотеть выбрать Contact Form 7 включит на свой сайт:

• AJAX с питанием от формы представления, чтобы избежать перезагрузок страницы
• Akismet и поддержка CAPTCHA, анти-спам, чтобы уменьшить спам от контактной формы
• Возможность отображения пользовательских сообщений подтверждения представления и об ошибках
• Возможность отображения поля формы шаблонного текста
• Возможность отслеживать формы представления с помощью Google Analytics
• Возможность позволить пользователям выбрать получателя формы
• Возможность перенаправления пользователей на другой URL после формы представления.

Contact Form 7 в настоящее время на версии 4.7 и обновляется на регулярной основе, есть хороший шанс, что будут добавлены новые возможности.

Недостатки Contact Form 7

Если вы просто хотите быстрый и простой способ добавить контактную форму на ваш сайт WordPress, Contact Form 7 трудно превзойти. Тем не менее, это не идеальное решение, и имеет некоторые недостатки.

Одна из областей, где Contact Form 7 отстает от конкурентов является его интерфейс формы построителя. В отличие от WPForms, а также некоторых других свободных и коммерческих форм плагинов, нет никакого инструмента drag-and-drop в форме строителя.

Как мы рассмотрели ранее, процесс добавления дополнительных полей в формы немного длителен. Создание пользовательских форм не слишком сложно, но drag-and-drop в форме построителя с окном предварительного просмотра позволит улучшить вещи значительно. Там также нет быстрого способа изменить внешний вид и стиль ваших форм.

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

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

К сожалению, из коробки, Contact Form 7 не поддерживают эту функцию. Тем не менее, как указано в дополнениях разделе, есть по крайней мере два бесплатных плагина – Flamingo и Contact Form DB – которые могут хранить свои формы представления для безопасного хранения.

andreyex.ru

Делаем форму обратной связи с помощью плагина Contact form 7

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

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

«>

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

«>

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

Если нужен русский язык (по умолчанию), то жмете на первую кнопку добавить.

«>

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

«>

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

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

Так как форму я буду размещать на странице, то примерно так ее и назвал — «Форма обратной связи для страницы Контакты».

«>

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

«>

Как видим, имеются все самые необходимые поля:

• поле для ввода имени;
• для ввода e-mail;
• для ввода темы сообщения;
• для ввода самого сообщения;
• кнопка для отправки.

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

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

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

«>

Теперь необходимо изменить название поля. Изменяем фразу «Сообщение» на «Прикрепить файл».

«>

Далее в этом же коде нужно заменить вторую часть «[textarea your-message]» на код, который будет выводить поле для выбора файла с компьютера. Сначала необходимо сгенерировать такой код. Для этого справа шаблона формы имеется специальная функция генерации тега. Жмем на нее и выбираем из всего списка пункт «Отправка файла».

«>

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

«>

Первым кодом мы заменяем ранее указанную часть кода в шаблоне формы.

«>

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

«>

Теперь можно сохранять созданную форму, нажав на кнопку вверху страницы справа от названия формы.

«>

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

«>

Создаем новую страницу. Назову ее «Контакты». В текстовый редактор размещаю этот код.

«>

Теперь можем перейти на страницу. Должны увидеть саму контактную форму со всеми полями. У меня все получилось и форма имеет следующий вид.

«>

Далее я предлагаю проверить форму, чтобы убедиться, что письма доходят.

Для этого мы заполняем все поля и для примера можно прикрепить какой-то графический файл (картинку).

После того, как я заполнил все поля и нажал на кнопку «Отправить» мне без перезагрузки страницы, что очень хорошо, показало сообщение об успешной отправке.

«>

Но действительно ли это так? Переходим в почту и видим, что сообщение действительно пришло.

«>

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

«>

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

Бывают такие формы обратной связи, которые некорректно проверяют заполнение обязательных полей. Случайно забыл вписать поле e-mail и отправил сообщение. Форма написала, что сообщение успешно отправлено, но на самом деле обращение не будет доставлено владельцу сайта. А мы ждем ответа и ждем.

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

«>

Форма прекрасно работает, что и следовало сделать.

Если возникли какие-то неясности то прошу смотреть мой подробный видео-урок. В нем будет более наглядно все описано.

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

«>

Такая реализация сейчас у меня на блоге. Можете посмотреть на странице «Написать мне».

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

На этом с вами прощаюсь. Пишите свои комментарии, предложения, идеи и все, что душа пожелает. До скорой.

С уважением, Константин Хмелев!

kostyakhmelev.ru