Ajaxform successmessage не работает

AjaxForm: не отправляет письма

Комментарии: 13

[[*id]]]]» поставила, результат тот же((

Вы что не видите, что не в нем дело? весь код скопируйте

Ваш код
Мой код

А этот код, что бы форма проходила валидацию

Ну, каких то вопиющих ошибок в коде/вызове я не обнаружил, разве что:
— насторожило.

Если у вас возвращается положительный ответ, то, скорее всего проблема не в форме (тем более, что ajaxform просто обертка для обработки formlt), а в последующих действиях:
— попадает ли что-нибудь в лог?
— есть ли ошибки в консоли?
— чем у вас отправляются письма — smtp?
— возможно, письма просто ушли в спам?

+ могу еще поррекомендовать выставить &emailFrom и &hooks=`email` — на некоторых хостингах замечал такую багу, что без его указание форма обрабатывалась некорректно.

И да, напрямую к делу не относится, просто интересуюсь — у вас корректно отрабатывает этот код:

Источник

AjaxForm не отправляет письма

Хотел сделать на сайте контактную форму и решил использовать, AjaxForm c FormIt.
Но возникла проблема, он не отправляет сообщения, если не заполнять пункты ошибка самого Ajax (в виде красного окошка) не выводится (только подсвечивание красным само поле). В FormIt(тот что в админке) оповещение о отправке формы нет.
Чанк:
AjaxForm:
tpl.email:
Помогите, люди добрые.

Комментарии: 19

В error логах жалоба на » modRestClient::__construct is deprecated since version 2.3.0. Use the modRest classes instead.»

Это информация для разработчиков. Можно отключить в системных настройках опцию — log_deprecated, чтоб не мешалось.

Сообщение на почту не пришло. Хотя плагин написал что сообщение отправлено.

В спаме смотрели? Какой хостинг провайдер?

На некоторых хостингах нужно чтобы ящик с которого идёт отправка существовал физически. Если не решите проблему и есть возможность, присылайте доступы в личку, посмотрим на вашу проблему изнутри =)

С мастерхостом в плане почты проблем не было, попробуйте тогда написать в техподдержку.

p.s. Если домен указанный в emailFrom реальный, он делегирован на серверы Яндекса, что можно сделать только после подключения почты для домена. Вариант проверить все настройки (MX записи и т.п.), и можно настроить отправку почты через smtp.

Может к ним нужно подключать отдельно какие то js/css библиотеки?

Нашёл проблему. Она была в подключаемой bundle.js. Без неё форма работает исправно, но дело в том что она(bundle.js) жизненно необходима самому сайту (ибо ребята которые делали шаблон так решили) сам же сайт не подключается к jquery.

И совсем никаких ошибок в консоли браузера не выводит при подключённом bundle.js?

(Копировать её в комментарий чистой воды издевательство, возможно как то файлик перекинуть?)

Файл можно закинуть на любое файлохранилище и приложить ссылку.

Может есть другие контактные формы? Можете какие то посоветовать?

Источник

MODX. AjaxForm обработка форм с использованием Ajax

Отредактировано: 14 Ноября 2019

AjaxForm это надстройка для компонента FormIt, которая позволяет отправлять результаты форм используя ajax (можно использовать не только FormIt, но и другие скрипты). Для перехода с FormIt на AjaxForm достаточно изменить запись вызова

Этапы создания Ajax формы на сайте:

1. Устанавливаем компоненты FormIt и AjaxForm.
2. Создаем чанк с HTML формой и модификаторами.
3. Размещаем вызов в соответствующем ресурсе или шаблоне.

Стандартная форма обратной связи

В AjaxForm есть дефолтный вид всплывающих окон об успешной отправке и ошибках, чтобы его изменить, надо указать собственные файлы в параметрах frontend_js и frontend_css.

Пример файла без jGrowl, со статичным сообщением во всплывающем окне с id massage

Документация сниппета AjaxForm

AjaxForm

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

• Регистрирует нужные скрипты на фронтенде: jQuery.Form и jQuery.jGrowl.
• Сохраняет в сессию $scriptProperties при вызове сниппета.
• Выводит указанную форму, прописывая класс ajax_form и скрытый input для получения $scriptProperties .
• Вешает обработчик на форму, чтобы она отправлялась через ajax.
• При отправке запускает указанный сниппет для обработки и возвращает ответ от него.
• Выводит сообщение об успехе, или ошибки, если есть.

Параметры сниппета

Имя	По умолчанию	Плейсхолдеры
&form	tpl.AjaxForm.example	Образец чанка с формой, которую нужно обработать.
&snippet	FormIt	Сниппет для обработки формы.
&frontend_css	[[+assetsUrl]]css/default.css	Стили оформления формы и полей с ошибками
&frontend_js	[[+assetsUrl]]js/default.js	Javascript для отправки формы через ajax
&actionUrl	[[+assetsUrl]]action.php	Адрес коннектора, на который отправляется форма

Всё, что вы указываете AjaxForm, будет передано в вызываемый сниппет.

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

Вы можете использовать собственный сниппет, вместо FormIt, который будет делать что угодно (хоть создавать страницы на сайте). Единственное требование — он обязательно должен возвращать JSON массив с ключами:

• status — 1 или 0, то есть успех или ошибка.
• message — сообщение о работе сниппета, выводится если status = 0.
• data — массив для полей с ошибками, в котором ключами является имя поля, а значением — сообщение об ошибке.

Для удобства работы в параметры сниппета передаётся переменная $AjaxForm с классом компонента, чтобы вы могли вызывать из него методы error и success при выдаче ответа.

Простейший пример своего сниппета:

Этот сниппет ничего не делает, просто возвращает результат проверки имени.

Валидация формы

Сервер может вернуть ошибку отправки формы и массив полей, не прошедших проверку. Этим полям автоматически будет добавлен CSS класс error , который убирается при последующей отправке.

Так же вы можете запретить отправку формы, используя javascript переменную afValidated — если она объявлена и равна false , то форма не будет отправлена.

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

Событие af_complete

При получении ответа от сервера вызывается событие af_complete, которое вы можете использовать для обновления содержимого страницы или другой операции javascript.

Вам просто нужно указать функцию, в которую будет передано событие javascript и объект с ответом от сервера. Обратите внимание, что внутри этого объекта есть и отправляющая форма.

redirect на другую страницу сайта, после успешной отправки формы?

Добавляем id к форме, если его нет и затем в js файл прописать вот такие строки

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

Всплывающие сообщения

По умолчанию AjaxForm выводит сообщения об успешной отправке формы или о наличии ошибок. Вы можете самостоятельно вызывать их для своих целей:

Вторым параметром можно указать «прилипающий» popup — его нужно будет закрыть вручную, бывает полезно для показа серьёзных ошибок. То есть, просто вызвав сниппет на странице, вы получаете подключенный jQuery.jGrowl и можете показывать приятные всплывающие уведомления на javascript.

Примеры

Отправка email сообщения при помощи FormIt с требованием некоторых полей:

Отладка

При возникновении любых проблем, в первую очередь проверяйте, отправляется ли форма без AjaxForm. Помните, что AjaxForm — сниппет-обёртка, он не отправляет письма и не проводит проверку формы. Это делает ваш сниппет или FormIt.

Так же не забывайте заглядывать в консоль браузера на предмет ошибок javascript. Если сервер выдаёт ошибку 500 при отправке, проверьте параметр register_globals у вашего PHP — он должен быть отключен.

Источник

Ajaxform successmessage не работает

У MODX Revolution есть хороший компонент для форм — FormIt. Меня он всем устраивает, за исключением одного — отсутствия работы с ajax.
Проблема старая, решалась сотней разных способов на сотне разных сайтах, и просто не захотелось велосипедить в сто первый.

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

• 
• 

Сниппет работает просто:

1. Регистрирует нужные скрипты на фронтенде (jQuery.Form и jQuery.jGrowl)
2. Сохраняет в сессию $scriptProperties при вызове сниппета
3. Выводит указанную форму, прописывая класс ajax_form и скрытый input для получения $scriptProperties
4. Вешает обработчик на форму, чтобы она отправлялась через ajax
5. При отправке запускает указанный сниппет для обработки и возвращает ответ от него
6. Выводит сообщение об успехе, или ошибки, если есть

По умолчанию все рассчитано на работу с FormIt, но можно указать и собственный сниппет.

Пример вызова для FormIt:

Для вывода сообщений об ошибке заполнения поля, скрипт ищет в форме блок с классом error_имяполя и вставляет в него сообщение (см. дефолтный чанк).
При повторной отправке формы эти сообщения удаляются.

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

Конечно вы можете использовать и собственный сниппет, который будет делать что угодно (хоть создавать страницы на сайте) и должен возвращать JSON массив с ключами:

• status — 1 или 0, то есть успех или ошибка
• message — сообщение о работе сниппета
• data — массив для полей с ошибками, в котором ключами является имя поля, а значением — сообщение об ошибке

Для удобства работы в параметры сниппета передаётся переменная $AjaxForm с классом компонента. Советую вызывать из него методы error и success при выдаче ответа.

Простейший пример своего сниппета:

В общем, качаем, тестируем, пишем отзывы.
Это бета-версия, написана целиком за сегодня и, скорее всего, содержит ошибки.

Кстати

Сниппет можно использовать еще одним интересным образом — просто вызвав его на странице, вы получаете подключенный jQuery.jGrowl и можете легко показывать приятные всплывающие уведомления на javascript:

Вторым параметром можно указать «прилипающий» popup — его нужно будет закрыть вручную, бывает полезно для показа серьёзных ошибок.

Источник

MODX AjaxForm — документация и примеры построения контактных форм

В прошлом уроке мы разобрали документация по пакету FormIt и построили сложную форму. Сегодня логическое продолжение и в данной уроке мы рассмотрим компонент AjaxForm — сниппет для отправки форм через ajax, который по умолчанию рассчитан на работу с пакетом FormIt, но можно написать собственный обработчик.

Установить AjaxForm можно через репозиторий modstore.

AjaxForm vs FormIt — что лучше использовать. Плюсы и минусы.

Мне не нравится что аякс форм, при инициализации регистрирует на фронтенде скрипты: jQuery.Form и jQuery.jGrowl . По этому, когда на странице 1 форма, я обычно использую чистый FormIt, т.к. он не добавляет своих библиотек. Когда на странице по 3-10 форм (это сейчас модно), я всегда использую AjaxForm, т.к. нет проблем с отправкой (дублированием писем) с разных форм + есть дополнительные плюшки.

• Сохраняет в сессию $scriptProperties при инициализации сниппета.
• Выводит указанную форму, прописывая класс ajax_form и скрытый input для получения $scriptProperties .
• Вешает обработчик для отправки форм через ajax — без перезагрузки страницы.
• При отправке запускает указанный вами сниппет (обработчик) и возвращает ответ от него.
• Выводит сообщение об успехе отправки, или ошибки.

Документация по AjaxForm

Основные параметры

Имя	По умолчанию	Плейсхолдеры и примечания
&form	tpl.AjaxForm.example	Образец чанка с формой, который можно взять за основу.
&snippet	FormIt	Можете написать свой сниппет для обработки формы.
&frontend_css	[[+assetsUrl]]css/default.css	Стандартные стили оформления формы и полей с ошибками, чтобы отключить их вывод, укажите пустое значение.
&frontend_js	[[+assetsUrl]]js/default.js	Javascript для отправки формы через ajax
&actionUrl	[[+assetsUrl]]action.php	Адрес коннектора, на который отправляется форма

Всплывающие сообщения

По умолчанию AjaxForm выводит сообщения об успешной отправке формы или о наличии ошибок. Можете самостоятельно вызывать их для своих целей:

Указав второй параметр (, 1) — вы получаете «прилипающий» popup, который не закрывается автоматически (а только по нажатию на крестик) — бывает полезно для показа серьёзных ошибок.

За выплывающие уведомления, отвечает подключаемая по умолчанию javascript библиотека jQuery.jGrowl.

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

Хотите вместо FormIt, использовать собственный сниппет, который будет делать что угодно (например создавать страницы на сайте)? Без проблем, единственное требование — он обязательно должен возвращать JSON массив с ключами:

• status — 1 или 0, то есть успех или ошибка.
• message — сообщение о работе сниппета, выводится если status = 0.
• data — массив для полей с ошибками, в котором ключами является имя поля, а значением — сообщение об ошибке.

Для удобства работы в параметры сниппета передаётся переменная $AjaxForm с классом компонента, чтобы вы могли вызывать из него методы error и success при выдаче ответа.

Простейший пример своего сниппета:

Примечание: данный сниппет ничего не делает, просто возвращает результат проверки имени.

Валидация формы

Сервер может вернуть ошибку отправки формы и массив полей, не прошедших проверку. Этим полям автоматически будет добавлен CSS класс error , который убирается при последующей отправке.

Так же вы можете запретить отправку формы, используя javascript переменную afValidated — если она объявлена и равна false , то форма не будет отправлена.

Важно! Все проверки на javascript можно обойти, так что лучше не использовать эту переменную стоит использовать для реальной проверки данных. Используйте только для удобства пользователей.

те прижато к верху и правой стороне.

Чтобы сменить положение, к примеру по центру, достаточно предопредилить их в своем css, к примеру так:

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

в итоге всплывает вот такое окошко по центру сайт.

Оптимизация скорости загрузки сайта.

1. Делайте вызов Ajaxform кэшированным (без !).
2. Объедините стандартные стили и скрипты со своими и укажите в вызове чтобы стандартные не подключались.

Берем CSS код из assets/components/ajaxform/css/lib/jquery.jgrowl.min.css, assets/components/ajaxform/css/default.css и переносим его в общий файл стилей.

default.css — из этого файла выкидываем верхнюю строку @import url(‘./lib/jquery.jgrowl.min.css’); — т.к. код мы подключили сразу.

Также берем содержимое файла assets/components/ajaxform/js/default.js и объединяем с основным js файлом.

Далее отключаем css и js в вызове ajaxform.

redirect на другую страницу сайта, после успешной отправки формы?

Добавляем id к форме, если его нет и затем в js файл прописать вот такие строки

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

Настройка отправки целей в AjaxForm

Самый простой и удобный способ настроить цели на AjaxForm это добавить в сообщение успешной отправки script

Как передать адрес и заголовок страницы

Если полный адрес не выводится, попробуйте так

Чекбокс — согласие с политикой обработки персональных данных

Дополнительно

Сохранение форм в админке, добавление маски ввода для телефона, email, даты идентично formit.

Понравилась статья? Можно поблагодарить автора: отправив ему донат на

Источник