Modx form ajax: AjaxForm / Утилиты / Дополнения MODX / modstore.pro

Leave a Comment / Разное / By /

Урок 26. Создание AJAX формы отправки сообщений MODX

Для создания AJAX формы нам понадобится:

  • modSwiftMailer — дополнение MODX Revolution, которое можно установить из репозитория
  • библиотека jQuery

Алгоритм работы:

  1. пользователь заполняет поля и нажимает «Отправить»
  2. форма обращается по адресу к ресурсу, где лежит сниппет sendMail
  3. этот сниппет принимает Ajax запрос и отправляет письмо на адрес указанный в системной настройке emailsender

Создание формы отправки сообщения

Напишем код формы с необходимыми полями (можно создать отдельный чанк, если собираетесь вызывать форму на нескольких страницах):

В моём случае эти поля:

  • Имя
  • Email
  • Телефон
  • Сообщение

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

Создание скрипта обработки формы

Создадим javascript, который будет обрабатывать форму и отправлять AJAX запрос для отправки сообщения на почту:

Этот код вставляем в head сайта после вызова библиотеки jQuery. Код закомментирован, дополнительно объясню, что 117 — это ИД ресурса, где содержиться наш обработчик AJAX вызова.

Создание обработчика AJAX запроса

Итак, давайте создадим сниппет, который будет обратывать AJAX вызов, назовём его sendMail. Код сниппета:

Сделаем вызов сниппета [[sendMail]] поместим этот вызов в поле «Содержимое» новосозданного ресурса, далее заменим в javascript коде 117 на ИД нашего ресурса. После этого меняем шаблон созданного ресурса на пустой _blank, сохраняем и наш обработчик готов.

Внимание! Данный метод отправки сообщения можно использовать с дополнением FormIt. Также в следствие непонятных для меня причин возникали ошибки при AJAX ответе на работу сниппета, при этом сообщение успешно доставлялось на почту админа.

Все вопросы по работе modSwiftMailer можете задать в этой ветке форума

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

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

  • Submit A Form Without Page Refresh using jQuery
  • modSwiftMailer
  • Урок 25. Создание AJAX поиска на сайте
  • Урок 21. AJAX загрузка Quip комментариев
  • Урок 9. Создание контакт-формы с помощью FormIt

Форма в Демо не отправляет сообщения А лишь демонстрирует работу скриптов.

Демо AJAX формы

Feb 10 2013 AJAX jquery modSwiftMailer уроки MODx Revolution Виктор Матушевский

Урок 25. Создание AJAX поиска на сайте Урок 28. Работа с csv

Please enable JavaScript to view the comments powered by Disqus.

Форма обратной связи modx на MODX без спама

Форма обратной связи modx на MODX без спама

  1. Главная
  2. MODX
  3. Форма обратной связи modx на MODX без спама

6435

Назад

Для создания формы на Modx без спама, надо её создать с дополнительными невидимыми полями:

1. Загружаем и устанавливаем компоненты Ajaxform и Formit

2. Форма вызывается очень просто, вы должны разобраться

