MODX: Ajax форма обратной связи

Данная статья написана для версии MODX 2.7.1, но также проверена для версий ниже. Вплоть до 2.5.8. Думаю, данная статья будет актуальна долгое время для всей линейки версий от 2.0.0 до 3.0.0. Если это статья не актуальна, наврятли Вы вообще бы на нее попали.

Важно: если Вы не разбираетесь в MODX на базовом уровне: не знаете что такое чанки, сниппеты. Если Вы не знаете как написать на HTML форму обратной связи – закройте статью, почитайте где-нибудь об этом, тут такие базовые вещи даже не объясняются.

P.S: Если Вы вдруг не знаете что такое AJAX, рекомендуем прочитать другую нашу статью.

Практика: AJAX форма обратной связи на MODX

Давайте к делу. Все очень и очень просто. Просто будьте внимательны! Весь код рабочий, проверяли на себе не один раз.

Допустим, вот так выглядит наша форма.

Теперь для полноценной работы нам нужно установить два дополнительных расширения. Первое – FormIt. Второе – AjaxForm.

FormIt – Будет выполнять две функции. Отправлять само сообщение и хранить в себе шаблон (тело, внешний вид) самого сообщения.

AjaxForm – Это непосредственно модуль, который будет выполнить AJAX запрос. Это самая легкая часть в этом уроке.

Где скачать

Идем в workshop MODX. Вверху в панели управления (можно сразу скриншот смотреть, там все понятно) ищем “Пакеты” (На версиях постарее “Приложения”), выбираем “Установщик” и уже ниже жмем зеленую кнопку “Загрузить пакеты”.

Теперь (опять скриншот ниже, он всегда будет ниже пояснять вышеописанное) просто в строке поиска набираем нужный нам “плагин” и жмем загрузить. У нас кнопки “загрузить” нет, т.к модуль уже установлен.

После загрузки возвращаемся в “Установщик” (первый скриншот, до нажатия на кнопку “Загрузить пакеты”). Теперь у нас есть целый список наших “расширений”. Просто их устанавливаем.

У нас на скриншоте они уже установлены, у Вас будет написать “Установить” вместо “Деинсталировать”.

С установкой и загрузкой – все.

Установка формы обратной связи и подключение AJAX

Теперь Вы (без нашей помощи) должны проследовать туда (шаблон, чанка) где лежит Ваша форма (html-код) и вырезать ее из того места. Все, что находится в тегах <form></form>, если что. Сохраните ее пока где-нибудь.

На место формы вставляем следующий код:

[[!AjaxForm?
&snippet=`FormIt`
&form=`tpl.AjaxForm.example`
&emailTpl=`email_tpl`
&hooks=`email`
&emailSubject=`Тестовое сообщение`
&emailTo=`info@domain.com`
&emailFrom=`modx@domain.com`
&validate=`name:required, email:required,message:required`
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Сообщение успешно отправлено`
]]

Важно: После name:required, стоит пробел, чтобы строка переносилась в адаптивной версии сайта, уберите его. И если вдруг, по каким-то волшебным причинам он не заработает, тут два варианта. 1) Вы накосячили. 2) Что-то изменилось в модуле, смотрите официальную документацию, код мы брали оттуда.

Что это все значит, и что за что отвечает. Давайте по порядку:

[[!AjaxForm? – это сам модуль который мы используем.

Важно: &snippet=`FormIt` – это какой сниппет мы используем. Вы же скачали FormIt? Он просто будет отправлять запрос туда, т.е все сделает за нас.

Важно: &form=`ajaxForm` – здесь мы вписывание название чанка в котором будет храниться наша форма (<form></form>). Т.е через 2-3 минуты мы приступим к созданию нового чанка. Название может быть любым, смотрите скриншот выше. Мы назвали наш чанк – ajaxForm.

Важно: &emailTpl=`email_tpl` – это шаблон письма. Также через 4-5 минут приступим к созданию нового чанка.

&hooks=`email` – Это хук, т.е мы объясняем модулю что идет отправка письма.

&emailSubject=`Тестовое сообщение` – Тут указывается тема письма. Если кто-то еще не понял – редактируем текст между кавычек ` `.

&emailTo=`info@domain.com` – Куда посылаем письмо.

&emailFrom=`modx@kolmogorov.pro` – От кого пришло. Можно указать любую почту.

&validate=`name:required,email:required,message:required` – Какие поля в нашей форме должны быть обязательно заполненными. Подробней рассмотрим позже, не переживайте!

&validationErrorMessage=`В форме содержатся ошибки!` – Ошибка, которая будет вылезать в правом верхнем углу страницы, если данные не отправлены по каким-то причинам.

&successMessage=`Сообщение успешно отправлено` – Тоже в правом верхнем углу, только сообщение об успешной отправке.

Создаем чанк с формой

Еще раз, просто создаем новый чанк, НО даем ему такое название, которое указано в &form=` `. В нашем случае это ajaxForm. Если не поняли, смотрите скриншот ниже.

Но прежде чем перенести форму в чанк, давайте внесем в нее кое-какие изменения. Смотрите:

1. Напишите перед каждым <input> и <textarea> данный код – <span class=”error_message”></span>. С помощью него модуль будет добавлять сообщение об ошибке.

2. Каждому <input> и <textarea> задайте атрибут name. Это делается для двух вещей.

А) Для того, чтобы мы потом могли получать “переменные” с текстом, который поместили (заполнили пользователи) в определенное поле. Заполнили телефон (поле с атрибутом name=”phone”), получили переменную [[+phone]]. Подробней через минуту разберемся.

Б) Это для нашего &validate=`name:required,email:required,subject:required`.
Допустим мы хотим сделать какое-то поле обязательным или нет. Например, Вы не хотите делать обязательным поле с атрибутом subject. Просто уберите subject:required из кода вызова Ajax запроса. Или Вы хотите сделать обязательным поле с атрибутом name= “phone” – просто добавляем phone:required в код вызова Ajax запроса. Будет так: &validate=`name:required,email:required,phone:required`

3) Присвойте всей форме класс AJAX FORM. Самый верх скриншота.

Теперь можно все сохранить и добавить в наш новый чанк ajaxForm (или как Вы там его назвали).

Созданием чанк с шаблоном письма

Снова, просто создаем новый чанк и называем его так, как указано в &emailTpl=“. В нашем случае это email_tpl.

Пишите в шаблоне что хотите, главное используйте необходимые “переменные” (так их назовем) для вывода информации в Ваше сообщение. И не забудьте сохранить чанк.

“Переменные” имеют такой вид [[+НАЗВАНИЕ]]. Где название это обозначение атрибута name в <input> которые мы добавляли.

Наглядные примеры: инпут с name=”name” имеет переменную [[+name]], инпут с name=”phone” имеет переменную [[+phone]].

Важно: Вы можете создать любой атрибут name, даже name=”pupa” и получить переменную [[+pupa]].

Конец

Вот и все, наша форма уже готова. Можете проверять.

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