Как подключить формы отправки данных | Penguin-team

Подключение html форм в WPS Framework

21.02.2018
Александр Михайленко
4 минуты
WordPress, WPS Framework, Разработка,
255

Добрый день, сегодня мы разберем, как безболезненно подключить 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». В нем вы можете указать адрес (или несколько адресов), на которые будет приходить оповещение с формы, а также указать, нужно ли сохранять отправленное письмо в админ панели.

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

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

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

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

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

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

пингвиненок

Получить 7 писем о том,
как улучшить свой AdWords аккаунт
+ PPC статьи

Имя
e-mail
Улучшить AdWords

Улучшить свой AdWords

Получите 7 писем, о том, как можно улучшить свой аккаунт в AdWords

Подписаться

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

В версии 2.2.0

  • Добавлена поддержка "Google Keyword Planner"
  • Используйте "LeftALT + S" для поиска слов
  • "Показать/скрыть" теперь полностью скрывает расширение с экрана

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

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