[[!AjaxForm?
&snippet=`FormIt`
&form=`tpl.AjaxForm.example`
&hooks=`email,spam`
&emailFrom=`[email protected]`
&emailSubject=`Заявка с сайта https:  daruse.ru `
&emailTo=`[email protected]`
&validate=`name:required,email:required,message:required,work-email:blank`
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Спасибо за заявку! Мы свяжемся с вами в ближайшее время.

 `
&emailTpl=`mailtpl`
]]

Или через шабланизатор Fenom, вот так:

{$_modx->runSnippet('!AjaxForm', [
    'snippet' => 'FormIt',
    'form' => 'tpl.AjaxForm.example',
    'hooks' => 'email,spam'
    'emailFrom' => '[email protected]',
    'emailSubject' => 'Заявка с сайта daruse.ru',
    'emailTo' => '[email protected]',
    'validate' => 'name:required,email:required,message:required,work-email:blank',
    'validationErrorMessage' => 'В форме содержатся ошибки!',
    'successMessage' => 'Спасибо за заявку! Мы свяжемся с вами в ближайшее время.',
    'emailTpl' => 'mailtpl',
])}

Описание параметров:

  • snippet — сниппет для обработки AjaxForm, ставим Formit — он как раз и отправляет письма
  • form — чанк оформления формы, стоит тот, который по умолчанию
  • hooks — хуки для защиты от спама
  • emailFrom — адрес, от которого приходит письмо
  • emailTo — адрес, которому приходит письмо
  • validate — валидация, тут также два невидимых поля
  • validationErrorMessage — сообщение, которые будет выводиться, при не успешном вводе полей
  • successMessage — сообщение, которые будет выводиться, при успешной отправке письма
  • emailTpl — чанк, в котором храниться шаблон приходящего письма на почту (о нём читайте ниже)

3.

После этого заходим в наш чанк оформления формы, в данном случае это tpl.AjaxForm.example и добавим после тега form, следующие два поля.

<form action="" method="post">
 <input  type="hidden" name="nospam:blank" value="" />
 <input type="hidden" name="work-email" value="" />
...
</form>

Теперь по Вашей форме не должен проходить спам, за счет двух новых полей.

4. Внешней вид приходящего письма

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

Шаблон письма это простой чанк, который мы указываем в параметре emailTpl, тут всё очень просто, напишу пример оформления. Если будут вопросы, пишите в комментариях.

mailtpl:

<p>На сайте <b>[[++site_url]]</b> оставили заявку.</p>
[[+name:notempty=`<p><b>Имя: [[+name]]</p>`]]
[[+email:notempty=`<p><b>Почта: [[+email]]</p>`]]
[[+message:notempty=`<p><b>Сообщение: [[+message]]</p>`]]
<p>Пожалуйста свяжитесь с ним в ближайшее время.




 </p>
<p>Не отвечайте на это письмо, так как оно автоматическое.</p>

Читайте о создании обратной формы на Ajax и php и простой обратной форме на php c защитой от спама.

Обратная связь

« Предыдущая статья

Перенос MODX на хостинг

Следующая статья »

Интересное в MODX

Назад

Антиспам поле. Его необходимо скрыть через css

Ваше имя

Электронная почта

Ваше сообщение

Присылайте свои вопросы, предложения и пожелания на электронную почту. Будем рады сотрудничеству.

E-mail: [email protected]

Telegram: daruse93

Вы можете сказать спасибо автору сайта или перевести оплату.

Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.

Формы MODX через AJAX

Формы AJAX FTW

Ваш веб-сайт имеет формы, но вы хотите сделать все это с помощью AJAX. Вы можете сделать это в MODX, настроив выделенный ресурс, который вызывает сниппет FormIt. Ваш JS отправит форму в этот ресурс, а затем вы, вероятно, захотите, чтобы он возвращал JSON, чтобы вы могли передавать любые ошибки и сообщения обратно пользователю в браузере.

часов в час

Как оказалось, заставить FormIt отвечать в формате JSON довольно сложно. Вам в значительной степени нужно отформатировать JSON в фрагменте tpl и вставить значения через заполнители FormIt. Что действительно раздражает, так это то, что сообщения об ошибках не приходят в формате JSON — часто они на самом деле завернуты в HTML. Вы может настроить большинство, если не все, выходные данные, но это переопределяет множество фрагментов, и вам нужно вызывать модификатор вывода для каждого заполнителя, чтобы гарантировать, что значение экранировано для JSON. Фу.

MODX и FormIt спешат на помощь!

Начиная с FormIt версии 2.2.10, есть более простой способ. Я отправил PR, который замечательные люди из Sterc любезно рассмотрели и объединили — вместе с важными исправлениями, связанными с безопасностью, от других замечательных членов сообщества MODX. (Я <3 с открытым исходным кодом!)

Примечание: официальные документы для FormIt находятся здесь: https://rtfm.modx.com/extras/revo/formit

Как это работает

Вы можете найти пример использования в PR на Github, но, по сути, вы хотите включить эти свойства в свой вызов FormIt: 

 &validationErrorBulkFormatJson=`1`
&validationErrorMessage=`{"успех":false,"ошибки":[[+ошибки]]}`
&hookErrorJsonOutputPlaceholder=`hook_error_placeholder`
&errTpl=`[[+ошибка]]`
Разбить его
  • «validationErrorBulkFormatJson» указывает FormIt на JSONify необработанный массив ошибок проверки вместо форматирования каждой из них с помощью фрагмента, указанного в свойстве «validationErrorBulkTpl».
  • «validationErrorMessage» — это свойство FormIt по умолчанию для сообщения об ошибках проверки. В этом случае мы добавляем немного JSON, настроенного для нашего приложения, и вставляем ошибок JSON в свойство объекта с ключом «ошибки». Вы можете просто вернуть
    ошибок     JSON, если хотите, или поместите его внутрь любого объекта Javascript, который вы хотите.
  • «hookErrorJsonOutputPlaceholder», если это свойство не пусто, FormIt будет отправлять сгенерированные перехватчиками ошибки (перехватчики могут генерировать свои собственные ошибки, которые не совпадают с ошибками проверки) этому заполнителю в формате JSON. Я решил не полностью обходить обычную обработку ошибок хука, потому что вы можете захотеть обернуть сообщение об ошибке хука HTML для вставки непосредственно в DOM, или вам может понадобиться заполнитель на странице где-нибудь для отображения сообщения об ошибке старомодным путь… Я не знаю, это казалось слишком самоуверенным, чтобы полностью пропустить обработку ошибок в этом контексте.
  • Компромисс заключается в том, что если вы не хотите форматировать свое сообщение об ошибке, вам нужно будет передать заполнитель для чистой ошибки в свойство «errTpl», как в примере выше.

Вашему Ресурсу с вызовом FormIt также потребуются следующие заполнители: 

 [[!+fi.validation_error_message]]

Показывает значение свойства «validationErrorMessage». Если бы была ошибка (ошибки) проверки, вы бы получили что-то вроде: 

 {
  "успех": ложь,
  "ошибки": {
    "type": "Это поле обязательно для заполнения.",
    "email": "Это поле обязательно для заполнения."
  }
}
 
 [[!+hook_error_placeholder]]

Это ключ-заполнитель, который вы указали в свойстве «hookErrorJsonOutputPlaceholder», и если произошла ошибка ловушки, вы получите что-то вроде: 

 {
  "ошибки": {
    "тест": "плохой котенок!",
    "FormItSaveForm": " "
  },
  "успех": ложь,
  "message": "плохой котенок!\n "
}
 
 [[!+fi. successMessage:is=``:then=``:else=`{"success":true,"message":"[[!+fi.successMessage]]"}`]]

Если отправка формы не вызвала ошибок, этот заполнитель покажет сообщение об успешном завершении. В этом случае это будет выглядеть так: 

 {
  "успех": правда,
  "message": "Сообщение, которое я настроил с помощью свойства 'successMessage'."
}

Вот оно. Надеюсь, это поможет вам привнести в формы некоторые преимущества AJAX. Да здравствует MODX!

HTMX и MODX — союз, заключенный на небесах?

HTMX — одна из моих любимых библиотек AJAX для HTML-over-the-wire, ее до смешного просто установить и еще проще использовать. Вы можете ознакомиться с официальной документацией HTMX, если хотите узнать больше.

Начало работы

Первое, что нам нужно сделать, это добавить HTMX в наши шаблоны. Если вы чем-то похожи на меня, вы уже настроили фрагмент под названием scripts или нижний колонтитул, который содержит ваши теги script, если нет, вам придется добавить тег script в каждый шаблон, в котором вы хотите использовать HTMX. Чтобы установить HTMX, добавьте на свой сайт следующий тег:

После установки вы можете быстро проверить его работу, используя следующий код (Примечание: вы необходимо дополнительно установить PDO Tools, чтобы использовать тег быстрого поля.) 

 <тип ввода = "текст" имя = "имя"
    hx-get="[[~[[*id]]]]"
    hx-trigger="задержка изменения клавиши: 500 мс"
    hx-target="#вашеимя"
    hx-select="#вашеимя"
    placeholder="Введите ваше имя">

[[#GET.name]]

Рабочий пример

Буквально так просто начать работу с HTMX на MODX. Теперь о чем-то более сложном. Обычно мы используем AJAX для отправки форм, предоставляя мгновенную обратную связь и сообщение об успешном завершении отправки формы. В этом примере мы будем использовать Formit Extra для обработки проверки и отправки.

Настройка Formit

Убедитесь, что у вас установлен дополнительный Formit! Затем добавьте на свою страницу следующий код: 

Обратите внимание, в приведенном ниже примере кода нет хуков. В вашей форме вы захотите добавить крючки, такие как электронная почта, ReCaptcha, спам и т. д. Поскольку это просто демонстрация на HTMX, я подумал, что будет лучше, если примерная форма не будет собирать какие-либо ваши данные: D 

 [[!Формировать?
    &validate=`имя: обязательно,
    электронная почта: электронная почта: требуется,
    Тема (обязательно,
    текст: обязательный: stripTags`
    &successMessage=`
Спасибо, что связались с вами
`
    &validationErrorMessage=`
Исправьте ошибки в форме перед повторной отправкой
`
]]


    [[!+fi.validation_error_message]]
    [[!+fi.successMessage]]
    <дел>
<дел>
<дел>
<дел>