Ajaxform modx – Несколько форм на одной странице AjaxForm [Решено] / Русскоязычное сообщество MODX — Вебджем.рф

Содержание

Создание контактных форм на MODX при помощи Formit + AjaxForm

Автор Алексей На чтение 5 мин. Опубликовано 30.01.2017

Последнее изменение поста: 21 октября 2018 в 17:37

Практически на всех коммерческих сайтах есть страница контакты, на которой расположена контактная форма, через которую пользователи могут написать администрации сайта. Сегодня мы рассмотрим как по быстрому создать контактную форму. Реализовывать форму обратной связи мы будем при помощи пакета Formit в связке с пакетом AjaxForm, установите их если они у вас не установлены.

Создание формы обратной связи на MODX Revo с разрешением на обработку персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006.

Первым делом создаем чанк, в котором будет хранится сама форма, пусть это будет чанк «kontact-form» и помещаем в него код стандартной формы, я в основном делаю сайты с использованием bootstrap, так что возьму стандартную заготовку немного переделанную, ее статический код будет таким:

<form method="post">
<div>
	<i></i>
	<input type="text" name="name" required="" placeholder="Ваше имя*" value="">
</div>
<div>
	<i></i>
	<input type="text" name="email" required="" placeholder="Ваш email*" value="">
</div>
<div>
	<i></i>
	<input type="text" name="pfone" required="" placeholder="Ваш телефон*" value="">
</div>
<div>
	<textarea rows="3" name="message" required="" data-maxlength="200" data-info="textarea-words-info" placeholder="Сообщение*"></textarea>
	<i><!-- icon --></i>
</div>	
<div>
    <label>
      <input type="checkbox" required=""> Согласен на обработку персональных данных
      <span></span>
    </label>
</div>
<p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="#" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>					
<button type="submit">Отправить</button>
</form>

А выглядит она так.

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

Вот здесь вы можете посмотреть другие формы getbootstrap.com/css/#forms

А теперь переделаем код в динамический с учетом синтаксиса Formit и AjaxForm, получим следующее.

<form method="post">
<div>
	<i></i>
	<input type="text" name="name" required="" placeholder="Ваше имя*" value="[[+fi.name]]">
	<span>[[+fi.error.name]]</span>
</div>
<div>
	<i></i>
	<input type="text" name="email" required="" placeholder="Ваш email*" value="[[+fi.email]]">
	<span>[[+fi.error.email]]</span>
</div>
<div>
	<i></i>
	<input type="text" name="pfone" required="" placeholder="Ваш телефон*" value="[[+fi.pfone]]">
	<span>[[+fi.error.pfone]]</span>
</div>
<div>
	<textarea rows="4" name="message" required="" data-maxlength="200" data-info="textarea-words-info" placeholder="Сообщение*"></textarea>
	<i><!-- icon --></i>
	<span>[[+fi.error.message]]</span>
</div>
<div>
    <label>
      <input type="checkbox" required=""> Согласен на обработку персональных данных<br/>
      <span>[[+fi.error.opd]]</span>
    </label>
</div>
<p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="[[~21]]" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>
<button type="submit">Отправить</button>
[[+fi.success:is=`1`:then=`
<div>[[+fi.successMessage]]</div>`]]
[[+fi.validation_error:is=`1`:then=`<div>[[+fi.validation_error_message]]</div>`]]
</form>

Не забудьте поменять ссылку на страницу с пользовательским соглашением (href=»[[~21]]»)

Теперь создаем еще один чанк, который будет формировать письмо, назовем его tpl-kontact-form со следующим содержимым:

<p>Имя: [[+name]]</p>
<p>Email: [[+email]]</p>
<p>Телефон: [[+pfone]]</p>
<p>Сообщение: [[+message]]</p>

Ну и сталось сделать вывод в нужном месте:

[[!AjaxForm?
    &snippet=`FormIt`
    &form=`kontact-form`
    &emailTpl=`tpl-kontact-form`
    &hooks=`spam,email`
    &emailSubject=`Сообщение с сайта [[++site_url]]`
    &emailTo=`[email protected]`
    &validate=`name:required,email:required`
    &validationErrorMessage=`В форме содержатся ошибки!`
    &successMessage=`Сообщение успешно отправлено!`
]]

