Форма обратной связи modx

Форма обратной связи modx

Возьмём главные способы создания форм обратной связи на сайтах под управлением Modx Revolution. Выбор способа зависит от навыков разработчика или сложности формы.

Написать самому

Классический «дедовский» способ написания кода «с нуля» — построение html–структуры, написание файла-обработчика, отправляющего входные данные.

В данном случае нужны знания PHP , jQuery , AJAX (для того чтобы форма работала без перезагрузки страницы) и базовые навыки по безопасному программированию, чтобы готовый скрипт не стал уязвимостью сайта.

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

Но есть недостатки:

  • Сложность поддержки: создание и любые изменения в форме требуют больших временных затрат, человеческих ресурсов;
  • Отсутствие гибкости: например, установка капчи, адаптивность, интеграции со сторонними сервисами требует углубленных знаний от разработчика. Мельчайшие правки зачастую требуют внимания специалиста, который не всегда есть под рукой.
  • Нет рабочего пространства, интерфейса по работе с заявками или формами сайта. Если у вас две разные обратные связи на странице и коллбэк с подключенной АТС, обработка заявок, внесение изменений превращаются в сущий кошмар.

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

Formit для Revo

Самое «народное» решение — форма обратной связи MODx Revo через компонент FormIT. Это стандартный компонент «модикса», позволяющий быстро создавать простые формы для отправки пользовательских данных на электронную почту из любого места сайта.

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

Выше — готовый код сниппета, который можно добавить в новый чанк с формой. Не забудьте удалить строки с комментариями, начинающиеся с //!

После написания сниппета нужно прописать в том же чанке HTML-код. Он должен отвечать следующим правилам:

  1. Обязательное наличие скрытого инпута nospam, если у вас стоит хук для фильтрации спама spam. Спам-боты заполняют невидимое пользователям поле и отправка не происходит.
  2. Наличие плейсхолдеров для вывода ошибок заполнения и отправки по всей форме и у каждого поля в частности. Если что-то заполнено не правильно, поле возвращает ошибку с комментарием.
  3. Уникальные для каждого поля плейсхолдеры атрибута name, передающие введённые пользователями данные.
Читайте также:  Как увеличить размер шрифта на андроиде

Чтобы форма обрабатывалась без перезагрузки страниц используют сниппет AjaxForm. Он по умолчанию рассчитан на работу с FormIt, но вы можете использовать и собственный сниппет.

Как работает AjaxForm?

Сниппет AjaxForm — является оберткой для Formit и отвечает только за асинхронную отправку.

Для его настройки необходимо заменить код вызова FormIt (снипет в начале текста) на вызов AjaxForm, задать в качестве параметра snippet — FormIt и передать все параметры, которые были в вызове Formit.

В данном случае часто возникают конфликты скриптов и библиотек. Для отладки всего этого Вам понадобятся минимальные знания JavaScript.

Недостатками использования связки Formit (и AjaxForm) являются:

  • Проблемы со сложными, нестандартными задачам.
  • Конфликты нескольких форм на странице.
  • Трудоемкость отладки ошибок скриптов.
  • Ручная настройка капчи, SMTP.

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

Онлайн-конструкторы

Есть более простые варианты, не требующих от пользователей никаких знаний вообще. Сервисы-конструкторы обратной связи исчисляются 10-ками и почти все отлично работают с MODx. Другое дело — функционал внутри сервисов: многие из них стоят неоправданно высоко, где-то не хватает важных фишек и почти везде бесплатная версия сервиса урезана до полной бесполезности.

Мы разберём работу подобных сервисов на примере QForm24 — он достаточно прост для пользователей любого уровня и имеет полноценный функционал даже в бесплатной версии.

После регистрации и добавления сайта в сервис нужно вручную в визуальном конструкторе создасть свою форму.

Основные настройки сайта, добавленного в конструктор

Первый шаг — это настройка «скелета». Определите, какие поля и кнопки будет содержать форма, какие плейсхолдеры, имена иметь, поставьте обязательные поля.

Читайте также:  Сброс smart hub samsung

Выбраны и настроены все поля форм и кнопка

Настройте адрес для отправки заявки. При помощи меню выберите, с каким CMS и по какому протоколу будет работать элемент. Это необходимо для корректной обработки ошибок и интеграции.

