Форма обратной связи на блоге. Плагин Contact Form для WordPress

x

плагин Contact Form 7

Оглавление:


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

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

Вот как выглядит форма обратной связи на этом блоге.

Contact Form для WordPress

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

Порядок создания формы обратной связи с помощью плагина Contact Form для WordPress.

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

Итак, для начала нужно просто установить плагин. Как это делать — я писал в статье «Как установить плагин Вордпресс». Здесь мы не будем повторяться, так как вы уже это умеете, да и установка плагина — дело весьма несложное. Вот так выглядит картинка плагина Contact Form 7. Как мы видим, плагин довольно популярный — более миллиона установок.

плагин для обратной связи

Устанавливаем и активируем Contact Form 7. После этого нам нужно выполнить кое-какие настройки для плагина. Идем дальше.

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

В нашей панели администратора находим строку Contact Form 7 и выбираем раздел «Контактные формы».

контактные формы плагина

Мы видим, что в списке у нас уже имеется одна готовая форма «Контактная форма 1». Напротив нее написан шорткод формы — это html-код для вставки. Сейчас мы разберемся, что к чему.

Список контактных форм

Щелкаем по пункту «Контактная форма 1» и переходим к шаблону формы. Здесь уже готов один простой шаблон контактной формы. Давайте посмотрим в текстовое поле шаблона. Мы видим, что тут есть обязательное поле «Ваше имя», обязательное поля «Ваш E-mail», а так же поля «Тема письма» и текстовое поле для сообщение. Под всем этим находится кнопка «Отправить».

Шаблон контактной формы

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

Вот этот код:

Теперь мы будем редактировать этот код. Под надписью «Шаблон формы» мы видим кнопочки с названиями «Текст», «E-mail», «URL», «Телефон» и т.п. Ищем кнопочку «Файл», нажимаем ее и переходим в настройки прикрепляемых файлов.

Здесь в настройках мы можем выставить:

  • Тип поля (будет ли это поле обязательным или нет);
  • Имя кода вставки (по умолчанию оставляем, как есть);
  • Предельный размер файла (вы можете выставить предельный размер, чтобы вам не отправляли файлы весом в гигабайт);
  • Разрешенные типы файлов (здесь мы можем написать через пробел типы файлов, которые можно прикреплять. Например, пишем: jpg png mp3 rar и т.п.)
  • последние два пункта: атрибут id и атрибут класса нужны для оформления формы стилями CSS. Оставmте пока их пустыми. Позже, когда мы разберемся с основами CSS, вы сможете вернуться и заполнить эти поля, чтобы изменить вид так, как хочется вам;

Все, выставили настройки и нажимаем синюю кнопку «Вставить тег». Наш код добавления файла вставился в нашу форму. Теперь давайте отредактируем ее. Заменим текст сообщения на «Прикрепить файл (допустимые форматы: jpg, png, mp3, rar)», а наш старый код [textarea your-message] заменяем на тот, который сгенерировала нам форма. В итоге получается вот что:

Так, форму добавления файла мы вставили. Теперь давайте добавим поле для ввода сайта перед отправкой. Нажимаем кнопку URL и переходим в настройки. Выставляем необходимые настройки и нажимаем кнопку «Вставить тег». Опять же, как и со вставкой файла, вставляем сгенерированный год между тегами <label> и </label>, а также подписываем текст перед формой ввода, например «Введите URL».

Вот так будет выглядеть полный код нашего шаблона:

Теперь, когда код шаблона готов, нажимаем кнопку «Сохранить» и копируем код контактной формы.

код контактной формы

Создание страницы «Обратная связь»

Итак, шаблон формы обратной связи мы создали. Теперь создаем страницу «Обратная связь» У меня уже была создана страница под названием «Контакты». Я захожу в редактор страниц и в текстовом поле во вкладке «Текст» вставляю код моей формы. После нажимаю кнопку «Обновить».

Создание страницы Обратная связь

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

Страница Обратная связь

Отправка сообщения с помощью формы обратной связи

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

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

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

Мы с вами рассмотрели только одну вкладку настроек плагина Contact Form для WordPress. Давайте теперь перейдем в настройки плагина и выберем вкладку «Письмо»

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

Что мы здесь можем задать? 

  • в поле «Кому» мы можем указать адрес электронной почты, на который будет приходить письмо;
  • в поле «От кого» мы видим, что в шапке нашего письма будет написано, от кого пришло письмо и приписка <wordpress@saytostrojka.ru>;
  • в поле тема мы видим тег [your-subject], он означает, что в теле письма, которое придет нам на почту, отобразится название сайта и тема письма;
  • в поле дополнительные заголовки указан код [your-email]. Это означает, что в теле письма к имени отправителя будет добавлен адрес его электронной почты;
  • в поле «Тело письма» мы видим, как примерно будет выглядеть письмо, которое придет нам на почту.

Давайте для примера отправим письмо и посмотрим, как оно будет выглядеть на странице обратной связи…

и на почте…

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

Достоинства плагина Contact Form

  1. Легкодоступность и бесплатность.
  2. Простота управления — нет сложных настроек.
  3. Интуитивно понятный внешний вид формы обратной связи
  4. Простой код плагина, не утяжеляющий исходный код

 
Ну вот и все о плагине обратной связи Contact Form 7. Если вам понравилась эта статья — не забудьте сделать репост. А я пока прощаюсь с вами. До новых встреч на страницах моего блога!

Расскажи друзьям:
  Лучшее "спасибо" - репост статьи! Репост
ПОДПИСАТЬСЯ НА ОБНОВЛЕНИЯ САЙТА:

Обсуждения закрыты для данной страницы