Как я делаю формы обратной связи. Часть 1. FormIt+Fancybox. Modx модальное окно обратной связи

Как я делаю формы обратной связи. Часть 1. FormIt+Fancybox | Блог

Средняя оценка: Всего голосов: 3

На любом сайте обязательно должна быть форма обратной связи. В этой статье/инструкции я расскажу как делаю такие формы на сайтах клиентов, и как это сделано на моём сайте

Все формы можно разделить на две группы: обычные и всплывающие. В данном материале речь пойдёт о всплывающей форме обратной связи

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

Маска ввода телефона и email
Защита от ботов(каптча)
Авто-ответ клиенту
Сохранение заявок в админке

1. Скачиваем и устанавливаем FormIt и Recaptchav2

Как скачивать и устанавливать дополнения описывать не буду - в интернете есть куча материалов на эту тему.

2.Скачиваем и подключаем maskedinput.js

Этот скрипт дает возможность задавать маску ввода телефона

3. Скачиваем с официального сайта Fancybox

Загружаем Fancybox на сайт и подключаем стили и скрипты:

4. Создаем отдельный шаблон для формы обратной связи

Делаем именно отдельный шаблон с минимальным наполнением для того чтобы в всплывающем окне ничего лишнего не было

5. Создаем два документа и задаем им шаблон созданный в предыдущем шаге

В одном размещаем вызов FormIt.

В другом документе помещаем текст об успешной отправке заявки.

6. Создаем необходимые чанки

6. В нужном месте вставляем вызов всплывающего окна

Готово! Данный код мною был установлен на многих сайтах и является 100% рабочим.

Если возник какой либо вопрос - пишите - помогу)

derzaiii.ru

быстрый просмотр в модальном окне. / modx.pro

QuickView — быстрый просмотр любого элемента в модальном окне.

— работа с любыми ресурсами — работа с чанками, сниппетами, шаблонами — вывод в модальное окно, либо в указанный селектор — поддержка шаблонизатора fenom

Основное отличие от ранних версий работа без каких либо сниппетов, нужно только инициализировать скрипт. Интерактивные примеры тут quickview.vgrish.ru/

Примеры

пример 1

Постановка: — требуется по клику вывести в модальное окно чанк test — задействовать ресурс с идентификатором 1 — добавить кнопку закрыть окно

Вызов:

<a data-click data-quickview-mode="modal" data-data-action="chunk" data-data-element="test" data-data-id="1" data-dialog-buttons='["close"]' >ссылка</a> пример 2

Постановка: — требуется по клику вывести в модальное окно сниппет корзины msCart — требуется широкое модальное окно

Вызов:

<a data-click data-quickview-mode="modal" data-data-action="snippet" data-data-element="!msCart" data-dialog-size="size-wide" data-dialog-title="cart" >корзина</a> пример 3

Постановка: — требуется по клику вывести в модальное окно чанк msProduct.content — задействовать ресурс с идентификатором 7

Вызов:

<a data-click data-quickview-mode="modal" data-data-element="msProduct.content" data-data-id="7" data-dialog-title="" data-dialog-size="size-wide" >продукт</a>

пример 4

Постановка: — требуется по наведению вывести в селектор чанк test — задействовать ресурс с идентификатором 1 — добавить кнопку закрыть окно

Вызов:

<a data-mouseover data-quickview-mode="selector" data-data-action="chunk" data-data-element="test" data-data-id="1" data-quickview-output=".quickview-output-1" data-output-buttons='["close"]' >наведите</a>

пример 5

Постановка: — требуется список продуктов minishop — по клику вывести модалку с продуктом test — задействовать актуальный ресурс — добавить кнопку соседи

Вызов:

<div data-quickview-mode="modal" data-data-action="chunk" data-data-element="product.quickview" data-quickview-loop="true" data-quickview-viewhash="true" data-dialog-size="size-wide" data-dialog-buttons='["prev","next"]'> [[!pdoPage? &parents=`0` &element=`msProducts` &tpl=`@INLINE <a data-click data-data-id="[[+id]]" data-dialog-title="[[+pagetitle]]" >[[+pagetitle]]</a> ` ]] [[!+page.nav]]</div>

пример 6

Постановка: — вывести в модальном окне чанк msProduct.content — задействовать bootstrap-modal, без bootstrap-dialog

Вызов:

<a data-click data-toggle="modal" data-target=".bs-modal" data-quickview-mode="selector" data-quickview-output=".bs-quickview-output" data-data-element="msProduct.content" data-data-id="7" >ссылка</a> Также необходимо тело модалки, куда по клику в селектор будет подгружен результат