Опционально можно установить галку с принятием «Соглашения об обработке» и настроить капчу. Подобный функционал не везде доступен на бесплатном тарифе, но в QForm нет ограничений по настройкам.

Здесь можно задать текст соглашения об обработке ПД

В финале настройте дизайн — оформление, выбор цветовой темы и фона, вида кнопок. На сервисах почти всегда доступны шаблоны оформления, где-то можно разработать дизайн с нуля (как правило и то и другое ограничено тарифом). На QForm доступные шаблоны и адаптация дизайна под существующие стили сайта.

Настройка дизайна формы

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

В конце настраивается отправка сообщений или интеграция с CRM.

Итог: вне зависимости от сложности работы и опыта предыдущего пользования, отправить первую успешную заявку вы сможете через 10-30 минут, бесплатно без каких либо ограничений.

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

Итак, Вам нужна форма обратной связи на вашем сайте с CMF MODx. Окей, следуйте пошаговой инструкции и вы получите симпотичную и функциональную форму обратной связи:)

Установить дополнительный пакет FormIt через Система -> управление пакетами -> загрузить дополнение.

Для того чтобы FormIt работал нам нужно:

  • В шаблоне или документе вставить код сниппета FormIt
  • Под этим сниппетом помещаем собственно форму в которой прописаны плейсхолдеры которые мы будем использовать в отправляемом письме
  • Чанк-шаблон письма

Простая форма обратной связи с помощью FormIt

[ [!FormIt?
&hooks=`email`
&emailTo=`Ваш_почтовый_ящик`
&emailSubject=`Сообщение с формы обратной связи сайта [ [++site_url]].`
&successMessage=`Спасибо за заказ, ближайшее время с Вами свяжется наш менеджер!`
&emailTpl=`sentEmailTpl`
&validate=`name:required,email:email:required,text:required:stripTags`
]]

Читайте также:  Страховка на телефон в билайне

Под сниппетом поместить форму:

Создаем чанк с названием sentEmailTpl:

Сообщение с формы обратной связи от [ [+name]].

Контактный E-mail: [ [+email]]

Текст сообщения: [ [+text:isnot=«:then=`[ [+text]]`:else=«]]

Теперь вам необходимо поменять значение поля &emailTo, прописав туда ваш почтовый ящик.

Более сложная форма обратной связи

С чекбоксами и выбором даты, расположение в два столбца.

[ [!FormIt?
&hooks=`email`
&emailTpl=`sentEmailTpl`
&emailSubject=`Сообщение с формы обратной связи сайта Клининговой компании`
&validate=`tel:required, contact_name:required, usluga:required`
&emailTo=`mail@mail.ru`
&successMessage=`Спасибо за обращение в нашу клининговую компанию!`]]

Под сниппетом поместить форму (Удалите пробел у закрывающего тега textarea):

Создаем чанк с названием sentEmailTpl:

Для создания формы на Modx без спама, надо её создать с дополнительными невидимыми полями:

1. Загружаем и устанавливаем компоненты Ajaxform и Formit

2. Форма вызывается очень просто, вы должны разобраться

Или через шабланизатор Fenom, вот так:

  • snippet — сниппет для обработки AjaxForm, ставим Formit — он как раз и отправляет письма
  • form — чанк оформления формы, стоит тот, который по умолчанию
  • hooks — хуки для защиты от спама
  • emailFrom — адрес, от которого приходит письмо
  • emailTo — адрес, которому приходит письмо
  • validate — валидация, тут также два невидимых поля
  • validationErrorMessage — сообщение, которые будет выводиться, при не успешном вводе полей
  • successMessage — сообщение, которые будет выводиться, при успешной отправке письма
  • emailTpl — чанк, в котором храниться шаблон приходящего письма на почту (о нём читайте ниже)

3. После этого заходим в наш чанк оформления формы, в данном случае это tpl.AjaxForm.example и добавим после тега form, следующие два поля.

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

4. Внешней вид приходящего письма

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

Шаблон письма это простой чанк, который мы указываем в параметре emailTpl, тут всё очень просто, напишу пример оформления. Если будут вопросы, пишите в комментариях.

Ссылка на основную публикацию
Adblock detector