Устанавливаем модуль Contact Form 7 на CMS WordPress

Всем привет, сегодня мы с вами установим на CMS WordPress модуль Contact Form 7, создадим новую страницу — Обратная связь и выведем на неё форму обратной связи.

Открываем админку и переходим: Плагины — Добавить новый — Поиск — Contact Form 7 — Установить — Активировать, после этого движок перекинет нас на страницу установленных модулей, находим в списке Contact Form 7 и нажимаем ссылку Настройки.

Contact Form 7

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

Contact Form 7

И Нажмём кнопку Добавить новую:

Contact Form 7

Мы попадаем на вкладку Шаблон формы.

Contact Form 7

Как мы видим в новой форме уже вставлены поля: Имя, Почта, Тема сообщения, Сообщение и кнопка Отправить. Помимо этого мы можем добавить дополнительные элементы, к примеру: телефон, ссылку, адрес, прикрепление файлов и т.д. В принципе всё что нужно у нас есть, при желании можно добавить дополнительные элементы или переименовать надписи.

P.S. — В следующей статье мы с вами будем добавлять в форму обратной связи защиту от ботов (капчу) и добавим поле для ввода номера телефона.

Перейдём на вторую вкладку — Письмо

Contact Form 7

Здесь расположился шаблон письма администратору (или иному сотруднику), при желании письмо можно настроить под себя.

P.S. — Это мы сделаем в одной из следующих статей, сначала мы настроим обратную связь, проверим как она работает, а потом уже можно и над внешним видом поработать.

Смотрим на третью вкладку — Уведомления при отправке формы

Contact Form 7

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

Ну и последняя вкладка — Дополнительные настройки

Contact Form 7

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

P.S. — Обратите внимание что в правой части есть блок Вам нужна помощь? с полезными ссылками по настройке модуля, благодаря этой справочной информации вы сможете решить любой возникший вопрос. Ну а теперь давайте дадим название нашей форме и нажмём кнопку Сохранить:

Contact Form 7

После нажатия кнопки мы увидим код, который необходимо вставить в нужное вам место:

Contact Form 7

Копируем код и переходим: Админка — Страницы — Добавить новую, заполняем заголовок — Обратная связь, после этого под заголовком нажимаем чёрный плюс (добавить блок), выбираем — посмотреть все и ищем блок — код:

Contact Form 7

Вставляем нашу строчку c кодом в этот блок:

Contact Form 7

Нажимаем на иконку код (<>):

Contact Form 7

И нажимаем Произвольный HTML:

Contact Form 7

Нажимаем кнопку Опубликовать (вверху, справа). Теперь можно и посмотреть как выглядит наша Обратная связь, нажимаем кнопку Просмотреть:

Contact Form 7

Предпросмотр в новой вкладке:

Contact Form 7

И смотрим на результат нашей работы:

Contact Form 7

Заполняем форму, Нажимаем кнопку Отправить и проверяем почтовый ящик.

Contact Form 7

Contact Form 7

На этом всё, вступайте в нашу группу в ВК, и следите за выходом новых материалов.

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

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания применять.

Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Меню навигации