Код:

Подключение QuickView

В удобном месте шаблона сайта вам нужно вставить вызов сниппета QuickView.initialize[[!QuickView.initialize? &bootstrapModalJsCss=`0` &bootstrapDialogJsCss=`1` &services=`miniShop2,msoptionsprice` ]] Примечание!

— для подгрузки скриптов и стилей bootstrap-modal нужно указать

&bootstrapModalJsCss=`1` — для подгрузки скриптов и стилей bootstrap-dialog нужно указать&bootstrapDialogJsCss=`1` — для подгрузки скриптов и стилей сторонних пакетов нужно перечислить ихservices=`miniShop2,msoptionsprice`

Настройка QuickView

Основные настройки QuickView находяться Настройки системы -> QuickView

allowed_chunk — список разрешенных чанковallowed_snippet — список разрешенных сниппетовallowed_template — список разрешенных шаблонов

front_css — стили фронтендаfront_js — скрипты фронтенда

Основное

Вы можете использовать QuickView где угодно на странице. Для этого нужно подключить сниппетQuickView.initialize, указать нужным элементам необходимые параметры вызова.

Примечание!

data-quickview-mode — режим работы, modal или selector

data-data-action — действие, chunk, snippet, templatedata-data-element — название элементаdata-data-id — идентификатор обрабатываемого ресурса

data-dialog-* — параметры вывода при модальном окне

data-output-* — параметры вывода при селекторе

Режим срабатывания

data-click режим срабатывания по клику

Вызов:

<a data-click ...</a> data-mouseover режим срабатывания по наведению

Вызов:

Режим работы

data-quickview-modemodal — режим работы с модальным окном

Вызов:

<a data-click data-quickview-mode="modal" ...</a> data-quickview-modeselector — режим работы с селектором

Вызов:

Действия

data-data-actionchunk — работа с чанком

Вызов:

<a data-click data-data-action="chunk" ...</a> data-data-actionsnippet — работа со сниппетом

Вызов:

<a data-click data-data-action="snippet" ...</a> data-data-actiontemplate — работа с шаблоном

Вызов:

Кнопки

data-*-buttons задать необходмые кнопки. Доступны prev,next,close

Вызов:

<a data-click data-dialog-buttons='["prev","next"]' ...</a> кастомизация задать необходимые параметры<a data-mouseover data-quickview-mode="modal" data-data-element="test" data-data-id="1" data-dialog-buttons='[ {"action":"close","label":"закрыть","title":"закрыть"} ]' >наведите</a>

modx.pro

Создание удобной формы авторизации в MODX Revolution с помощью Login

Создадим сегодня вход на сайт с помощью сниппета Login. Для таких целей я обычно использую Loginza, но для моей задачи понадобился именно Login.

Требования к уроку:

В этом уроке я буду использовать Twitter Bootstrap modal JS для всплывающего окна входа, чтобы пользователь не переключался на страницу входа, а потом переходил назад. Итак пропишем в нашем шаблоне пути к необходимым библиотекам.

Если вы установили шаблон Bootstrap, то там уже всё прописано в чанке Head. Модальное окно будет вызывать кнопка "Вход", создадим код кнопки и код модального окна, в которое вставим вызов сниппета Login:

<a data-toggle="modal" href="#myModal">Вход</a> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <button type="button" data-dismiss="modal" aria-hidden="true">x</button> </div> <div> [[!Login?]] </div>Обратите внимание, что сниппет !Login вызывается некешированно!

Кнопка вход запускает модальное окно - контейнер с. Более детально можете рассмотреть настройку модального окна в документации по modal.js внизу поста ссылка. Далее нам хотелось бы, чтобы для вошедшего пользователя модальное окно не всплывало, а была просто кнопка "Выход" и при клике на неё пользователь выходил. Из документации Login получаем код кнопки:

<a href="[[~21? &service=logout]]" title="Logout">Logout</a>× 21 - это ИД ресурса, где находится вызов сниппета Login

При входе пользователь получает user.id с определённым значением, для анонимного пользователя (Anonymouse) данное значение user.id=0. Воспользуемся этим и переделаем код нашей кнопки, используя условные фильтры вывода:

[[!+modx.user.id:is=`0`:then=`<a data-toggle="modal" href="#myModal">Вход</a>`:else=`<a href="[[~21? &service=logout]]">Выход</a>`]]

Вот и все!

uscms.ru