Российская проектная студия OlDesign.ru

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

Работающая форма отправки сообщений с помощью 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 — 
    Официальная документация


     



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

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


    Оставьте ваш комментарий: