Домой / WordPress / Как создать форму обратной связи в WordPress
Как создать форму обратной связи в WordPress

Как создать форму обратной связи в WordPress

Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи, или как еще говорят в народе «контактной формы».

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

Я постараюсь максимально подробно объяснить все этапы установки контактной формы, и в связи с этим урок получится достаточно длинным 🙂

Создание контактной формы в WordPress

В самом начале хочу заметить, что плагин Contact Form 7 русифицирован, и никаких проблем с ним у вас не будет. Как доказательство моих слов может выступать тот факт, что данный плагин скачали БОЛЕЕ 25 МИЛЛИОНОВ РАЗ!!!

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

1. Установите и активируйте плагин Contact Form 7. Как устанавливать плагины вы можете почитать в специальном уроке.

2. После активации перейдите в Contact Form 7 -> Формы.

Как создать форму обратной связи в WordPress

3. В открывшемся окне копируем строчку с кодом вставки.

Как создать форму обратной связи в WordPress

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

Как создать форму обратной связи в WordPress

Вот такой результат добавления контактной формы по получим:

Как создать форму обратной связи в WordPress

Готово! Вы установили рабочую форму обратной связи на свой сайт!

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

Создание новой контактной формы в Contact Form 7

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

Для этого нам нужно чтобы в форме были такие поля для заполнения:

  • Имя (Обязательное поле для заполнения)
  • Фамилия
  • Телефон (Обязательное поле для заполнения)
  • Поле с выбором удобного времени для звонка

После того как мы определились с полями, переходим к созданию формы:

1. Переходим в  Contact Form 7 -> Добавить новую.

Создание новой контактной формы в Contact Form 7

2. В открывшемся окне нажимаем кнопку «Добавить новую». Если необходимо, выберите язык в выпадающем списке ниже. По умолчанию язык будет русским.

Создание новой контактной формы в Contact Form 7

3. После нажатия кнопки вы перейдете на страницу, на которой находится редактор формы.

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

Создание новой контактной формы в Contact Form 7

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

Создание новой контактной формы в Contact Form 7

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

Как создать форму обратной связи в WordPress

5. Теперь нам нужно создать новые поля: Имя (обязательное), Фамилия, Телефон (обязательное), Удобное время звонка.

Начинаем с создания поля для ввода имени, которое должно быть обязательное для заполнения. Для этого нажимаем кнопку «Сгенерировать тег» и выбираем Текстовое поле.

Как создать форму обратной связи в WordPress

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

Как создать форму обратной связи в WordPress

6. После того, как мы добавили поле для ввода имени, нажимаем «Сгенерировать тег» -> Текстовое поле и по аналогии создаем поле Фамилия и Телефон, копируя и вставляя код в шаблон формы и шаблон письма. Отличие только в том, что для поля Фамилия ставить галочку для обязательного заполнения не нужно

После добавления полей Имя, Фамилия и Телефон редактор формы будет выглядеть так:

Как создать форму обратной связи в WordPress

7. Теперь создаем поле Удобное время звонка. Для этого нажимаем «Сгенерировать тег» и выбираем «Выпадающее меню».

Как создать форму обратной связи в WordPress

В поле Выбор пишем в строчку по одному варианту, в нашем случае это время с 8-00 до 18-00 с промежутками в два часа. После заполнения копируем соответствующие строчки кода в шаблон формы и шаблон письма.

В итоге у вас должно получиться вот так:

Как создать форму обратной связи в WordPress c помощью Contact Form 7

8. Сохраняем форму нажав кнопку «Сохранить».

Как создать форму обратной связи в WordPress c помощью Contact Form 7

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

Как создать форму обратной связи в WordPress c помощью Contact Form 7

После того как пользователь сделает заказ обратного звонка с вашего сайта, на вашу почту придет письмо с таким наполнением:

Как создать форму обратной связи в WordPress c помощью Contact Form 7

ГОТОВО! Вот мы с создали с вами форму заказа обратного звонка с нуля.

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

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

Надеюсь этот урок был вам полезен, и вы разобрались с плагином Contact Form 7.

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

И помните, что форма обратной связи на сайте — обязательный атрибут на странице контактов.


Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи, или как еще говорят в народе "контактной формы". Сегодня мы разберем с вами как можно создать за несколько минут легкую, красивую и  функциональную форму обратной связи с помощью моего любимого плагина Contact Form 7. Я постараюсь максимально подробно объяснить все этапы установки контактной формы, и в связи с этим урок получится достаточно длинным :) Создание контактной формы в WordPress В самом начале хочу заметить, что плагин Contact Form 7 русифицирован, и никаких проблем с ним у вас не будет. Как доказательство моих слов может выступать тот факт, что данный плагин…

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.89 ( 5 голосов )
100

