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

Для создания формы обратной связи существует множество плагинов (настройка плагина Contact Form 7). Мы же рассмотрим самый простой в настройке — плагин Contact Form.

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

Будем создавать форму вот такого вида:
Форма обратной связи на WordPress

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

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

Создание формы (настройка плагина)

После установки и активации плагина в меню появится раздел «BWS Plugins».

  • Выбираем его, а в нем подраздел «Контактная Форма».
    Форма обратной связи на WordPress
  • Откроется страница с настройками плагина, их не очень много, тем не менее, рассмотрим только самые необходимые.
  • В первую очередь, указываем электронный адрес, на который будут приходить письма. И сразу ставим галочку напротив пункта «Дополнительные настройки».
    Форма обратной связи на WordPress
  • «Использовать этот email:» — здесь указываем адрес электронной почты, на который будут приходить оставленные посетителями сообщения.
    Форма обратной связи на WordPress
  • «Отобразить блок Прикрепить файл» – отмечаем пункт, если в форме обратной связи необходима возможность к сообщению прикреплять файлы.
    Форма обратной связи на WordPress
  • «Изменить текст для поля ОТ в письме» — здесь можно указать определенный текст, который будет отображаться в поле «От» письма вместе с e-mail адресом. Удобно сюда вставить название сайта.
    Форма обратной связи на WordPress

    Например, для сайта site.ru мы вводим – «Сообщения с site.ru».
    Это позволит нам сразу определять, откуда пришло письмо.

  • «Выберите email для поля ‘FROM’ письма» — выбираем из двух вариантов.
    В первом случае в поле адрес будет отображаться e-mail человека, который отправил сообщение с сайта. Во втором – указанный нами e-mail.
    Форма обратной связи на WordPress
  • «Отобразить поле для телефона» — добавления к имеющимся полям дополнительного поля, в котором указывается телефон.
    Форма обратной связи на WordPress
  • «Обязательные поля» — отмечаем, какие поля являются обязательным для заполнения (если посетитель их не заполнит, форма откажет ему в отправке сообщения).
    Форма обратной связи на WordPress
  • «Отображение дополнительной информации в письме» — стоит отметить данный пункт, если есть необходимость просматривать дополнительную информацию об отправке сообщений через обратную связь (когда они были отправлены, с какого ip-адреса и т.д.).
    Форма обратной связи на WordPress
  • «Языковые настройки для названия полей в форме» — выбор языка, на котором будет форма обратной связи.
  • «Изменить названия полей контактной формы и сообщений об ошибках» — отметив данный пункт, можно изменить надписи полей по своему усмотрению.
    Форма обратной связи на WordPress
  • «Действие после отправки письма» — вы можете выбрать один из двух вариантов.
    В первом случае посетитель увидит указанный вами текст и останется на странице обратной связи, а во втором – будет перенаправлен  на указанную страницу.
    Форма обратной связи на WordPress
  • Сохраняем настройки, нажав внизу страницы кнопку «Сохранить изменения».
    Форма обратной связи на WordPress

Вставка созданной формы

  • Чтобы вставить созданную форму обратной связи на страницу или в запись достаточно в визуальном редакторе переключиться на вкладку «HTML».
    Форма обратной связи на WordPress
  • И в нужном месте вставить код contact_form.
    Форма обратной связи на WordPress

    Код должен быть заключён в квадратные скобки!

  • Вот так будет выглядеть наша форма на странице.
    Форма обратной связи на WordPress

Остались вопросы? Задайте их в комментариях! :-)

Если вы хотите поблагодарить меня за материал — можете сделать это здесь :-)

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

