Плагин contact form 7 как настроить. Изменяем название формы
Привет всем. Как, то у меня через чур много энергии и я решил сегодня написать еще одну статейку, которая будет посвящена одному из плагинов WordPress. Довольно таки интересный и функциональный плагин, со своими обязанностями справляется на все 100% и лучше я пока не нашел, что бы оформить обратную связь.
Не хочу долго Вас томить, я думаю Вы и так уже поняли про, что пойдет речь в статье. И так, сегодня будем разбираться и настраивать плагин Contact Form 7 для WordPress , а именно создавать форму обратной связи.
Долго сидел и думал, какие есть минусы в плагина и в голову так ничего и не пришло, а вот плюсов у данного творения очень много.
Плюсы плагина Contact Form 7.
- Понятность и простота настройки. Человек, который первый раз сталкивается с данным плагином без проблем сможет разобраться.
- Создание большого количества разных форм и интеграция их на сайт.
- Форма вставляется с помощью шорткода на страницу и в любое место сайта. Это очень удобно.
- Поддержка русского и других языков.
- Поддержка Ajax запросов.
- Защита от спама с помощью текстового вопроса или капчи. Для капчи необходимо дополнительно будет установить Really Simple CAPTCHA.
- Настройка внешнего вида формы с помощью css стилей.
- Интеграция с сервисом Akismet, для защиты от спама.
У нас на сайте Вы можете увидеть и поюзать такую форму если нажмете на пункт меню “Связаться с нами”, выпадет окно, где можно увидеть наглядный пример.
Дайте начинать!
Для начала нам необходимо скачать данный плагин. Можно с нашего сервера вот ссылка — >или же с официального сайта вот ссылка — > Скачать с официального сайта .
После, того как скачали необходимо его установить на . Как устанавливать, я не буду описывать, думаю Вы должны этот процесс знать от А до Я. Скачали, установили, теперь непосредственно переходим в сам , что бы разобраться и настроить его.
Настройка плагина Contact Form 7 и создание формы обратной связи.
Теперь когда вы скачали и установили всё как нужно, переходим в административную панель WordPress и находим пункт Contact Form 7 , кликаем по нему и мы попадаем на страницу добавления новой формы.
Создание формы.
Для того, что бы создать новую форму необходимо нажать на “Добавить новую ”, далее выбираем язык (русский по умолчанию) и нажимаем “Добавить новую”. После всех проделанных шагов у Вас должно быть вот такая картина:
Форма создана, теперь будем ее настраивать, под ваши нужды и для начала даем ей название. В моем случае я назову “Тест форма ”, вы называйте как хотите и после этого нажимайте «Cохранить». Теперь вы можете увидеть, шорткод который необходимо будет вставлять в код сайта, где будет выводится данная форма.
Понадобится код нам немного позже, так как необходимо сначала настроить форму. Переходим к шаблону формы и настраиваем его.
Справа выпадающий список “Сгенерировать тег ”, если его раскрыть можно увидеть много полей которые добавляются в форму.
Поле «Сгенерировать тег» Слева можно увидеть поля которые уже добавлены в форму.
Давайте для примера, сделаем простенькую форму в которой будет имя, почта, телефон, текстовый вопрос для защиты от спама, сообщение и кнопка отправить.
Приступает.
Делаем текстовое поле для имени. В выпадающем списке “Сгенерировать тег” выбираем “Текстовое поле ”. Ставим галочку обязательное поле, даем ему название в моем случае “NAME” и присваиваем id, что бы можно было поле оформить с помощью css стилей. У меня получилось id=”name”. Внизу можно увидеть текст “Скопируйте этот код и вставьте его в шаблон формы слева ”. Берем этот код и копируем в шаблон формы, как на картинке:
Для почты (e-mail) аналогично делаем, для телефона выбираем из списка “Сгенерировать тег”, поле “Номер телефона ” и тоже по аналогии делаем.
Для настройки сообщения выбираем “Текстовое поле ” и делаем тоже по аналогии со всем выше описанным.
Теперь добавляем поле «Вопроc «. Для этого в выпадающем списке выбираем пункт “Вопрос ”, задаем ему название. В поле Вопрос|Ответ, можно задавать разные вопросы и ответы, под полем приведен пример логического вопроса, можно задавать текстовый, например “3 по счету месяц года?| Март” и т.д. Код вставляем как и раньше.
поле «Вопрос» И последнее что нам необходимо, это кнопка “Отправить ”, можно оставить ту, которая в шаблоне или в списке “Сгенерировать тег” выбираем “Кнопка отправки”. Шаблон готов, нажимаем кнопку “Сохранить ”.
Давайте проверим, что у нас получилось, копируем шорткод и вставляем его на страницу или в любую часть кода куда необходимо. Я вставлю на тестовую страницу.
Вот что у меня получилось:
У Вас должно быть, что-то похожее.
Настройка адресата формы и сообщений
Опускаемся немного ниже шаблона формы и видим настройки адресата.
- Поле адресат. Вводим почту с которой будут приходить письма посетителям которые заполнят форму.
- Поле отправитель. Вместо <>, подставляем свои шорткоды (названия которые давали полям). Посмотреть их можно выше. В моем случае будет <>.
- Поле тема. Я всегда пишу Форма обратной связи и указываю сайт.
- Поле шаблон письма. Здесь можно выводить, то что душа пожелает. Для нашего примера делаю поле От: <> и данные Телефон: , Сообщение ..
- Остальные поля пустые.
В конце не забываем сохранятся.
Если опуститься еще ниже, то можно увидеть настройки сообщений. Здесь всё на русском, поэтому можете править под свои нужды, как хотите. Здесь думаю сами разберетесь
Форма готова, можно переходить тестировать и смотреть приходит ли сообщение на почту, которую Вы указали.
У меня всё работает отлично, после нажатия кнопки “Отправить”, вижу сообщение “Сообщение было успешно отправлено. Спасибо . ” Можете тестировать и смотреть какие ошибки форма будет выдавать если не правильно ввести данные.
Что касается css стилей, их можно добавить в главный css файл style.css. С помощью firebag, можете посмотреть id и классы полей и присвоить им соответствующие стили.
Плагин Contact Form 7 для WordPress очень функциональный, можно сделать форму любой сложности, я уверен Вы в этом убедились. На этом я буду заканчивать, если какие-то моменты не до конца ясны, пишите в комментарии буду пытаться помочь разобраться. Спасибо.
Контактная форма - неотъемлемый атрибут большинства сайтов. Именно поэтому в каталоге WordPress так много плагинов для контактных форм. Один из самых популярных - это Contact Form 7. Плагин позволяет создавать формы любых видов; очень гибок и удобен в настройке; развивается уже много лет и содержит много наработок.
Создание и показ контактных форм
Создание форм в админке
После установки плагина появится пункт меню "Contact Form 7", через который можно создавать и удалять формы.
Форма на картинке создана при активации плагина автоматически.
Используем форму по умолчанию, для этого создадим страницу "Связаться со мной" и вставим туда шорткод формы.
Лицевая часть сайта
А теперь сохраним статью и посмотрим, как выглядит наша форма (используется тема Twenty Sixteen):
На картинке вид формы после отправленного письма (об этом говорит извещение внизу формы).
Настройка формы (создание сложных форм)
Пример выше показывает как вставить готовую и очень простую форму контактов. А теперь давайте рассмотрим как создать форму посложнее. Для этого вернемся в админку, в менеджер форм и зайдем в редактирование формы по умолчанию.
В верхнем поле - название формы (его видно только в админке), указываем понятное для себя название, например: "Отзыв о сайте", "Форма заявки на работу", "Форма обратной связи" и т.п.
Под заголовком - шорткод. Его используем в записях, для вывода формы.
И ниже - четыре вкладки:
- Шаблон формы
- Письмо
- Дополнительные настройки
Рассмотрим каждую вкладку отдельно.
Шаблон формы
В этой вкладке можно настроить поля и внешний вид формы. Рабочей областью является HTML редактор WP. Только вместо привычных кнопок мы видим кнопки вставки разных полей формы.
Вёрстка формы
Для верстки можно использовать html-теги и шорткоды плагина. Шорткоды добавляют поля формы, а html теги позволяют создать произвольную HTML структуру. К примеру, наша дефолтная форма выглядит так:
А при отображении в записи она превратится в такой HTML:
Синтаксис шорткодов
Давайте кликнем по кнопке «Текст». Открывается окно, где мы можем указать атрибуты текстовому полю. Указываем и жмем "Вставить тег".
Тег в последствии будет преобразован в текстовое поле с html кодом:
Шорткоды можно удобно создавать через конструктор шорткодов.
Но конструктор не дает возможность изменить шорткод (там можно только создать шорткод). Изменить шорткод можно двумя способами:
- удалить и создать с помощью конструктора новый.
- изучить синтаксис и исправить шорткод поля вручную.
С конструктором вы и сами разберетесь.
А тут мы разберем синтаксис шорткода.
Для примера рассмотрим тег текстового поля с дополнительными опциями:
Text(обязательный) Тип поля: text, select, password, number и т.д. (в данном случае поле текстовое). Определяет, в какой элемент формы будет преобразован наш тег, а значит какой вид данных он будет принимать. * Звёздочка делает поле обязательным для заполнения (форма не будет отправлена и отобразиться уведомление о том, что поле надо заполнить). client-name(обязательный) Имя поля, используется как атрибут name в input, а так же используется при формировании шаблона отправляемого письма. id:my-id Атрибут id в input со значением my-id. Используется для оформления. class:my-class Атрибут class в input со значением my-class. Используется для оформления. placeholder "Введите имя" Использовать текст "Введите имя" как placeholder.
Соблюдайте порядок атрибутов тега: сначала идёт тип поля, затем его имя и только потом дополнительные опции.
Типы полей
- Текстовые поля: text , email , tel , url , textarea
- Числовые поля: number , range
- Поля с датой: date
- Чекбоксы, радио, списки: checkbox , radio , select
- Поле с загрузкой файла: file
- CAPTCHA: captchac и captchar
- Опросы: quiz
- Поле "Принять": acceptance
- Кнопка "Отправить": submit
- Произвольный тип поля
Шаблон письма
Во второй вкладе можно тонко настроить шаблон (вёрстку) и свойства отправляемого письма. В полях данной вкладки можно использовать специальные теги полей формы - это дает возможность передавать в письме указанные в форме данные.
Теги состоят из имен полей из шаблона формы. Например, мы создали текстовое поле с именем: . Теперь в шаблоне письма можно использовать тег . В письме вместо этого тега будет подставлено значение поля, введенное пользователем (ФИО).
Заголовки письма:
- Дополнительные заголовки - По умолчанию тут прописано Reply-To: . Заголовок Reply-To говорит нам, что на этот электронный ящик можно ответить нажав кнопку "Ответить" в почтовой программе, а тег формы - это имя поля из шаблона. Указанный пользователем email будет вставлен вместо этого тега. Получится что-то типа Reply-To: [email protected] .
Кому - электронный ящик, куда будет отправлено письмо. Можно указать сколько угодно ящиков через запятую.
От кого - имя и электронный ящик, от кого пришло письмо. Обычно тут указывается почта сервера (например [email protected]).
Можно указать любую почту, но если домен почты будет отличаться от домена сайта - форма не пройдет проверку и будет «ругаться» на этот параметр, хотя письма всё равно будут отправляться.
Тема - Заголовок письма. По нему будет понятно с какой формы были отправлены данные. К примеру, тема письма "Ошибка на сайте", "Заказ обратного звонка" и так далее. Выбираете такой заголовок, чтобы проще было работать с полученными письмами.
Тело письма
Это следующая важная часть данной вкладки. Тут указывается сам текст письма. В тексте используем всё те же теги формы (имена полей из шаблона формы).
Разберем дефолтное письмо:
От: <> Тема: Сообщение: -- Отправлено с сайта Изучаем плагин Contact Form 7 (http://test-wp.ru)
У нас было 4 поля, которые заполнял пользователь. После отправки письма теги превратятся в значения и мы получим такое письмо:
От: Дмитрий
Не обязательные поля в теле письма
Если юзер не заполнит поле, а оно используется в теле письма, то тело письма будет неполным. К примеру в теле написано Человек с города , но юзер не заполнил поле , а значит в письме мы получим Человек с города... Такая строка в письме лишняя. Чтобы убрать эту строку из письма, поставьте галочку на пункте "Исключить вывод строк с пустыми тегами сообщения". Обратите внимание, что это сработает только тогда, когда текст и шоткод поля находятся в одной и той же строке.
Опция "Использовать HTML-формат письма". Позволяет использовать в теле письма HTML теги. При этом можно использовать ограниченный список HTML тегов, потому что не все почтовые клиенты или сервисы умеют правильно обрабатывать сложную HTML разметку. Можно использовать: таблицы, маркированные списки, жирность, абзацы и так далее. Подробнее ищите в сети.
Contact Form 7 позволяет отправлять письмо на два адреса, причем настройки для каждого письма разные. Это может пригодиться, когда надо отправить администратору сайта письмо с полной информацией и дубликат менеджеру, где содержится только данные о заказе.
Уведомления при отправке формы
В данной вкладке вы можете отредактировать сообщения, которые выводит форма в той или иной ситуации: при удачной или неудачной отправке письма, или при ошибках.
Теги шаблона письма не работают в этих полях.
Дополнительные настройки
Эта вкладка предназначена для продвинутых пользователей и даёт возможность с помощью JS кода расширять возможности формы. К примеру, вешать события для аналитики.
Об использовании данного функционала я расскажу в отдельной статье.
В данном материале мы детально рассмотрим настройку ContactForm 7. Это плагин для популярной настройки WordPress, которая используется для создания и продвижения сайтов в Интернете. Данный программный продукт дает возможность создавать и конфигурировать форму обратной связи.
Немного о WordPress
На сегодняшний день WordPress является одним из наиболее распространенных инструментов, предназначенных для наполнения и разработки информационных ресурсов. Данный программный продукт изначально был ориентирован только на создание довольно простых блогов. Затем профессионалы дополнили функционал данной системы. Это дало возможность создавать при помощи WordPress другие интернет-ресурсы.
WordPress: недостатки и преимущества
Преимущества данной платформы следующие:
— простота и открытость исходных кодов;
— большое количество справочной информации;
— возможность разработки тематического ресурса любой степени сложности в кротчайшие сроки;
— высокое быстродействие без необходимости дополнительных программных настроек.
Данная система также имеет и свои недостатки:
— сайты, созданные с помощью WordPress не смогут справится с такой нагрузкой;
— при установке дополнительных мини-программ наблюдается снижение быстродействия интернет-ресурса;
Что такое плагины на базе WordPress
Система управления контентом WordPress имеет очень скромный базовый функционал. Его достаточно только для разработки наиболее простых сайтов и блогов. Чтобы немного улучшить ситуацию, связанную с функциональностью данной программной платформы и добавить ей определенную гибкость, разработчикам приходится добавлять различные мини-программы, которые называются на профессиональном жаргоне плагинами. Как раз одним из таких плагинов и является ContactForm7. Настройка данного плагина позволяет создать форму обратной связи с расширенным уровнем функциональности на определенной странице системы управления контентом.
Специализация Contact Form 7
Как же было отмечено ранее, основной задачей Contact Form 7 является создание обратной связи между администратором интернет-ресурса и посетителем сайта. Редактирование шаблона, настройка почты, пересылка различных файлов – это еще далеко не все возможности, которые дает данная мини-программа. Нагрузка на аппаратные ресурсы сайта при этом будет относительно невелика. Наличие этой программы может привести к существенному снижению быстродействия блога или сайта.
Порядок установки плагина Contact Form 7
Всего имеется три способа установки плагинов на WordPress. Первый способ предусматривает скачивание ZIP архива из глобальной паутины и его заливки в соответствующий каталог интернет-ресурса. Можно также использовать для этой цели FTP-клиентов различного рода. Еще одним вариантом является загрузка микропрограммы с использованием административной панели управления блогом, сайтом или порталом. Из всех трех вариантов установки плагинов наиболее безопасным является последний. Программный код в данном случае скачивается с официального сайта. В этом случае в файле точно не будет опасных фрагментов и вредоносных объектов. Порядок установки плагина в данном случае будет следующим. Прежде всего необходимо зайти в административную панель WordPress. Затем нужно переместиться в раздел «Плагины». В открывшемся окошке следует выбрать пункт «Добавить новый». В строке поиска необходимо ввести название плагина Contact Form 7. После этого необходимо навести указатель мыши на кнопку «Поиск» и сделать однократный клик мышью. После этого должна начаться операция поиска программного обеспечения. Когда она будет завершена, на экране высветится список найденных плагинов. В этом списке необходимо найти тот плагин, который вам нужен, и нажать на надпись «Установить», расположенную напротив него. Система управления контентом после этого автоматически загрузит и установит данный плагин. На следующем этапе нужно будет активировать инсталлированное программное обеспечение. Для этого необходимо перейти ко вкладке «Плагины» и найти в списке Contact Form 7. С ним рядом должна быть надпись «Активировать». Нужно кликнуть по ней мышкой один раз. Теперь обновляем административную панель системы управления контентом и находим среди пунктов Contact Form 7. Вот и весь секрет установки популярного плагина Contact Form 7.
Contact Form 7: алгоритм настройки
Настройка Contact Form 7 состоит из следующих пунктов:
— создание новой платформы или редактирование старой, созданной при установке плагина. Опыт показывает, что в данном случае лучше использовать опцию по созданию новой формы.
— выбор языка формы и названия.
— изменение конфигурации шаблона формы.
— сохранение внесенных изменений.
— создание новой страницы с полученным ранее кодом. Необходимо опубликовать новую страницу.
На заключительном этапе необходимо перейти на сайт и проверить корректность работы созданного элемента интерфейса интернет-ресурса.
Создание новой формы
Данный плагин сразу после активации по умолчанию создает форму для задания вопросов от посетителей блога или сайта. Конечно, ее можно просто настроить и отредактировать должным образом. Однако намного проще будет удалить ее и создать новую с полным набором всех необходимых функций. Для этого необходимо выполнить следующую последовательность действий. Нужно зайти в меню данного плагина и выбрать пункт «Формы». В открывшемся окне необходимо поставить флажок возле пункта «Контактная форма». Над ней сверху в выпадающем списке «Действия» необходимо выбрать пункт «Удалить». В результате должен появится запрос на подтверждение выполняемой операции. Подтвердите удаление формы и кликните мышью по кнопке «Да». На следующем этапе необходимо выбрать пункт меню «Создать новую» в административной панели WordPress нажать ContactForm 7. В результате откроется окно, в котором в выпадающем списке нужно выбрать язык интерфейса будущей платформы – «русский». Затем необходимо нажать на кнопку «Создать». В результате будет сгенерирован изначальный код новой формы обратной связи. Затем следует выполнить такую операцию, как настройка Contact Form 7.
Задаем название формы
После осуществления всех ранее описанных действий появится окно ввода названия формы. Настройка данного элемента интерфейса начинается именно с этой простой операции. Лучше всего задавать название формы исходя из поисковой оптимизации. В данном случае наиболее оптимальными вариантами будет «Задаем вопрос администратору сайта» или «Форма обратной связи». После того, как вы определитесь с названием данного элемента интерфейса, необходимо будет набрать его в соответствующем поле окна запроса.
Contact Form 7: редактирование шаблона
В окне с названием созданной формы присутствует еще четыре вкладки. Первой из них является вкладка «Шаблон». Здесь по умолчанию сформировано только пять элементов.
— место набора имени посетителя ресурса;
— поле набора адреса электронного ящика пользователя;
— поле для задания темы вопроса;
— поле для написания непосредственно самого сообщения;
— кнопка с надписью «Отправить».
При необходимости текст в поле можно редактировать, добавлять в него другие элементы интерфейса. Для этого будет достаточно просто выделить код текстового элемента и скопировать его с использованием контекстного меню в другое поле. С правой стороны имеется выпадающий список параметров. Здесь необходимо выбрать интересующий вас элемент. Рядом с выпадающим списком после этого должен появиться необходимый код. Вам необходимо копировать его и вставить вместо кода темы. Название элемента вы можете выбрать на свое усмотрение.
Настройка Contact Form 7
В том же месте можно поменять длину поля ввода ContactForm 7. Настройку ширины любого текстового поля можно осуществить следующим образом. Предположим, вам необходимо увеличить количество символов в имени посетителя до 55. Их по умолчанию всего 40. Для этого необходимо в конце в коде добавить цифры 60/55. В результате должен получится код . После того как все внесенные изменения будут сохранены, длины данного поля будет составлять 60, а максимальное количество символов будет равняться 55. Также аналогичным образом можно менять и размеры текстового поля сообщения. В данном случае необходимо изменить код данного элемента следующим образом – . 40 в данном случае представляет собой количество букв в строке, 30 – общее количество строк в данном элементе интерфейса ContactForm 7. Чтобы настроить внешний вид самой формы, необходимо подбирать значения параметров каждого отдельного элемента. По этой причине в коже каждого элемента рекомендуется указывать конкретные значения каждого параметра, приведенного в данном разделе
Другие вкладки формы
Как уже было отмечено ранее, первая вкладка называется «Шаблон формы». За ней следует вкладка «Письмо». В ней задаются параметры того места, в которое с этого интернет-ресурса будет отправляться почта. Текст сообщения, выдаваемого системой в случае успешной отправки письма, формируется на вкладке «Уведомление». Здесь также имеется возможность заготовки сообщения на тот случай, если не получится связаться с администратором сайта. Последней вкладкой в ContactForm 7 является «Дополнительные настройки». В данной вкладке находятся параметры, которые довольно редко используются на практике. Так, например, с ее помощью можно настроить отслеживание текста, введенного пользователем, средствами «Яндекс» — метрики.
Поля, которые можно добавить с помощью плагина Contact Form 7
Настройка ContactForm 7 дает возможность добавить в форму обратной связи следующие элементы интерфейса:
— текстовое поле – это универсальный элемент. В него можно внести любой набор символов.
— E-Mail – используется для ввода электронной почты;
— URL – поле для набора адреса интернет-страницы;
— номер телефона – дает возможность в международном формате ввести номер телефона;
— «Число (spinbox)» — дает возможность создать поле ввода любого целочисленного значения;
— «Число (slider)» — добавляет в форму ползунок, при помощи которого можно выбрать числовое значение из некоторого диапазона;
— «Дата» — создает специальное поле ввода, в котором можно будет указать необходимую дату. В случае активации данного элемента интерфейса внизу отобразится календарь, где можно будет сразу выбрать дату;
— «Текстовое поле» — предназначено для набора текстовой части послания;
— «Выпадающее меню» — дает возможность из фиксированного набора выбрать нужный параметр;
— «Сheck Boxes» — предназначена для выбора одного или нескольких значений из представленного списка;
Radio Buttons – практически идентичен предыдущему элементу, разница состоит только в том, что в данном случае можно выбрать только один правильный вариант. В элементе «Check Boxes» может быть несколько правильных значений;
— «Aceptance» — дает возможность добавить на создаваемую форму только один флажок. Данный элемент обычно используется для ознакомления с какими-то либо условиями. Без их принятия дальнейшая отправка письма будет невозможна;
— «Меню» — дает возможность создать в интерфейсе специальный раздел, который обеспечивает защиту почтового ящика от спама. Перед отправкой в этом случае нужно будет просто дать правильный ответ на вопрос;
— «CAPTCHA» — еще один вариант защиты. При выборе данного элемента к форме добавится специальный раздел, в котором будет отображена картинка с символами и дополнительное поле;
— «Отправка файла» — данный пункт позволяет добавить к тексту письма файл с комментариями;
— «Кнопка отправки» — позволяет добавить соответствующий элемент.
После того, как вы зададите все необходимые значения, нужно сохранить форму. Для этого необходимо в окне редактирования плагина подняться в его верхнюю часть. Здесь располагается кнопка «Сохранить».
Привет всем. Как, то у меня через чур много энергии и я решил сегодня написать еще одну статейку, которая будет посвящена одному из плагинов WordPress. Довольно таки интересный и функциональный плагин, со своими обязанностями справляется на все 100% и лучше я пока не нашел, что бы оформить обратную связь.
Не хочу долго Вас томить, я думаю Вы и так уже поняли про, что пойдет речь в статье. И так, сегодня будем разбираться и настраивать плагин Contact Form 7 для WordPress , а именно создавать форму обратной связи.
Долго сидел и думал, какие есть минусы в плагина и в голову так ничего и не пришло, а вот плюсов у данного творения очень много.
Плюсы плагина Contact Form 7.
- Понятность и простота настройки. Человек, который первый раз сталкивается с данным плагином без проблем сможет разобраться.
- Создание большого количества разных форм и интеграция их на сайт.
- Форма вставляется с помощью шорткода на страницу и в любое место сайта. Это очень удобно.
- Поддержка русского и других языков.
- Поддержка Ajax запросов.
- Защита от спама с помощью текстового вопроса или капчи. Для капчи необходимо дополнительно будет установить Really Simple CAPTCHA.
- Настройка внешнего вида формы с помощью css стилей.
- Интеграция с сервисом Akismet, для защиты от спама.
У нас на сайте Вы можете увидеть и поюзать такую форму если нажмете на пункт меню “Связаться с нами”, выпадет окно, где можно увидеть наглядный пример.
Дайте начинать!
Для начала нам необходимо скачать данный плагин. Можно с нашего сервера вот ссылка — >или же с официального сайта вот ссылка — > Скачать с официального сайта .
После, того как скачали необходимо его установить на . Как устанавливать, я не буду описывать, думаю Вы должны этот процесс знать от А до Я. Скачали, установили, теперь непосредственно переходим в сам , что бы разобраться и настроить его.
Настройка плагина Contact Form 7 и создание формы обратной связи.
Теперь когда вы скачали и установили всё как нужно, переходим в административную панель WordPress и находим пункт Contact Form 7 , кликаем по нему и мы попадаем на страницу добавления новой формы.
Создание формы.
Для того, что бы создать новую форму необходимо нажать на “Добавить новую ”, далее выбираем язык (русский по умолчанию) и нажимаем “Добавить новую”. После всех проделанных шагов у Вас должно быть вот такая картина:
Форма создана, теперь будем ее настраивать, под ваши нужды и для начала даем ей название. В моем случае я назову “Тест форма ”, вы называйте как хотите и после этого нажимайте «Cохранить». Теперь вы можете увидеть, шорткод который необходимо будет вставлять в код сайта, где будет выводится данная форма.
Понадобится код нам немного позже, так как необходимо сначала настроить форму. Переходим к шаблону формы и настраиваем его.
Справа выпадающий список “Сгенерировать тег ”, если его раскрыть можно увидеть много полей которые добавляются в форму.
Поле «Сгенерировать тег» Слева можно увидеть поля которые уже добавлены в форму.
Давайте для примера, сделаем простенькую форму в которой будет имя, почта, телефон, текстовый вопрос для защиты от спама, сообщение и кнопка отправить.
Приступает.
Делаем текстовое поле для имени. В выпадающем списке “Сгенерировать тег” выбираем “Текстовое поле ”. Ставим галочку обязательное поле, даем ему название в моем случае “NAME” и присваиваем id, что бы можно было поле оформить с помощью css стилей. У меня получилось id=”name”. Внизу можно увидеть текст “Скопируйте этот код и вставьте его в шаблон формы слева ”. Берем этот код и копируем в шаблон формы, как на картинке:
Для почты (e-mail) аналогично делаем, для телефона выбираем из списка “Сгенерировать тег”, поле “Номер телефона ” и тоже по аналогии делаем.
Для настройки сообщения выбираем “Текстовое поле ” и делаем тоже по аналогии со всем выше описанным.
Теперь добавляем поле «Вопроc «. Для этого в выпадающем списке выбираем пункт “Вопрос ”, задаем ему название. В поле Вопрос|Ответ, можно задавать разные вопросы и ответы, под полем приведен пример логического вопроса, можно задавать текстовый, например “3 по счету месяц года?| Март” и т.д. Код вставляем как и раньше.
поле «Вопрос» И последнее что нам необходимо, это кнопка “Отправить ”, можно оставить ту, которая в шаблоне или в списке “Сгенерировать тег” выбираем “Кнопка отправки”. Шаблон готов, нажимаем кнопку “Сохранить ”.
Давайте проверим, что у нас получилось, копируем шорткод и вставляем его на страницу или в любую часть кода куда необходимо. Я вставлю на тестовую страницу.
Вот что у меня получилось:
У Вас должно быть, что-то похожее.
Настройка адресата формы и сообщений
Опускаемся немного ниже шаблона формы и видим настройки адресата.
- Поле адресат. Вводим почту с которой будут приходить письма посетителям которые заполнят форму.
- Поле отправитель. Вместо <>, подставляем свои шорткоды (названия которые давали полям). Посмотреть их можно выше. В моем случае будет <>.
- Поле тема. Я всегда пишу Форма обратной связи и указываю сайт.
- Поле шаблон письма. Здесь можно выводить, то что душа пожелает. Для нашего примера делаю поле От: <> и данные Телефон: , Сообщение ..
- Остальные поля пустые.
В конце не забываем сохранятся.
Если опуститься еще ниже, то можно увидеть настройки сообщений. Здесь всё на русском, поэтому можете править под свои нужды, как хотите. Здесь думаю сами разберетесь
Форма готова, можно переходить тестировать и смотреть приходит ли сообщение на почту, которую Вы указали.
У меня всё работает отлично, после нажатия кнопки “Отправить”, вижу сообщение “Сообщение было успешно отправлено. Спасибо . ” Можете тестировать и смотреть какие ошибки форма будет выдавать если не правильно ввести данные.
Что касается css стилей, их можно добавить в главный css файл style.css. С помощью firebag, можете посмотреть id и классы полей и присвоить им соответствующие стили.
Плагин Contact Form 7 для WordPress очень функциональный, можно сделать форму любой сложности, я уверен Вы в этом убедились. На этом я буду заканчивать, если какие-то моменты не до конца ясны, пишите в комментарии буду пытаться помочь разобраться. Спасибо.
Подробная инструкция по установке, настройке и использованию плагина формы обратной связи для сайта 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
Плагин 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.