43 комментария

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

  2. Александр

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

  3. Алексей

    Спасибо! Всё четко и доходчиво! Как раз для таких чайников, как я. Правда, с виджетом для Contact Form, избавляющим от введения шорт кодов, выглядит всё по другому )))

  4. Алексей

    Александр, извините, что беспокою, не могу отправить СМС, может у Вас есть какие то предположения на этот счет? Вылезает «Ошибка при отправке сообщения. Пожалуйста, попробуйте позже или обратитесь к администратору сайта.» А админ я и есть. Но хрено-о-овый! )))

    • — Обновите WP и плагин в случае наличия новых версий
      — Дактивируйте/активируйте плагин
      — Удалите старую форму и создайте новую
      — Если используете кэширование — добавьте страницу с формой в исключения

  5. Віталій

    Доброго дня Олександр, Ви вже мені допомагали в інших питаннях — допоможіть і в цьому. Як добавити (зробити) контакт форму «викликати замірника безкоштовно.» Приклад тут: oknaukraina.com.ua

  6. Здравствуйте ! У меня упорно письма из формы уходят на административный мейл, хотя прописан в самой форме другой. В чём может быть дело ? Как это исправить ? Помогите пожалуйста.

  7. Доброго времени суток, возможно ли сделать форму обратной связи для каждой страницы отдельную. То есть три страницы (1,2,3) и нужно сделать три разные (А, Б, В) обратные формы = 1-А, 2-Б, 3-В

  8. Возможно написать текст, чтобы его не было видно в форме но чтобы он приходил на емейл

  9. Татьяна

    Здравствуйте, подскажите, можно ли форму обратной связи разместить на боковой колонке, как виджет?

  10. Здравствуйте Александр! Подскажите это форма подойдёт для интернет магазина? Если да,то как можно эту форму прикрепить к каждой еденице товара чтоб не генерировать этот код для всех товаров отдельно?

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

      п.с. для интернет магазина лучше использовать WooCommerce конечно, но я понимаю что вопрос не об этом)

  11. в WooCommerce не получаеться поменять форму заявки на более простую!Или я что то не правильно понимаю?

  12. Спасибо огромное за плагины!!!!Плохо что раньше не попал к вам!)Сейчас попробую переустановить WooCommerce может поможет!

  13. Оказалось всё дело было в шорткоде который я удалил со страницы Checkout.) Все плагины работают отлично!Спасибо вам огромное за инфу,очень помогли!

  14. Добрый день! Подскажите возможно ли сделать такое действие с помощью Contact Form 7: мне нужно что бы в сообщении которое приходит по почте отображались слова возле ссылки, а именно — например написано «файл №25» и в сообщении которое я получу по емейлу приходил текст «файл №25» и тд.??

    • Здравствуйте! Конечно можно. В шаблоне письма добавьте просто нужную информацию и все.

      • Я имела в виду использовать как «заказ продукта». Я создаю каталог продуктов и на каждую страницу вставляю форму. Что бы в сообщении отображалась вся информация страницы. Не хочу создавать отдельно формы для всех продуктов, долго. А в woocommerce нет вариантов скрытия цены, вот и думаю как обойти((

  15. Николай

    Здравствуйте. Если я создаю сайт на локальном сервере Денвер, письмо на e-mail c формы обратной связи придет?

  16. Здравствуйте! Извините, но я , наверное, что-то не до конца поняла. А где я как админ сайта могу отследить новые комментарии после активации плагина? Сообщение отправлено, но нигде как админу оно не видно.

    • Причём, и на адрес указанной электронки сообщения не приходят….

    • В админке их отследить не получится. Только на электронной почте, которая указана в настройках плагина.

      • Не сразу сообразила, что письма с оповещениями автоматически попадают в СПАМ. А так работает плагин замечательно.

  17. Светлана

    Я сгенерировала код для вложеня файла. Но форма отправки не работает на сайте лишь с добавлением этого модуля. Помогите. Не моге разобраться почему. Постоянно выдает ошибку ERROR 500 — Internal Server Error!

    The following error occurred:

    The requested URL caused an internal server error.

    If you get this message repeatedly please contact the webmaster.

  18. Дмитрий

    Здравствуйте. Такой вопрос. Как исправить проблему с оповещение об отправке формы? То есть, допустим, клиент заполнил форму, нажал отправить и ему должно высветиться оповещение( стандартное: Thank you for your message. It has been sent.). Но вот у меня после отправки формы просто выкидывает на главную страницу и ничего более. Причём, письма до мэйла доходят моментально и с этим нареканий нет. Буду рад услышать ответ)

    • Здравствуйте. Рекомендую искать проблему в теме. В функционале плагина такого нету 🙂

      • Здравствуйте.Подскажите пожалуйста как добавить плагин SideOffer на левую сторону сайта , и куда вписать его код ( нужна форма обратной связи с лева.)

  19. Здравствуйте. Не могу разобраться, как поменять кнопку «выберите файл». У меня сайт на англ языке, и одна эта кнопка на русском и дизайн ее не самый лучший( Помогите пожалуйста

Оставить комментарий

Ваш email не будет опубликован.

*