форма обратной связи modx evo
Как сделать форму на MODx?
Возьмём главные способы создания форм обратной связи на сайтах под управлением Modx Revolution. Выбор способа зависит от навыков разработчика или сложности формы.
Написать самому
Классический «дедовский» способ написания кода «с нуля» — построение html–структуры, написание файла-обработчика, отправляющего входные данные.
Преимущества самописного кода для обратной связи очевидны — полная вариативность результата и функционала. Закрывает любые цели, использует любые технологии.
Но есть недостатки:
Итог: тратить время на написание с абсолютного нуля имеет смысл лишь в особо «запущенных» случаях, когда нужен уникальный результат с уникальным функционалом.
Formit для Revo
Самое «народное» решение — форма обратной связи MODx Revo через компонент FormIT. Это стандартный компонент «модикса», позволяющий быстро создавать простые формы для отправки пользовательских данных на электронную почту из любого места сайта.
Разберем пример простой пример работы с Formit. В том месте, где будет отстраиваться форма, необходимо разместить чанк. В него добавить вызов сниппета с минимально необходимым набором параметров:
Выше — готовый код сниппета, который можно добавить в новый чанк с формой. Не забудьте удалить строки с комментариями, начинающиеся с //!
После написания сниппета нужно прописать в том же чанке HTML-код. Он должен отвечать следующим правилам:
Чтобы форма обрабатывалась без перезагрузки страниц используют сниппет AjaxForm. Он по умолчанию рассчитан на работу с FormIt, но вы можете использовать и собственный сниппет.
Как работает AjaxForm?
Сниппет AjaxForm — является оберткой для Formit и отвечает только за асинхронную отправку.
Для его настройки необходимо заменить код вызова FormIt (снипет в начале текста) на вызов AjaxForm, задать в качестве параметра snippet — FormIt и передать все параметры, которые были в вызове Formit.
В данном случае часто возникают конфликты скриптов и библиотек. Для отладки всего этого Вам понадобятся минимальные знания JavaScript.
Недостатками использования связки Formit (и AjaxForm) являются:
Итог: использовать FormIt как основу — вероятно лучший вариант для команды разработчиков. При наличии нужных навыков можно разработать практически любую обратную связь. Простую и рабочую форму можно скопировать из примеров выше.
Онлайн-конструкторы
Есть более простые варианты, не требующих от пользователей никаких знаний вообще. Сервисы-конструкторы обратной связи исчисляются 10-ками и почти все отлично работают с MODx. Другое дело — функционал внутри сервисов: многие из них стоят неоправданно высоко, где-то не хватает важных фишек и почти везде бесплатная версия сервиса урезана до полной бесполезности.
Мы разберём работу подобных сервисов на примере QForm24 — он достаточно прост для пользователей любого уровня и имеет полноценный функционал даже в бесплатной версии.
После регистрации и добавления сайта в сервис нужно вручную в визуальном конструкторе создасть свою форму.
Основные настройки сайта, добавленного в конструктор
Первый шаг — это настройка «скелета». Определите, какие поля и кнопки будет содержать форма, какие плейсхолдеры, имена иметь, поставьте обязательные поля.
Выбраны и настроены все поля форм и кнопка
Настройте адрес для отправки заявки. При помощи меню выберите, с каким CMS и по какому протоколу будет работать элемент. Это необходимо для корректной обработки ошибок и интеграции.
Опционально можно установить галку с принятием «Соглашения об обработке» и настроить капчу. Подобный функционал не везде доступен на бесплатном тарифе, но в QForm нет ограничений по настройкам.
Здесь можно задать текст соглашения об обработке ПД
В финале настройте дизайн — оформление, выбор цветовой темы и фона, вида кнопок. На сервисах почти всегда доступны шаблоны оформления, где-то можно разработать дизайн с нуля (как правило и то и другое ограничено тарифом). На QForm доступные шаблоны и адаптация дизайна под существующие стили сайта.
Настройка дизайна формы
В первом случае останется выбрать шаблон и вставить строчку кода в чанк, который будет выводить форму обратной связи. После вставки чанка в любое место сайта, он автоматически выводит там обратную связь. Для настройки дизайна потребуется чуть больше времени, подробнее здесь.
В конце настраивается отправка сообщений или интеграция с CRM.
Итог: вне зависимости от сложности работы и опыта предыдущего пользования, отправить первую успешную заявку вы сможете через 10-30 минут, бесплатно без каких либо ограничений.
Почитать полезную информацию по сервису или бесплатно попробовать создать первую форму обратной связи можно ниже.
Урок 13 – Форма обратной связи
В рамках данного урока мы познакомимся с еще одним сниппетом MODx – eForm, который служит для создания различных форм. Мы же создадим для нашего сайта форму обратной связи.
Наша форма будет иметь следующие поля:
Сниппет eForm устанавливается по умолчанию вместе с CMS MODx, в этом вы можете убедиться, если перейдете на страницу управления сниппетами «Элементы»-«Управление элементами»-«Сниппеты»:
Создаем форму обратной связи MODx eForm
Откройте ресурс «Контакты» на редактирование, назначьте наш последний созданный шаблон, если он еще не назначен и отключите использование визуального редактора для этого ресурса. Сохраните ресурс и откройте на редактирование заново, после чего добавьте в содержимое ресурса следующую строку:
Как вы догадались, это вызов сниппета eForm с параметрами:
Как вы уже догадались, нам необходимо дополнительно создать несколько чанков: form-tpl, report-tpl, thank-tpl. Этим мы и займемся.
Чанк form-tpl – шаблон формы обратной связи
Создаем новый чанк с именем form-tpl и вписываем в его содержимое следующее:
Теперь давайте обратим внимание на некоторые конструкции.
[ +validationmessage+] – это плейсхолдер для вывода сообщений об ошибках, которые могут быть допущены при заполнении формы.
Как вы заметили, имеется скрытое поле с именем formid и значением contact-form, о котором мы говорили чуть выше.
eform=”Текст сообщения:html:1” Данная конструкция задает несколько параметров для поля формы:
eform=»[описание]:[тип данных]:[обязательное ли поле]:[сообщение об ошибке]:[правило проверки]»
«Описание» – это текстовое описание поля;
«Тип данных» – может принимать следующие значения: string – любой текста, date – дата, integer – целое число, email – электронный адрес, float – число, html – текст в формате HTML, file – поле для отправки файла.
[ +verimageurl+] – плейсхолдер для вывода капчи.
Чанк report-tpl – шаблон уведомления с формы обратной связи
Создадим еще один чанк с именем report-tpl и впишем в код следующее содержимое:
Обратите внимание, что вся информация добавляется в шаблон с помощью плейсхолдеров, названия которых совпадает с именами полей в нашей форме.
Чанк thank-tpl – шаблон уведомления с формы обратной связи для отправителя
Создаем еще один чанк с именем thank-tpl и впишем в код следующее содержимое:
Думаю здесь все понятно, сохраните чанк и зайдите на страницу контактной информации, если вы все сделали правильно, то у вас должна появиться форма.
В рамках данного урока я не буду объяснять, как прописать стили для вашей формы, поскольку мы это делали в предыдущих уроках, и я думаю, вы сможете сделать самостоятельно без всякого труда. На этом урок закончен, а в следующем уроке мы познакомимся с тем как сделать карту сайта с помощью сниппета Sitemap.
[Evo] Отправка форм в модальном окне. Используем FormLister и ajax.
Задача
Суть метода
Подготовка
Скачайте fancyBox и подключите к сайту. Для этого нужны всего 2 файла из дистрибутива, это jquery.fancybox.min.js и jquery.fancybox.min.css.
Далее в тегах head пропишите пути к этим файлам. Например:
Разумеется, также вам потребуется jQuery. Если он не подключен, то выше всех этих скриптов вызовите и его. Допустим, так:
Теперь необходимо установить сам FormLister. Если вы не поставили его вместе с сайтом, то установить можно автоматически, в админке «Модули» — «Extras».
Вызов FormLister.
В нужном месте страницы разместите примерно следующее:
Сразу обращу внимание на то, что вместо чанков с шаблонами вы вполне можете вставить их содержимое сразу в сниппет, добавив в самом начале слово @CODE.
Например
В нашем случае лучше всего воспользоваться чанками, так как код этих шаблонов нам будет нужен в дальнейшем, и незачем дублировать одну и ту же информацию в двух местах.
Содержимое чанков.
В чанке form_callme_tpl
В чанки form_callme_outer и form_callme_error_tpl я вставил [+messages+] и [+message+] соответственно, т.к. мне не требовалось какое-то сильно навороченное сообщение об ошибках.
В form_callme_success сообщение об удачной отправке
Ну и form_callme_report это шаблон письма на почту
По идее форма должна работать. Вы уже можете отправлять сообщения, получать предупреждения об ошибках и неверном вводе. Правда, страница будет перегружаться. Проверьте всё, прежде чем приступать к следующему шагу!
Делаем аякс-отправку.
Для того, чтобы содержимое формы отправлялось без перезагрузки, нам нужно немного js. Пишем похожий на этот скрипт:
При загрузке страницы скрипт ищет форму, заключённую в элемент с и заменяет событие отправки своей функцией. А именно: при отправке содержимое формы сериализуется и аяксом отправляется на урл form_callme. При ответе содержимое элемента c меняется на содержимое ответа.
Обратите внимание. frmwrapper — это id элемента-обёртки для формы. Выше, в вызове FormLister мы как раз его присвоили слою.
Форма
Теперь нам нужно сделать форму всплывающей. Для начала скроем слой с формой.
Теперь зададим кнопку, которая будет при клике открывать форму.
Как видите, ссылка имеет необычные атрибуты data-fancybox=»» data-src=»https://modx.ru/novosti-i-stati/article/332/#callback-form». Это как раз вызов модальной формы, расположенной в элементе с Этот id мы также присвоили чуть выше, в коде вызова FormLister. Он может быть произвольным и при этом не должен повторяться.
Проверьте, всплывает ли форма. Зачастую вылезают ошибки, отследить их появление можно в консоли разработчика. Самая часто встречающаяся — jquery подключен после fancybox. Разумеется, в таком случае вы получите что-то типа fancybox is not defined.
Получаем и обрабатываем ajax
Как вы помните, мы сделали на js отправку данных на урл form_callme. Такого адреса на нашем сайте нет, и именно так всё и задумано. Делаем плагин.
Назовите его как угодно, я назвал ajax. Перейдите на вкладку «Системные события» и отметьте чекбокс OnPageNotFound. Теперь содержимое:
Разберёмся. Скрипт сработает, когда кто-то запросил несуществующую страницу. Для начала скрипт проверяет, обратились ли к нему именно через ajax, или же просто кто-то открыл урл. Если всё хорошо, то получает данные GET-запроса и проверяет, искал ли кто-то урл form_callme. (В этом месте можно сделать ветвление для абсолютно разных запросов и выдавать наружу что угодно. Скажем, сделать 2-3 разных формы перезвона в зависимости от url и т. д. и т. п.
Потом через апи модх вызывается FormLister с аналогичными нашему первому вызову. Единственное, что добавилось, это параметр ‘removeEmptyPlaceholders’ =>’1′ (необходимо для корректного отображения сообщений об ошибках)
Далее FormLister обрабатывает форму и выдаёт результат. Это могут быть как ошибки ввода так и успешная отправка формы. А мы получаем этот результат при помощи js-скрипта и показываем пользователю.
Проверяйте. Всё должно работать
Урок 12 Форма обратной связи. Сниппет eForm
2. Уведомление посетителя об отправке сообщения.
3. Форма отправленного сообщения, которое придет на почту.
Создаем чанк с шаблоном формы обратной связи
Прежде, чем создавать чанк с шаблоном для формы обратной связи, давайте изучим код, которым описывается эта форма в нашем шаблоне. Открываем в Notepad++ файл contact.html который лежит в папке C:/xampp/htdocs/site/www/assets/templates/templatemo_250_chess/. Это будут строки со 135 по 159 включительно. Как видим, это контейнер с id=»contact_form», в котором находится наша форма. Беря за основу этот код, создаем новый чанк form-tpl и добавляем необходимые нам плэйсхолдеры:
Создаем чанк с уведомлением посетителя об отправке сообщения
Создаем чанк thank-tpl и в его содержимое помещаем следующий код:
Создаем чанк с формой отправленного сообщения
Создаем чанк report-tpl и в его содержимое помещаем следующий код:
В этом чанке, как и в предыдущем, вся введенная пользователем информация передается с помощью плейсхолдеров вида [ +author+]. При этом название каждого плейсхолдера совпадает со значением атрибута «name» соответствующего поля в чанке с формой обратной связи (name=»author», name=»email» name=»text»).
Создаем чанк с вызовом формы обратной связи
Создаем чанк с именем form и помещаем туда конструкцию:
Помещаем вызов формы обратной связи в шаблон
Создаем чанк contacty, в который помещаем следующий код:
На странице Контакты помещаем вызов чанка contacty:
Изменяем стили
Находим в файле со стилями описание наших кнопок:
Из-за того, что мы вставили русские надписи к кнопкам Отправить и Сбросить, они сдвинулись. Еще мне не нравится, что при наведении курсора на кнопку, вид курсора не изменяется, я хочу это исправить. За одно, давайте сделаем так, чтобы кнопка меняла цвет при наведении курсора. Ну и сдвинем капчу вправо. Итак, вместо описания стиля, который я привел выше мы вставим вот что:
Если все сделали правильно, форма примет следующий вид:
Теперь пробуем заполнить форму и отправить письмо. Так как мы используем локальный сервер, все поступающие письма можно посмотреть в папке C:\xampp\tmp\sendmail\. Помните, мы создавали эту папку при установке XAMPP?
Можно задать свой список слов для генерации в капче, делается это на странице системной конфигурации Инструменты >> Конфигурация >> Пользователи >> Слова для генерации CAPTCHA-кодов:
На этом интеграция дизайна нашего сайта в MODx полностью завершена. Осталось выложить наш сайт на каком-нибудь хостинге. Этим мы займемся на следующем уроке.
Ajax форма обратной связи для MODX
Становится всё более популярным делать интерактивные сайты используя AJAX технологию. И правда, зачем заставлять пользователя перегружать всю страницу, если есть возможность этого не делать. Особенно это актуально для мобильных устройств.
На многих сайтах используется форма обратной связи для общения с клиентом. Давайте возьмём обычную форму и сделаем её аяксовой.
Для этого нам понадобится дополнение FormIt, AjaxForm и reCaptchaV2 (каптча от Google). Если они у вас еще не установлены, то пора установить и настроить каптчу. Кроме того, я использую стили фреймворка Bootstrap в разметке формы.
Мы будем делать вот такую форму.
Когда пользователь заполнит все поля и нажмёт «Отправить», форма скроется, а вместо неё появится сообщение, что форма успешно отправлена. Тут вариантов может быть несколько — выводить модальное окно или ничего не выводить, так как AjaxForm покажет короткое сообщение об успешной отправке через jGrowl. В данном примере мы будем скрывать форму и показывать блок с сообщением об успешной отправке.
Разместим форму на странице контактов. Вставляем следующий код в нужном месте разметки.
Тут мы видим, что вызывается сниппет FormIt, шаблон формы находится в чанке tpl.AjaxForm.contactForm, используются хуки recaptchav2 (каптча) и email (отправка email), указаны тема сообщения и адрес получателя (тут нужно указать свои), а также условия проверки полей — они все обязательные.
Чанк tpl.AjaxForm.contactForm выглядит так
Но это еще не всё. AjaxForm умеет выводить сообщения об ошибках заполнения формы. Но давайте сделаем их более детальными. Для этого нам нужно добавить на сайт скрипт, который будет обрабатывать информацию от AjaxForm.
После того, как пользователь отправит сообщение, форма исчезнет и появится блок с благодарностью.
Вот теперь всё. Если будут вопросы, задавайте. Еще почитать про FormIt можно тут.
П.С. Обязательно прочтите статью Безопасный FormIt.
23 декабря 2015, 12:50 0 34656
Комментарии ( )
Большое спасибо за запись. Именно то, что давно искал. За JS все никак не могу полноценно взяться (.
У меня такой вопрос. А если форм на странице больше одной? То нужно для каждой отдельный скрипт обработки написать, заменив название полей и классы\идентификаторы? Объединить код не получится?