Не забудьте поменять значение emailTo на свою почту.

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

FormIt — docs.modx.com/extras/revo/formit
AjaxForm — docs.modx.pro/components/ajaxform

Вот в принципе и все!

MODX — Форма обратной связи (FormIt)

Урок, на котором рассмотрим создание формы обратной связи в CMF MODX Revolution, используя компоненты AjaxForm и FormIt.

Назначение компонентов FormIt и AjaxForm

FormIt – это компонент (сниппет) для MODX Revolution, предназначенный для обработки формы на стороне сервера. Он может осуществлять проверку полей формы (валидацию) перед дальнейшими действиями, защищать сайт от получения спама, отправлять данные формы на почту, хранить копии заполненных форм, осуществлять редирект на другую страницу (например, после успешной отправки формы на email), выполнять функцию автоответчика и многое другое.

Но для того чтобы работать с

FormIt через AJAX необходимо использовать дополнительный компонент AjaxForm.

Принцип работы формы обратной связи

Перед тем как перейти к разработке формы обратной связи в MODX Revolution, рассмотрим основной алгоритм её работы.

MODX — Схема работы формы обратной связи

После открытия некоторой страницы с формой (она берётся из чанка, указанного в параметре &form вызова сниппета AjaxForm при формировании страницы на сервере), пользователь переходит к её заполнению. Завершив заполнение, пользователь нажимает на кнопку «Отправить» и компонент AjaxForm (код JavaScript) отправляет её на сервер посредством AJAX. На сервере данный компонент запускает сниппет FormIt и передаёт ему данные формы. Обработав эти данные, сниппет

FormIt формирует ответ, который через компонент AjaxForm передаётся клиенту и отображается на странице пользователю. Ответ может быть положительным (это значит, что форма прошла валидацию и, например, данные были успешно отправлены на почту) или отрицательным (например, при заполнении формы пользователь допустил некоторые ошибки).

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

Для создания формы обратной связи в MODX Revolution необходимо выполнить следующие основные шаги:

Установить компоненты FormIt (из репозитория modx.com) и AjaxForm (из репозитория modstore.pro).
Создать HTML форму в чанке (пример формы можно взять из чанка tpl.AjaxForm.example).
Создать ресурс, в котором будет выводиться форма и шаблон. Подключить данный шаблон к ресурсу.
MODX — Шаблон для ресурса Форма обратной связи

MODX — Ресурс Форма обратной связи
Добавить в созданный шаблон вызов сниппета AjaxForm и параметры, необходимые для его работы.

Рассмотрим шаги 2 и 4 более подробно.

Создание HTML формы в чанке

Создание HTML формы обратной связи можно осуществить посредством копирования заготовки tpl.AjaxForm.example. Например, присвоим скопированному чанку имя tpl.AjaxForm. Этот чанк, уже содержит готовую HTML-форму, состоящую из 3 полей: Имя, E-mail и Сообщение. Основные действия, которые надо производить с формой в основном будут сводиться к добавлению новых категорий или к удалению существующих. Под категорией будем понимать группу связанных между собой элементов: метка (

label), элемент формы (input, select, textarea) и элемент span (используется для отображения ошибки валидации).

MODX — Чанк, содержащий HTML код формы обратной связи

Основные моменты:

Текст метки (элемента label). Обычно берётся либо из словаря (для многоязычных сайтов) или указывается непосредственно с помощью текста.
Элемент span, должен иметь атрибут class со значением error_name, в котором фразу name необходимо изменить на значение атрибута name элемента формы, вслед за которым он расположен.

Внимание: использование плейсхолдера

[[+fi.name]] в качестве значения атрибута value элемента формы и плейсхолдера [[+fi.error.name]] в качестве контента элемента span актуально только для классической работы с FormIt, т.е. без AJAX. Они используются для заполнения формы при её повторной отправке для того чтобы сохранить значения введённые пользователем и отобразить ошибки валидации.

Например, добавим в HTML форму поле для ввода телефонного номера:


<div>
  <label for="af_phone">Телефон:</label>
  <div>
    <input type="text" name="phone" value="" placeholder="">
    <span></span>
  </div>
</div>

В итоге данный чанк будет содержать следующий HTML-код:


<form action="" method="post">
  <div>
    <label for="af_name">Имя*</label>
    <div>
      <input type="text" name="name" value="" placeholder="Введите имя">
      <span></span>
    </div>
  </div>
  <div>
    <label for="af_email">E-mail*</label>
    <div>
      <input type="email" name="email" value="" placeholder="Введите email">
      <span></span>
    </div>
  </div>
  <div>
    <label for="af_phone">Телефон</label>
    <div>
       <input type="text" name="phone" value="" placeholder="Введите номер телефона">
      <span></span>
    </div>
  </div>
  <div>
    <label for="af_message">Сообщение*</label>
    <div>
      <textarea name="message" rows="5"></textarea>
      <span></span>
    </div>
  </div>
  <div>
    <div>
      <button type="reset">Очистить</button>
      <button type="submit">Отправить</button>
    </div>
  </div>
</form>

Создание кода, содержащего вызов сниппета AjaxForm

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


[[!AjaxForm? 
  &form=`tpl.AjaxForm` 
  &snippet=`FormIt` 
  &hooks=`FormItSaveForm,email`
  &emailSubject=`Тестовое сообщение`
  &emailTo=`[email protected]`
  &emailFrom=`[email protected]`
  &emailTpl=`tpl.email`
  &validate=`name:minLength=^2^,email:email:required,message:minLength=^10^`
  &validationErrorMessage=`В форме содержатся ошибки!`
  &successMessage=`Сообщение успешно отправлено`
]]

Разберём основные параметры:

&form – отвечает за чанк, содержащий форму (tpl.AjaxForm).
&snippet — сниппет, обрабатывающий форму (FormIt).
&hooks – хуки, которые будет выполнять сниппет FormIt после успешной проверки формы (1 — FormItSaveForm, 2 — email). Хуки — это скрипты, которые запускаются после того когда форма прошла валидацию (проверку). Они указываются через запятую и запускаются последовательно один за другим. Если в одном из них произошла ошибка, то остальные не запускаются. В этом уроке будем использовать 2 хука. Хук FormItSaveForm предназначен для сохранения формы в базе данных. Хук email предназначен для отправки данных формы на почту.
&emailSubject, &emailTo, &emailFrom, &emailTpl – параметры, значения которых использует хук email. Они предназначены для указания темы письма (&emailSubject), адреса отправки (&emailTo), заголовка From (&emailFrom), шаблона письма (&emailTpl).
&validate – параметр, на основании значения которого осуществляется валидация формы. Значения параметра представляет собой список элементов, разделённых между собой запятыми. Каждый элемент состоит из имени элемента формы (который нужно проверить) и правила (требования к нему), разделённые между собой с помощью знака двоеточия. Например, валидатор name:minLength=^2^ проверяет, чтобы поле name содержало не меньше 2 символов. Валидатор email:email:required проверяет, чтобы поле mail содержало адрес электронной почты. С основными правилами создания валидаторов можно познакомиться на странице «FormIt Validators».
&validationErrorMessage — содержит сообщение, которое будет выводиться, если в форме содержатся ошибки.
&successMessage — сообщение, которое увидит пользователь, если сообщение будет успешно отправлено.

Осталось только создать чанк tpl.email, который будет содержать шаблон письма.


<h4>Сообщение</h4>
<p>От кого: [[+name]]</p>
<p>E-mail: [[+email]]</p>
<p>Телефон: [[+phone]]</p>
<p>Сообщение: [[+message]]</p>

MODX — Чанк tpl.email

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

Демонстрация работы формы обратной связи

Основные моменты при работе с формой обратной связи на странице продемонстрируем с помощью следующих изображений.

MODX — Незаполненная форма обратной связи

MODX — Форма обратной связи, не прошедшая валидацию

Сообщение, об успешной отправке формы

Просмотр заполненной формы в панели управления MODX

Письмо, пришедшее на почтовый ящик

MODX Revo — Продвинутая форма с вложениями при помощи Formit + AjaxForm

Автор Алексей На чтение 7 мин. Опубликовано 27.05.2017

Я уже писал про создание контактных форм на MODX при помощи Formit + AjaxForm, как что особо в теорию вникать не буду, а по сути приведу готовое решение, которое вы с легкость сможете переделать под себя.

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

FormIt — docs.modx.com/extras/revo/formit
AjaxForm — docs.modx.pro/components/ajaxform

Устанавливаем эти 2 компонета, документация выше.

В рамках данного урока будем создавать вот такую форму.

По сути она достаточно простая. но ее особая особенность. это вложения.

И так. данная форма имеет, вот такой html код

<form method="post" action="" enctype="multipart/form-data">
 <fieldset>
  <div> 
   <div>  
    <div>
	<i></i>
	<input type="text" name="name" required="" placeholder="Ваше имя*" value="">
    </div>
   </div>
   <div> 
    <div>
	<i></i>
	<input type="text" name="email" required="" placeholder="Ваш email*" value="">
    </div>
   </div>
   <div> 
    <div>
	<i></i>
	<input type="text" name="pfone" required="" placeholder="Ваш телефон*" value="">
    </div>
   </div>
  </div>
  <div>
	<select name="department">
		<option value="">--- Выберите тип работы ---</option>
		<option value="Разработка-сайта-под-ключ">Разработка сайта под ключ</option>
		<option value="Доработка-сайта">Доработка сайта</option>
		<option value="Адаптация-имеющегося-сайта">Адаптация имеющегося сайта</option>
		<option value="Разработка-верстка-дизайна-сайта">Разработка/верстка дизайна сайта</option>
		<option value="Продвижение-сайта">Продвижение сайта</option>
		<option value="Рекламные-компании">Рекламные компании</option>
		<option value="Разработка-дизайна-групп">Разработка дизайна групп</option>
		<option value="Продвижение-групп">Продвижение групп</option>
		<option value="Прочеее">Прочеее</option>
	</select>
  </div>
  <div>
	<textarea rows="5" name="message" required="" data-maxlength="2000" data-info="textarea-words-info" placeholder="Примечания / пожелания"></textarea>
	<i><!-- icon --></i>
 	<span></span>
  </div>
  <div>
  <div><span><i></i></span><input placeholder="Ваше задание, методичка и т.д.*" type="file" name="attachment" data-btn-text="Выберите файл" tabindex="-1"><input type="text"><span tabindex="-1"><button type="button">Выберите файл</button></span></div>
  </div>
</fieldset>
<button type="submit">Отправить</button>
</form>

По сути обычная немного модифицированная bootstrap 3 разметка.

Обязательный атрибут для использования вложений в MODX: enctype=»multipart/form-data»

Ну а теперь ближе к делу:

Создаем чанк, ну к к примеру form-uslugi и помещаем в него весть вышеприведенный код, далее модифицируем его под Formit + AjaxForm, получаем:

<form method="post" action="[[~[[*id]]]]" enctype="multipart/form-data">
    <fieldset>
        <div> 
            <div>  
                <div>
                	<i></i>
                	<input type="text" name="name" required="" placeholder="Ваше имя*" value="[[+fi.name]]">
                	<span>[[+fi.error.name]]</span>
                </div>
            </div>
            <div> 
                <div>
                	<i></i>
                	<input type="text" name="email" required="" placeholder="Ваш email*" value="[[+fi.email]]">
                	<span>[[+fi.error.email]]</span>
                </div>
            </div>
            <div> 
                <div>
                	<i></i>
                	<input type="text" name="pfone" required="" placeholder="Ваш телефон*" value="[[+fi.pfone]]">
                	<span>[[+fi.error.pfone]]</span>
                </div>
            </div>
        </div>
        <div>
        	<select name="department">
        		<option value="">--- Выберите тип работы ---</option>
        		<option value="Разработка-сайта-под-ключ">Разработка сайта под ключ</option>
        		<option value="Доработка-сайта">Доработка сайта</option>
        		<option value="Адаптация-имеющегося-сайта">Адаптация имеющегося сайта</option>
        		<option value="Разработка-верстка-дизайна-сайта">Разработка/верстка дизайна сайта</option>
        		<option value="Продвижение-сайта">Продвижение сайта</option>
        		<option value="Рекламные-компании">Рекламные компании</option>
        		<option value="Разработка-дизайна-групп">Разработка дизайна групп</option>
        		<option value="Продвижение-групп">Продвижение групп</option>
        		<option value="Прочеее">Прочеее</option>
        	</select>
        </div>
        <div>
        	<textarea rows="5" name="message" required="" data-maxlength="2000" data-info="textarea-words-info" placeholder="Примечания / пожелания"></textarea>
        	<i><!-- icon --></i>
        	<span>[[+fi.error.message]]</span>
        </div>
        <div>
        <input type="file" name="attachment" data-btn-text="Выберите файл" tabindex="-1">
        </div>
    </fieldset>
<button type="submit">Отправить</button>
[[+fi.success:is=`1`:then=`
<div>[[+fi.successMessage]]</div>`]]
[[+fi.validation_error:is=`1`:then=`<div>[[+fi.validation_error_message]]</div>`]]
</form>

Далее создаем 2й чанк tpl-form-uslugi, со следующим содержимым

<p>Имя: [[+name]]</p>
<p>Email: [[+email]]</p>
<p>Телефон: [[+pfone]]</p>
<p>Тип работы: [[+department]]</p>
<p>Сообщение: [[+message]]</p>
<p>Файл: [[+attachment]]</p>

Ну и остается лишь только вызвать эту форму в нужном месте.

[[!AjaxForm?
&snippet=`FormIt`
&form=`form-uslugi`
&emailTpl=`tpl-form-uslugi`
&hooks=`spam,email`
&emailSubject=`Сообщение с сайта [[++site_url]]`
&emailTo=`[email protected]`
&validate=`name:required,email:required`
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Сообщение успешно отправлено!`
]]

Ну и проверяем работоспособность

Все отлично работает)

Сохранение MODX форм с FormIt + AjaxForm в админке сайта

Автор Алексей На чтение 2 мин. Опубликовано 01.12.2017

Последнее изменение поста: 22 октября 2018 в 20:47

Сегодня небольшой урок о том как сохранять данные с MODX форм созданных на FormIt или в связке с FormIt + AjaxForm в админке сайта.

Сделать это очень просто, для этого достаточно установить пакет FormSave, немного модифицировать вызов формы, а именно добавить в нее хук (hooks) FormSave в принципе этого достаточно, но если у вас много форм, то также желательно добавить параметр fsFormTopic (Тема для формы. Используется для разделения нескольких форм.). Так же есть еще пару параметров:

fsFormFields — Список сохраненных полей через запятые , если они опущены, все поля формы будут сохранены. (пример: name,email,message)

fsFormPublished — Должна ли форма публиковать «1» в базе данных. В настоящее время не используется (т.е. публикует по умолчанию).

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

[[!FormIt?
   &hooks=`spam,FormSave,email,redirect`     
   &emailTpl=`MyEmailChunk`
   &emailTo=`[email protected]`
   &redirectTo=`321`
   &fsFormTopic=`contact`                              
   &validate=`name:required,
      email:email:required,
      subject:required,
      text:required:stripTags,
      numbers:required,
      colors:required`
]]

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

[[!AjaxForm?
    &snippet=`FormIt`
    &form=`kontact-form`
    &emailTpl=`tpl-kontact-form`
    &hooks=`spam,email,FormSave`
    &emailSubject=`Сообщение с сайта [[++site_url]]`
    &emailTo=`[[++emailsender]]`
    &validate=`name:required,email:required`
    &fsFormTopic=`contact`
    &validationErrorMessage=`В форме содержатся ошибки!`
    &successMessage=`Сообщение успешно отправлено!`
    ]]

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

Для того что бы посмотреть отправленные формы, перейдите в Приложения и выберите FormSave, на открывшейся странице увидите следующее:

Для просмотра сообщений, щелкните по нужному пункту и выберите VIew data и уведите развернутое сообщение.

Если у кого возникли сложности, спрашивайте в комментариях.

[AjaxForm]Как завести несколько форм на странице? / Русскоязычное сообщество MODX

Добрый день, уважаемые гуру. Подскажите, как завести несколько форм на странице в AjaxForm? Старый добрый submitVar ломает отправку((( Просто выскакивает попап «Форма успешно отправлена».

Вот код вызова:

[[!Ajaxform?
	&form=`tpl.AjaxForm.example`
	&hooks=`email`
    &emailTpl=`letterTpl`
    &emailSubject=`Customer wants to visit [[+pagetitle]]`
    &emailTo=`[email protected]`
    &emailFrom=`[email protected]`
    &validate=`name:required,email:required,tel:required,subj:required`
    &redirectTo=`2`
    &clearFieldsOnSuccess=`1`
	&validationErrorMessage=`You've made a mistakes!`
	&successMessage=`Your message successfully sent!`
]]

а вот код формы

<form action="" method="post">
<input type="hidden" name="master" value="[[+pagetitle]]" />
	<div>
                
		<label for="af_name">Please, enter your [[%af_label_name]]</label>
		<div>
			<input type="text" name="name" value="[[+fi.name]]" placeholder=""  />
			<span>[[+fi.error.name]]</span>
		</div>
	</div>


	<div>
		<label for="af_email">Please, enter your [[%af_label_email]]</label>
		<div>
			<input type="email" name="email" value="[[+fi.email]]" placeholder="" />
			<span>[[+fi.error.email]]</span>
		</div>
	</div>


<div>
		<label for="af_subj">When do you want to visit us?</label>
		<div>
		<input type="text" name="subj" value="[[+fi.subj]]" placeholder="" />
			<span>[[+fi.error.subj]]</span>
		</div>
		

	</div>
        <div>
		<label for="af_tel">Please, set your phone number:</label>
		<div>
		<input type="text" name="tel" value="[[+fi.tel]]" placeholder="" />
			<span>[[+fi.error.tel]]</span>
		</div>
	</div>
	<!--div>
		<label for="af_message">[[%af_label_message]]</label>
		<div>
			<textarea name="message" rows="5">[[+fi.message]]</textarea>
			<span>[[+fi.error.message]]</span>
		</div>
	</div-->


	<div>
		<div>
			<!--button type="reset">[[%af_reset]]</button-->
			<button type="submit" name="master[[+id]]" >[[%af_submit]]</button>
		</div>
	</div>
	
	[[+fi.success:is=`1`:then=`
		<div>[[+fi.successMessage]]</div>
	`]]
	[[+fi.validation_error:is=`1`:then=`
		<div>[[+fi.validation_error_message]]</div>
	`]]

</form>

Заранее благодарен за помощь!

Меняем вид всплывающих сообщений Ajaxform (Modx Revo)

Автор Алексей На чтение 2 мин. Опубликовано 27.08.2017

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

Изменение стилей и положения всплывающего окна Ajaxform

AjaxForm для стилизации окон использует стили jGrowl, которые лежат в assets/components/ajaxform/css/lib/jquery.jgrowl.min.css, можно поправить все прямо там, но если вы обновите компонент, то и стили ваши обновятся на дефолтные, следовательно их лучше предопределить в своем css.

к примеру положение окна по дефолту заданно вот таким стилем

.jGrowl.top-right {
    top:0;
    right:0; 
}

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

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

.jGrowl.top-right {
    top:40% !important;
    width:30% !important; 
    left:35% !important; 
}

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

#jGrowl {
    font-size:18px;
    margin:0px 12px 0; 
}
.jGrowl.top-right {
    left:35% !important; 
    top:35% !important;
}
#jGrowl .jGrowl-notification {
    position: relative;
    width: 320px;
    padding: 15px;
    text-align:center;
    background: none repeat 0 0 #fff !important;
    box-shadow: 0 0 0 7px #8ab933 !important;
    border: 0px solid rgba(255, 255, 255, 0.49) !important;
}
#jGrowl .jGrowl-notification .jGrowl-close {
    position: absolute;
    right: 4px;
    top: 4px;
    color: #8ab933 !important;
}
#jGrowl .jGrowl-notification .jGrowl-message {
    color:#8ab933 !important;
}

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

Обработка полей перед отправкой AjaxForm+FormIt / Русскоязычное сообщество MODX

Добрый день!

На сайте есть форма такого типа:

<form action="#">
	<input type="text" name="name" placeholder="Ваше имя *">
	<input type="text" name="phone" placeholder="Номер телефона *">
	<select name="addressTo" data-placeholder="Выбрать филиал">
	    <option></option>
	    <option value="[email protected]" >Филиал 1</option>
	    <option value="[email protected]" >Филиал 2</option>
	</select>
	<input type="submit" value="Отправить">
</form>

Данные отправляются средствами AjaxForm

[[!AjaxForm?
	&snippet=`FormIt`
	&hooks=`spam,email,FormItSaveForm`
	&formName=`Заявка с сайта `
	&formFields=`name,phone`
	&fieldNames=`name==Имя,phone==Номер телефона`
	&form=`tpl.ajaxform.club`
	&emailTpl=`tpl.message.form`
	&emailSubject=`Заявка с сайта`
	&emailFrom=`[email protected]`
	&emailTo=`[[+addressTo]]`
	&validate=`phone:required,addressTo:required`
	&validationErrorMessage=`В форме содержатся ошибки!`
	&successMessage=`Сообщение успешно отправлено!`
]]

Форма работает. Все отлично.
Теперь на сайте необходимо сделать синхронизацию форм со сторонним сервисов.

Вот что прислала поддержка сервиса:

ссылку мы дадим вам чуть позже — пока попробуйте подготовить верно параметры, чтобы получалась верная подпись.
когда подпись настроите — скажите.
пост или гет — безразницы
с параметрами определились:
host=www.fitness.ru&name=Иванов Иван Иванович&phone=79160413045&[email protected]&timestamp=63680656072&signature=c20ad4d76fe97759aa27a0c99bff6710
фио можно разбить:
fname=Иван&lname=Иванов&pname=Иванович
в utf8 все
urlencoded
в запрос вставляется timestamp — времся в секундах… есть вроде в пхп
оно нужно для придания уникальности
все это пдписывается подписью
т.е. — signature- это md5 от конкатенации всех параметров
+ secret
для проверки md5:
name=Ivanov&timestamp=63680656065&phone=71111111112
secret=r8Sdk#4kfpfekf913
signature=md5(Ivanov.63680656065.71111111112.r8Sdk#4kfpfekf913)
15a0379c74e94f47fd6ad1de2b9c6f2d
как проверите получение подписи- сообщите
если что непонятно — говорите
host- это имя сайта с которого ты постиш
парамтеры по факту и по пост и по гет можно посылать
время ставь реально сервака
?name=Ivan&timestamp=63680656065&phone=71111111112&signature=86adf70905ae2c1c9ee645c1c5a5ff21
еще одна строка для проверки
{«return»:[{«desc»:»\u0423\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043e»,«code»:0}]}
ответ в формате Json
code=0 — нет ошибок…
в другом случае будет не 0 и в desc — описание

Если сделать отправку данных с такой обработкой средствами PHP отдельным сниппетом, то думаю проблем не будет, тут не сложно.

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

Реально ли сделать дополнительные обработки с полями, перед отправкой письма средствами AjaxForm?

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

Помогите! В какую сторону копать? Либо возьмите в работу, готов обсудить цену.

Ajaxform modx – Несколько форм на одной странице AjaxForm [Решено] / Русскоязычное сообщество MODX