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

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

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

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

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

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

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

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

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

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

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

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

<form method="post">
<div class="fancy-form">
	<i class="fa fa-user"></i>
	<input type="text" name="name" required="" class="form-control" placeholder="Ваше имя*" value="[[+fi.name]]">
	<span class="error error_name">[[+fi.error.name]]</span>
</div>
<div class="fancy-form">
	<i class="fa fa-at"></i>
	<input type="text" name="email" required="" class="form-control" placeholder="Ваш email*" value="[[+fi.email]]">
	<span class="error error_name">[[+fi.error.email]]</span>
</div>
<div class="fancy-form">
	<i class="fa fa-mobile"></i>
	<input type="text" class="form-control" id="pfone" name="pfone" required="" placeholder="Ваш телефон*" value="[[+fi.pfone]]">
	<span class="error error_name">[[+fi.error.pfone]]</span>
</div>
<div class="fancy-form">
	<textarea rows="4" name="message" required="" class="form-control word-count" data-maxlength="200" data-info="textarea-words-info" placeholder="Сообщение*"></textarea>
	<i class="fa fa-comments"><!-- icon --></i>
	<span class="error error_name">[[+fi.error.message]]</span>
</div>
<div class="checkbox">
    <label>
      <input type="checkbox" required=""> Согласен на обработку персональных данных<br/>
      <span class="error error_name">[[+fi.error.opd]]</span>
    </label>
