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

21.02.2018
4 минуты
WordPress, WPS Framework, Разработка,
630

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

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

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

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

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

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

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

пингвиненок
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Будьте в курсе последних обновлений

Присоединиться в

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

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

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

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

Подписаться

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

В версии 3.0.0

  • новые сервисы: Ubersuggest (NeilPatel), Spyfu и другие;
  • автосохранение списка минус-слов в рабочей области;
  • авторизация для хранения данных в аккаунте;
  • списки типовых минус-слов;
  • возможность хранить пользовательские списки минус-слова в расширении для дальнейшего применения в аккаунте;
  • англоязычный и русскоязычный интерфейс.

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

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

In version 3.0.0

  • new services: Ubersuggest (NeilPatel), Spyfu and others;
  • autosave of a negative keywords list in the workspace;
  • authorization for storing data in the account;
  • generic negative keyword lists;
  • the ability to store custom lists of negative keywords in the extension for further use in your account;
  • English and Russian interface.

Key combinations

  • LeftMouseClick to add a word, press again - to delete
  • LeftALT + LeftMouseClick - to collect phrases
  • LeftALT + S - for words searching

В версии 2.0

  • 2 режима выдачи ключевых слов:
  • быстрая выдача - аналогична выдаче Google Planner, но найденные результаты включают каждое слово из введенной в поиск фразы;
  • полная выдача - расширенная выдача, которая включает поиск по дополнительным релевантным фразам, но найденные результаты также включают каждое слово из введенной в поиск фразы.
  • Обновленный файл выгрузки ключевых слов Excel:
  • выгрузка локаций в удобном формате для загрузки в Editor;
  • обновленный шаблон для создания объявлений.
  • Полный список локаций.
  • Группировка отчетов по проектам.
  • Устранена ошибка с задержкой в 30 секунд.
  • Новые фильтры для получения релевантной выдачи.
  • Копирование минус-слов.

In version 2.0:

  • 2 modes of keywords search result:
  • quick search result - is similar to one of Google Planner , but the results found include every word of the phrase entered in the search;
  • full search result - extended search result that includes search on additional relevant phrases, but the results found also include every word of the phrase entered in the search.
  • Updated Exces Keyword Upload File:
  • uploading of locations in a convenient format for uploading to Editor;
  • updated template for creating ads.
  • Full list of locations.
  • Grouping of reports on the projects.
  • Fixed an error with a delay of 30 seconds.
  • New filters for getting relevant search results.
  • Copying of negative keywords.

Несколько шагов до работы в Penguin

Заполните форму

Прикрепите резюме:
1Кликов 259, показов 3 515. Чему равно CTR?
2Заходов на сайт 874, конверсий 16. Чему равен коэффициент конверсии?
3Что такое СРА?
4CTR 4,03%, кликов 240. Чему равно число показов объявления?
5Затрат 20 158, конверсий 63. Чему равна стоимость конверсии?

Несколько шагов до работы в Penguin

Заполните форму

Прикрепите резюме: