Обработка формы FormIt на MoDx Revolution

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

ФОРМИТ является динамичным Фрагментом обработки форм для MODx Revolution.
Он обрабатывает форму, выполняя проверку и последующие действия, такие как отправка электронной почты.


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

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

 


 

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

 



Код вызова 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

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

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

Идем в системные настройки Modx - где core - ищем recaptcha 2
Вбиваем в "значения" 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




Скажите спасибо - поделитесь:

 




Комментарии (0)