Форма обратной связи в WordPress: плагин Contact Form 7 + как прикрепить файл, CAPTCHA (капча)

Привет, Друзья! Давненько не писал — целую неделю уж… сейчас вот проснулся, попил чайку и думаю начинать наверстывать! Скажу Вам по секрету, после отдыха вообще сложно начать, лень не дает что-то делать, просто жесть… и победить ее целый подвиг…(сейчас уже и музыку включал, и ролики мотивирующие смотрел в общем еле-еле заставил себя открыть ноутбук и начать писать…)

Форма обратной связи в WordPress

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

Осуществить форму обратной связи на WP блоге можно как с помощью плагинов WordPress, так и без плагинов (форма обратной связи без плагинов), а пока мы с Вами разберем плагин Contact Form 7.

На любых блогах в обязательном порядке должна присутствовать страница «Об авторе»/»О блоге» и страница «Контакты», поэтому приступим.

Форма обратной связи с помощью плагина Contact Form 7 на WordPress блоге

Перво-наперво скачиваем плагин Contact Form 7 либо с оф сайта WordPress (http://wordpress.org/extend/plugins/contact-form-7/), либо из админ панели блога через “Плагины – добавить новый” и активируем его. (Все варианты по установке плагинов WordPress читаем здесь)

Итак, после того, как установили и активировали плагин Contact Form 7 идем во вкладку “Контакты (CF7)” и копируем код от плагина для вывода формы обратной связи (просто выделяем код и жмем на клавиатуре сочетание клавиш Ctrl+C, или правой кнопкой мыши и “копировать”)

Contact Form 7

Затем, после того как скопировали код для формы обратной связи, необходимо создать новую страницу (Как создать новую страницу в WordPress).

Идем во вкладку “Страницы – Добавить новую” и в РЕЖИМЕ HTML вставляем скопированный код формы обратной связи

Плагин WordPress Contact Form 7

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

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

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

Значит Так, страницу оформили, код от плагина вставили (! В HTML РЕЖИМЕ !), жмем “Опубликовать”.

Все, страница обратной связи создана. Переходим на блог и видим вновь созданную страницу:

страница обратной связи

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

форма обратной связи

В принципе форма выглядит вполне нормально и соответствует всем требованиям для обратной связи. Т.е. Вы указываете “Имя”, “эл. почту” и само письмо, но также, в настройках плагина Вы можете добавлять еще нужные поля на свое усмотрение (или изменить стандартные поля). Например, можно добавить поле с “Вопросом”, поле для “Отправки файла”, “Капчу”. В общем можно поэкспериментировать с плагином и повертеть им по всяко-разноУлыбка и добиться любого результата, ведь не зря его называют еще не просто плагин Contact Form 7, а генератор форм… во как!!!

Экспериментировать, конечно же, лучше всего на Денвере (Что такое денвер… обязательно установите у кого не установлен…), а затем уже и на реальном блоге проделать все изменения.

Что-то я отвлекся… Значит попасть в настройки плагина, нужно перейти в “Админку — Контакты (CF7)” и справа нажать на кнопку “Сгенерировать тег”

форма обратной связи в WordPress

Слева стандартная форма (которая отлично работает!), а справа уже можно менять и добавлять что хотите, давайте, например, добавим поле “Отправка файла” (Иногда, вдруг пригодиться отправить что-нибудь автору блога).

Отправка файла в форме обратной связи в WordPress или как прикрепить файл

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

Вот давайте с помощью плагина Contact Form 7 это и осуществим:

Значит, как уже писал выше, идем в “Админку — Контакты (CF7)”, и справа жмем на кнопку “Сгенерировать тег” и в выпадающем меню кликаем на “Отправка файла”. Затем вы увидите окно настроек для тега отправки файлов

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

  1. Обязательное или не обязательное поле. Т.е. если поставите галочку без прикрепленного файла, форма отправлять сообщение не будет. Значит галочку лучше не ставитьУлыбка
  2. Если пропишите название класса (латиницей), то в таблице стилей css можно будет менять внешний вид. Тоже думаю не к чему что-то проставлять, хотя…
  3. Лимит на размер файла. Здесь, наверное, нужно поставить какое-нибудь ограничение… чтобы файл не отправили на 8 ГбУлыбка
  4. Типы файлов. Тоже можно ничего не менять и не прописывать. Т.е. таким образом можно будет отправлять файлы с любым расширением
  5. Копируем код! Вот это и есть самый важный момент! и следующий!!! Будьте внимательны…
  6. Второй код нужно вставить чуть ниже в блоке «Адресат» в поле «Прикрепленные файлы»:
  7. Вставляем код (на рис под №5) в форму слева в любое место. Например, я вставил после формы ввода сообщения (Что и Вам советую). Заметьте, я вставил не просто код, а заключил его в теги “P”(<p></p>) и еще прописал заголовок (“Ваш файл”(заголовок может быть абсолютно любой) )
  8. Ну и не забываем сохранить!

Все, открываем наш блог, идем на страницу “Контакты” и кайфуем от проделанной работыШирокая улыбка

отправка файла в Contact Form 7

У нас появилась новая кнопка “Выберите файл”, при нажатии на которую, через обычный проводник виндоус Вы можете выбрать любой файл и отправить его автору блога! Круто и легко!!!

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

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

Защита от спама в форме обратной связи и установка капчи в плагин Contact Form 7

Еще одна проблема интернета – это спам!!! Вот и через форму обратной связи Вам на почту может приходить куча ненужных писем, от которых иногда просто бесит! Как защитить комментарии от спама можно узнать из этой статьи, а как форму обратной связи читаем дальше…

Но от спама, в плагине Contact Form 7 присутствует защита (хотя нужно скачать еще один небольшой плагин, но об этом чуть ниже), которая настраивается похожим образом как и “Отправка файлов” через настройки плагина и генерацию тега. Итак, начнем по порядку:

Идем в “Админку — Контакты (CF7) – Сгенерировать тег — CAPTCHA” и видим примерно следующее

Защита от спама в форме обратной связи

Внимание: чтобы использовать CAPTCHA, вам нужно установить плагин Really Simple CAPTCHA.

Здесь можно пойти двумя путями:

  1. Скачать плагин по ссылки и установить на блог любым способом;
  2. Либо перейти в раздел “Плагины – Добавить новый” и в поле поиска плагинов вставить “Really Simple CAPTCHA” и нажать “Установить” а затем “Активировать плагин”.

После того, как активировали плагин Really Simple CAPTCHA, опять переходим в “Админку — Контакты (CF7) – Сгенерировать тег — CAPTCHA”, и просто вставляем два тега в форму слева перед кнопкой “Отправить”

Плагин Really Simple CAPTCHA

Обратите внимание, эти коды я также заключил в теги “P”(<p></p>), и добавил поясняющий заголовок “Введите код с картинки”, после которого проставил тег Br / (тег отвечает за перенос строки)

Теперь самое главное, в таком виде капчу на сайте Вы не увидите, потому что в коде [captchac captcha-452 fg:#FFFFFF bg:#FFFFFF] прописаны цвета переднего плана и фона белым цветом, что в итоге будет сливаться и Вы увидите только белый прямоугольник. Поэтому просто сотрите код вывода цветов и оставьте просто  вот так: [captchac captcha-452] Или в настройках, отвечающих за цвет, оставьте поля пустыми. В конечном итоге получиться должно вот так:

капча в обратной связе

Ну и на сайте вот так:

капча Contact Form 7

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

Упс, чуть не забыл! Ниже в настройках плагина укажите Ваш Email, на который будут приходить все сообщения

adresat

И напоминаю, протестируйте обязательно форму обратной связи на полную работоспособность!

Ну а на сегодня все! Если остались вопросы, то спрашивайте  в комментариях.

Удачи Вам!

Так же советую подписаться на обновления моего блога! Подписка ниже.

    ADD YOUR COMMENT