Комментарии

  • Добрый день! А возможно ли сделать такую форму с помощью этого плагина? http://xn--80aaaadvd4bfsc7aglfae3e9fsc.xn--p1ai/anketa.html#
    В ней есть выбор с помощью радиокнопок, какие поля показывать а какие нет.

  • Скажите, а где взять шорткод?

    • В разделе «Contact Form 7», в табличном представлении. Там есть колонка «Код вставки», возле сохранённой формы. Либо же прямо в интерфейсе создания/редактирования формы в самом верхе, под заголовком.

  • Спасибо за статью!

    Ребят, попробуйте сервис от http://pozvonim.com
    Простая установка на любую cms, хорошая поддержка. Не сочтите за рекламу, ссылка не реферальная, просто можно взять и попробовать на тестовый период. А потом уже решить подходит или нет. Цены как у всех, можно пакеты брать, а можно количество клиентов или минут. Лидогенерация очень высокая, а окупаемость быстрая. Может кому пригодиться мой комментарий

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

    • Сходу у меня нет мыслей, как это сделать стандартными средствами. Думаю, можно сделать путём привлечения программиста. Форма обратной связи для WordPress позволяют только загружать файлы с компьютера, но не выбирать их с вашего сайта и формировать письмо с этим содержимым.

      Хотя, я вижу такой алгоритм:
      1. В форме обратной связи создаём скрытое поле с каким-нибудь идентификатором
      2. В JavaScript на нужной странице с открытками в это скрытое поле указываем ссылку до открытки
      3. В теле самого письма (в настройках Contact Form 7) вставляете тег с атрибутом src со значением скрытого поля

      У меня сейчас пока нет времени, чтобы написать эту инструкцию, но если вы скопируете три пункта, что я привёл выше и направите их программисту, то он без труда поймёт, что нужно с этим сделать. :-)

  • Как можно сделать так как на этом сайте:
    http://retropost.ru/postcards/send/2793.html
    Посоветуйте плагин.

  • И еще один.
    Есть ли на сайте http://gruz0.ru статья как сделать такую форму комментариев?

    • Нет, такой статьи нет. Эта форма комментариев платная, я пользуюсь сервисом http://cackle.me/, вот это их разработка и она очень просто интегрируется в сайт на WordPress. Как-то даже не возникало мыслей, чтобы сделать урок по этой теме… :-)

  • Ну и я решил оставить комментарий.
    У меня вопрос, так влияют ли количество загруженных плагинов на сайт или нет?

    • Влияют самым прямым образом, Игорь. Сразу оговорюсь — «чистый» WordPress практически ни на что не способен, его в любом случае приходится «обвешивать» плагинами. И в этом случае лучше брать по минимуму, самые проверенные и популярные решения, которые хотя бы каким-нибудь образом, да оптимизируют.

      Каждый установленный плагин — это дополнительный код, который перед отображением сайта надо выполнить интерпретатору PHP, собрать в кучу всю логику плагина, выполнить какие-то дополнительные действия и всё в таком духе. В общем, чем больше плагинов — тем сложнее сайт, и дольше открывается, конечно же.

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

  • Спасибо автору за полезный пост. Но у меня, по видимому, плагин не совместим с темой. После добавления страницы с формой, порвало шаблон. Вылечилось удалением плагина и всего что с ним было связано, хотя на другом моем блоге плагин работает без проблем. Может подскажите альтернативный, проверенный плагин для формы обратной связи?

  • Было бы неплохо если бы была возможность без навыков кодера припилить к данной форме капчу, а то засрут всю почту спамом.

  • Здравствуйте! скажите, пожалуйста, а можно эту контактную форму встроить в текстовой виджет? надо в сайд бар встроить. или, может, подскажете, что для этого использовать? спасибо.

  • Никак не приходят письма на почту. с формы обратной связи. Все вроде проверила(( в чем еще может быть причина?

    • Давайте начнём с простого вопроса — а вообще какие-нибудь письма с сайта приходят? Например, попробуйте создать нового пользователя, на ваш электронный адрес должно прийти соответствующее письмо. Убедитесь, что он указан верно в меню «Настройки» — «Общие».

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

  • Благодарю, Александр! неделю мучаюсь с различными плагинами и скриптами, а «ларчик просто открывался»

  • Хочу изменить настройки стиля формы (ширину,высоту полей, цвет текста), гдЭ цсс? (или как это сделать?)

    • Здравствуйте, Елена.

      Вам необходимо открыть файл style.css вашей темы и внести необходимые коды в него. После чего сохранить и загрузить обратно на хостинг. Не рекомендую править стили в CSS, которые поставляются вместе с плагином. При обновлении всё может пропасть.

  • При чтении с планшета, окошечко с надписью «Отправьте сообщение» закрывает часть текста. Не удобно.
    За статью спасибо.

  • А как вы сделали такой красивый блок для пожертвований на Я деньги?
    Подписался на комменты, жду ответ =)

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

  • Здрасте. Пишет: ваш email не может быть отправлен. Что делать???

  • А есть возможность вставить эту форму не на страницу или запись, а в индексный файлы, т.е. с помощью кода php?

  • Ага, Contact Form я пробовал. В принципе, там достаточно просто, но не очень гибко. Если нужна простая (по структуре) форма, то это да. А в нашем случае надо было более сложную форму и не одну, поэтому теперь мы используем Contact Form 7. Настроек там побольше, но тоже каких-то особых тайных знаний не требуется, а результат более интересный. То есть если нужна не совсем стандартная форма с дополнительными полями и прочими прибомбасами, то всё-таки, лучше Contact Form 7.

    • Согласен, Contact Form 7 поживее плагин. На момент написания заметки лучшим выбором лично для меня был именно Contact Form, поэтому не стал особо мудрить и искать более навороченные аналоги.

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

    • Как и планировал, подготовил обзор плагина Contact Form 7 — http://gruz0.ru/contact-form-7/

  • Спасибо большое! Описание доступное и понятное.

  • Сделал все как написано но на сайте нету кнопки «Отправить». Помогите пожалуйста!

  • Замечательно!Установил без труда на новый блог.Спасибо!

  • Большое спасибо.
    Владимир.

  • Вы так легко все объясняете! Затратила всего-то 10 минут и все — все получилось))). Иногда читаешь, читаешь какие-то подсказки и ничегошеньки не понятно. А здесь все так просто и доступно. Спасибо!!!

  • Почему не отправляет письмо, хотя пишет, что отправлено.

    • 1) Проверьте, правильно ли указан электронный адрес администратора
      2) Может письма попадают в спам
      3) Могут быть проблемы у хостера

  • И я хочу поблагодарить. Сделала, всё получилось!

  • Спасибо огромное!;-) Очень пригодилось!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: