Разработка и ведение стартапов, изготовление сайтов, дизайн печатной и сувенирной продукции, продвижение.

Работающая форма отправки сообщений с помощью Formit для Modx Revolution

    FORMIT — это приложение для обработки формы в Modx Revolution. Он обрабатывает форму после отправки, выполняя проверку и последующие действия, такие как отправка электронной почты.
    FormIt не создает форму, но может повторно заполнить ее в случае сбоя проверки.
     

    Установка FormIt

    • Загружаем через установщик приложений дополнение FormIt
    • Создаем чанк Formit, куда вставляем вот этот этот этот код
       
    • Оформление отправки на почту администратора сайта:
      создаем чанк email_tpl, в него вставляем этот код:


    Простая форма, 100% работает!

     

    Код вызова Formit:

    [ [!FormIt?
   &hooks=`spam,email`
   &emailTpl=`sendEmailTpl`
   &emailTo=`Email получателя`
   &emailSubject=`Письмо с сайта [ [++site_url] ]`
   &emailFromName=`Email отправителя`
   &validate=`name:required,email:email:required,text:required:stripTags`
   &successMessage=`Сообщение успешно отправлено`
   &clearFieldsOnSuccess=`1`
] ]

    ПРОСТАЯ AJAX форма Formit:

    [ [!FormIt?
	&hooks=`email`
	&successMessage=`Ваше сообщение отправлено`
	&emailSubject=`тема сообщения`
	&emailTpl=`чанк шаблона письма`
	&emailTo=`email@example.com`
] ]

[ [!+fi.successMessage] ]
[ [!+fi.validation_error_message] ]

    Вывод подтверждения и ошибок отправки на странице:

    [ [!+fi.error_message:notempty=`[ [!+fi.error_message] ]`] ]

     [ [!+fi.successMessage:notempty=`
        < div class="alert alert-success" >
          < button type="button" class="close" data-dismiss="alert" >x< /button >
          < h4 >[ [!+fi.successMessage] ]< /h4 >
          Мы ответим на ваше сообщение в самое ближайшее время.
        < /div > 
      `] ]

     [ [!+fi.error.name:notempty=`
       < span class="error error-message" >
         < div class="alert alert-error error error-message" >
          < button type="button" class="close" data-dismiss="alert" >x< /button >
          < h4 >[ [!+fi.error.name] ]< /h4 >
         Заполните поле ИМЯ и отправьте сообщение ещё раз - у вас все получится :)
         < /div >
       < /span >
     `] ]     

    [ [!+fi.error.email:notempty=`
       < span class="error error-message" >
        < div class="alert alert-error error error-message" >
          < button type="button" class="close" data-dismiss="alert" >x< /button >
          < h4 >[ [!+fi.error.email] ]< /h4 >
         Заполните поле EMAIL и отправьте сообщение ещё раз - у вас все получится :)
         < /div > 
     < /span >
    `]      

    [ [!+fi.error.text:notempty=`
      < span class="error error-message" >
        < div class="alert alert-error error error-message" >
          < button type="button" class="close" data-dismiss="alert" >x< /button >
          < h4 >[ [!+fi.error.text] ]< /h4 >
         Заполните поле СООБЩЕНИЕ и отправьте сообщение ещё раз - у вас все получится :)
         < /div > 
     < /span > 

     `]]

    Если нужно вставить Телефон в форму отправки Formit:

    < label >Телефон* (89990000000)< /label >	
< input type="tel"  pattern="8[0-9]{10}" name="phone" class="form-control" id="phone" value="[/[!+fi.phone]]"  required="required" /  >

сверху в &validate добавляем 
phone:numbers:required

    Formit и IP отправителя, чем такое реализовать?

    1. Добавить в вызов сниппета AjaxForm новый хук (например, customHook):
&hooks=`customHook,FormItSaveForm,email`

2. Добавить скрытое поле в форму (tpl.AjaxForm):
< input type="hidden" name="remote_addr" id="remote_addr" value="[ [+fi.remote_addr] ]" >

3. Создать сниппет customHook:
< ?php
$hook->setValue('remote_addr', $_SERVER['REMOTE_ADDR']);
return true;
? >

4. В чанке tpl.email добавить строчку:
< p >IP адрес: [ [+remote_addr] ]< /p >

    Formit и ReCaptchaV2 от Google

    Устанавливаем КАПЧА-приложение ReCaptchaV2:

Идем на сайт - https://www.google.com/recaptcha
Получаем ключи

Идем в настройки системы Modx - (где core) - ищем recaptcha
Вбиваем в "значения" 2 ключа

Вставляем перед закрытие формы -  [ [!recaptchav2_render] ]
Вставляем выдачу ошибки капчи -  [ [!+fi.error.recaptchav2_error] ]

вставляем сверху в formit
  &hooks=`recaptchav2,spam,email`
  &validate=`g-recaptcha-response:required`


Настройка вида (ширина):

либо использовать вариант "компакт" из документации 
https://developers.google.com/recaptcha/docs/display
либо использовать inline-стили: 
< style="transform:scale(0.8);transform-origin:0 0" >
в чанке  recaptchav2_html - div

     

    Дополнительная информация:
    CMS Tricks — 
    Официальная документация