</div>
<p class="text-small">Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="[[~21]]" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>
<button type="submit" class="btn btn-3d btn-xmg btn-primary btn-w100">Отправить</button>
[[+fi.success:is=`1`:then=`
<div class="alert alert-success">[[+fi.successMessage]]</div>`]]
[[+fi.validation_error:is=`1`:then=`<div class="alert alert-error">[[+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=`mail@site.ru`
    &validate=`name:required,email:required`
    &validationErrorMessage=`В форме содержатся ошибки!`
    &successMessage=`Сообщение успешно отправлено!`
]]

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

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

  1. FormIt — docs.modx.com/extras/revo/formit
  2. AjaxFormdocs.modx.pro/components/ajaxform

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

Оценить статью
web-revenue.ru
Добавить комментарий

  1. Дмитрий Шилов

    Скажите, а как сделать, стобы при отправке формы в теме сообщения &emailSubject отображалось не «сообщение с сайта…» а скажем Longtitle ресурса, с которого это сообщение отправляется?

    Ответить
    1. Alex87

      Сообщение со странцы [[*longtitle]] — не канает?

      Ответить
  2. Денис Мухин

    Приветствую!
    Сделал, как в уроке, но при отправке форма ругается на поле email, типа ошибки

    Ответить
    1. Alex87

      ,email:required — из валидате попробуйте убрать

      Ответить
      1. Дмитрий Шилов

        такая же ошибка, попробовал убрать email из «валидате» — ничего не вышло. При этом сообщение об ошибке высвечивается не то, которое в настройках сниппета «В форме содержатся ошибки», а то, как я понимаю, которое в корне… Какое то несовпадения лексикона может?

        Ответить
        1. Alex87

          Скорее всего комфликт скриптов какойто, либо валидация через js и т.д. причин может быть много

          Ответить
          1. Денис Мухин

            эмпирическим путем было выявлено, что проблема кроется тут:
            &hooks=`spam,email`

  3. Дмитрий Злобин

    Привет, расскажи пожалуйста, как можно скрыть форму и вывести вместо нее сообщение «Спасибо отправлено» в интернете нет на это решения.

    Тоесть просто после успешной отправки скрыть форму и показать сообщение спасибо вместо самой формы. А не показывать эти унылые попапы в правом верхнем углу экрана, которые на широких маниторах почти не видно).

    Ответить
  4. Иоаннъ Зомби

    Добрый день! Установлены в том то и дело. Может еще какие то настройки нужно сделать?

    Ответить
    1. Alex87

      Может просто css поправить. Форма отправляет? В логах ошибки есть?

      Ответить
  5. Иоаннъ Зомби

    Добрый день! Новичок.

    Что не так?

    Ответить
    1. Alex87

      Добрый день. Такое ощущение, что у вас не установлены Formit и AjaxForm

      Ответить
  6. Евгений Александров

    Все сделал и все работает но спам-боты атакуют по 4-8 писем в день приходит ,есть ли какое нибудь решение? Да сайты на Beget/

    Ответить
  7. Александр Си

    Здравствуйте! Все сделал по вашим указаниям, письмо отправляется, уведомление появляется об успешной отправке сообщения, но письмо не приходит на почту.

    Через консоль посмотрел оба варианта, результаты пришли такие:
    Результат 1
    SQL time: 0.0010 s
    SQL queries: 2
    PHP time: 0.0904 s
    Total time: 0.0913 s
    Memory: 0.25 MB

    Результат 1
    SQL time: 0.0000 s
    SQL queries: 0
    PHP time: 0.0619 s
    Total time: 0.0619 s
    Memory: 0 MB

    На почте ни в спаме, ни во входящих нет.
    Отправляю на яндекс почту письма.
    Хостинг находится на сервере: beget.com

    Вроде бы все соответствует, но почему то не работает(

    Ответить
    1. Alex87

      Не знаю, что у вас не так, может опечатка где какая)

      Ответить
  8. Евгений Сойер (Jenyasoier)

    День добрый, всё сделал как написано но письма не как не отправляются.
    в чём может быть проблема, уже все форумы перечитал. не чего не помогает.

    Ответить
    1. Alex87

      Добрый день! Поставьте дополнение Console и проверьте в принципе отправку почты, выполнив два отдельных кода:

      1. Просто через функцию mail()

      print (int)mail(‘test@some.host’, ‘subject’, ‘message’);

      2. Через MODX:

      print (int)$modx->user->sendEmail(‘message’);

      Желательно, чтобы оба варианта вернули 1. Просто есть подозрение, что ваш сервер просто не отправляет почту.

      Да еще модх не любит почту от mail.ru

      Ответить
      1. Влад Разыграев

        Здравствуйте, мне вернуло обо варианта 1, но письмо почему то не приходит на почту с форм. Может потому что у меня openserver?

        Ответить
        1. Alex87

          Именно по этому)

          Ответить
  9. Наталья Калинина

    Здравствуйте. Спасибо, отлично все заработало. Подскажите, плиз, а куда вставить редирект на «Сообщение отправлено!» (типа этого: &redirectTo=`123`)
    А то как то непонятно — письмо ушло, а страница никак не меняется.

    Ответить
    1. Alex87

      Здравствуйте, так и должно быть. &redirectTo=`123` это для форм на Formit без AjaxForm. Параметр редиректа не будет работать в AjaxForm. Но можно использовать callback’s если он очень нужен:

      $(document).on(‘af_complete’, function(event, response) {
      var form = response.form;
      if (form.attr(‘id’) == ‘#form’) {
      window.location.href = «http://нужный адрес»
      }
      });

      Ответить
      1. Наталья Калинина

        Алекс, спасибо за ответ! Сильно пардонирую, не сильна в скриптах —
        Куда это вставить? Создать сниппет? Или добавить в чанк с формой?

        Ответить
        1. Alex87

          Обернуть в и подключить к шаблону перед закрытием body. Да и в

          добавьте id=»form»:
          Ответить
          1. Наталья Калинина

            Чето не работает 🙁
            Перепроверила 2 раза, вписала корректно… А для скрипта не нужно еще что-то подключать, например, библиотеку?
            Тестовая страница здесь: http://24plus.com.ua/kontakt

          2. Alex87

            попробуйте подключить И в логах есть что нибудь?

          3. Наталья Калинина

            Подключила скрипт, теперь показывается всплывающее окно «Сообщение отправлено». Но редирект не работает. В логах сервера ошибок нет… Может не те логи нашла?

          4. Alex87

            Решетку где #form не надо, смотрите скрин, все работает у меня. Сейчас урок напишу про редиректы в AjaxForm

          5. Наталья Калинина

            Ураааа!!!!! Заработало!!! Глубочайший респект и волну везения вам до скончания века!
            Да темка хорошая для статьи, в инете не нашла инфо. Еще темка: как прописать стили, чтоб всплывающее окно «Сообщение отправлено» всплывало не в углу экрана незаметно, а по центру на виду. И регулировать время — если кто-то отвлекся, мог не заметить это окошко.
            Хотя мне это уже не нужно, у меня ведь теперь есть редирект!!!

          6. Alex87

            ))) Про смену вида выплывающего окна тоже напишу

          7. Наталья Калинина

            Мейлы приходят, ни редиректа, ни сообщения «успешно отправлено» нету… Очень надо, чтобы проверялось заполнение скриптом, а после отправки мейл перенаправлялось на другую страницу.

  10. Stanislav Easylife

    Все сделал как написано и не приходят сообщения…

    Ответить
    1. Alex87

      Форма взята с моего рабочего сайта и стоит не только на нем, все работает. Смотрите логи! Также встречалось такое что на говнохостингах (или бесплатных хостингах) не работают формы.

      Ответить
  11. Денис Лукиных

    Алексей, отличная статья! Было бы актуально еще доработать форму с учетом «галочки» Согласия на обработку персональных данных 😉

    Ответить
    1. Alex87

      Спасибо. Форму в статье доработал, теперь она с учетом ФЗ №152 «О персональных данных»

      Ответить