ru
 en

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

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

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

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

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

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

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

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

Formit для Revo

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

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

[[! FormIt?
&hooks=`spam,email,redirect` 
//общее название скриптов FormIt, которые отрабатываются во время обработки формы. spam,email,redirect - конкретные «хуки»
&emailTpl=`email_tpl`
//emailTpl — шаблон уведомления о новой заявке
&emailTo=`support@site.ru`
//emailTo — почта, на которую будут отправляться уведомления
&emailSubject=`Письмо с сайта `
//emailSubject — тема письма;
&redirectTo=`25`
//redirectTo — страница, на которую будет перенаправлен пользователь после отправки заявки (указывается ID ресурса);
&validate=`name:required,email:email:required,text:required:stripTags,phone:required`
//validate — правила валидации полей, из которых состоит созданная форма.
]] 
[[!+ fi.error_message:notempty=` [[! +fi.error_message ]] `]]

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


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

  1. Обязательное наличие скрытого инпута nospam, если у вас стоит хук для фильтрации спама spam. Спам-боты заполняют невидимое пользователям поле и отправка не происходит.
  2. Наличие плейсхолдеров для вывода ошибок заполнения и отправки по всей форме и у каждого поля в частности. Если что-то заполнено не правильно, поле возвращает ошибку с комментарием.
  3. Уникальные для каждого поля плейсхолдеры атрибута name, передающие введённые пользователями данные.
<form action="[[~]]" method="post" class="form">

    <input type="hidden" name="nospam:blank" value="" />
 
    <label for="name">Ваше имя <span class="required">*</span>:</label>
    <span class="error"></span>
    <input type="text" name="name" id="name" value="" />

    <label for="email">Телефон <span class="required">*</span>:</label>
    <span class="error"></span>
    <input type="text" name="phone" id="phone" value="" />
 
    <label for="email">Email <span class="required">*</span>:</label>
    <span class="error"></span>
    <input type="text" name="email" id="email" value="" />
  
    <label for="text">Сообщение <span class="required">*</span>:</label>
    <span class="error"></span>
    <textarea name="text" id="text" cols="55" rows="7" value=""></textarea>
   
    <input class="submit_button" type="submit" value="Отправить" />
</form>

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

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

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

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

[[!AjaxForm?
&snippet=`FormIt`
&form=`tpl.AjaxForm.example`
//выносим HTML формы в отдельный чанк
&hooks=`spam,email,redirect`
//скрипты FormIt, которые выполняются во время обработки формы. spam,email,redirect - конкретные «хуки»
&emailSubject=`Письмо с сайта `
//параметр с темой письма
&emailTo=`support@site.ru`
//адрес получателя
&emailTpl=`email_tpl`  
//шаблон письма
&validate=`name:required,email:email:required,text:required:stripTags,phone:required`
//правила валидации
]]

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

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

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

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

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

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

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

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

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

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

Пример заполненных полей и их параметров в конструкторе форм
Выбраны и настроены все поля форм и кнопка

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

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

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

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

Выбор оформления формы обратной связи
Настройка дизайна формы 

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

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

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

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



ОтменитьДобавить комментарий

Назад к статьям