21.02.2018
0
102

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

Очень часто при разработке сайта на WordPress возникает задача подключить одну или несколько форм с оповещением на email администратору. Это могут быть формы совершенно разного рода. Например, форма контактов, форма заказа обратного звонка, форма заказа услуги и т.д.

Сейчас рассмотрим, как при помощи WPS Framework подключить форму на сайте и заставить ее отправлять уведомления. Кроме того, все формы будут отправляться при помощи AJAX, что сделает юзабилити сайта намного лучше и приятнее для вашего клиента.

Что под капотом?

 WPS Framework в своем составе имеет модуль для работы с формами, а точнее — для их отправки и персонализации. Перечислим основные возможности модуля:

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

 

Теперь переходим непосредственно к практической части. Сейчас мы создадим форму на сайте и заставим ее отправлять администратору уведомления на почту.

 

Итак, приступим: для начала создадим разметку самой формы, для этого пропишем вот такой код:

В результате получим типичную форму на сайте:

типичная форма на сайте

Давайте разберем основные настройки, которые необходимо произвести на форме, чтобы она работала и отправляла сообщения:

Основные параметры настройки представлены ниже:

  • form_subject — Тема письма (Обязательное)
  • form_title — Заголовок формы (Обязательное)
  • form_redirect — (не обязательное). Страница, на которую будет совершен переход после отправки формы. Указать относительную ссылку без слеша в начале.
  • email_path — (не обязательное). Если есть необходимость указать другой e-mail, передаём сюда id произвольного поля со страницы настроек модуля (предварительно создать). Если по какой-то причине e-mail из этого поля будет недоступен — будет взят основной e-mail.
  • form_template — (не обязательное) Имя файла с шаблоном, путь к файлу должен быть «wps_config/mail_template/form_template.php»
  • data-callback=»» — название функции, которая будет запущена после успешной отправки письма.

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

 

Важно: полям, которые вы хотите отобразить в шаблоне письма, необходимо обязательно указать атрибут name.

После того, как форма настроена, давайте посмотрим на настройки в админ панели, которые нам необходимо внести. Для начала вам нужно включить сам модуль в настройках. Для этого пройдите в пункт меню «WPS» -> «WPS Settings»  и включите модуль «почта».

включение модуля

После сохранения и перезагрузки у вас появится еще один подпункт меню под названием «E-mail». В нем вы можете указать адрес (или несколько адресов), на которые будет приходить оповещение с формы, а также указать, нужно ли сохранять отправленное письмо в админ панели.

адрес для оповещения

После проделанных настроек остается проверить работоспособность формы.

После отправки формы получили вот такое письмо:

письмо после отправки формы

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

Спасибо за внимание и больше рабочих форм на сайте 😉

пингвиненок



В версии 2.0

  • Существенно доработан интерфейс
  • Появилась возможность добавлять фразы
  • Добавлена поддержка "serpstat.com"
  • Добавлена возможность выгрузить слова через запятую
  • Добавлена возможность выгрузить фразы в кавычках
  • Появилась кнопка "Добавить" из буфера обмена, копируйте и вставляйте в расширение ранее собранные списки
  • Добавлена возможность закрепить окно расширения или скрыть его для вашего удобства
  • В analytics.google.com расширение больше не работает

Обновлены комбинации

  • LeftMouseClick для добавления слова, повторное нажатие - для удаления
  • ALT + LeftMouseClick - для сбора фраз