Форма заказа обратного звонка на MODX Revo
Автор Алексей На чтение 6 мин. Опубликовано
Последнее изменение поста: 23 октября 2018 в 23:02
Практически не один современный коммерческий сайт не обходится без формы заказа звонка. Сегодня мы рассмотрим как по быстрому создать форму заказа обратного звонка, ну и заодно рассмотрим как поместить данную форму в модальное окно. Реализовывать форму обратной связи мы будем при помощи пакета Formit в связке с пакетом AjaxForm, установите их если они у вас не установлены.
Создание формы заказа обратного звонка на MODX Revo с разрешением на обработку персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006.
Первым делом создаем чанк, в котором будет хранится сама форма, пусть это будет чанк «obr-zvonok» и помещаем в него код стандартной формы, я в основном делаю сайты с использованием bootstrap, так что возьму стандартную заготовку немного переделанную, ее статический код будет таким:
<form> <div> <input type="text" name="name" required="" placeholder="Ваше имя*" value=""> </div> <div> <input type="text" name="phone" required="" placeholder="Ваш телефон*" value=""> </div> <div> <label> <input type="checkbox" required=""> Согласен на обработку персональных данных </label> </div> <p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="#" rel="nofollow" target="_blank">Пользовательского соглашения</a></p> <div> <input type="submit" value="Жду звонка!"> </div> </form>
Вот здесь вы можете посмотреть другие формы getbootstrap.com/css/#forms
Переделаем его в динамический:
<form method="post"> <div> <input type="text" name="name" required="" placeholder="Ваше имя*" value="[[+fi.name]]"> <span>[[+fi.error.name]]</span> </div> <div> <input type="text" name="phone" required="" placeholder="Ваш телефон*" value="[[+fi.phone]]"> <span>[[+fi.error.phone]]</span> </div> <div> <label> <input type="checkbox" required=""> Согласен на обработку персональных данных <span></span> </label> </div> <p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="[[~48]]" rel="nofollow" target="_blank">Пользовательского соглашения</a></p> <div> <input type="submit" value="Жду звонка!"> [[+fi.success:is=`1`:then=`<div>[[+fi.successMessage]]</div>`]] [[+fi.validation_error:is=`1`:then=`<div>[[+fi.validation_error_message]]</div>`]] </div> </form>
Теперь создаем еще один чанк, который будет формировать письмо, назовем его tpl-obr-zvonok со следующим содержимым:
<h4>Позвоните клиенту, он заказал обратный звонок:</h4> <p>Имя: [[+name]]</p> <p>Телефон: [[+phone]]</p>
Ну и сталось сделать вывод в нужном месте:
[[!AjaxForm? &snippet=`FormIt` &form=`obr-zvonok` &emailTpl=`tpl-obr-zvonok` &hooks=`spam,email` &emailSubject=`Заказ обратного звонка с сайта [[++site_url]]` &emailTo=`[email protected]` &validate=`name:required,phone:required` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Сообщение успешно отправлено!` ]]
Не забудьте заменить email.
Документация по компонентам:
- FormIt — docs.modx.com/extras/revo/formit
- AjaxForm — docs.modx.pro/components/ajaxform
Форма заказа обратного звонка на MODX Revo в модальном окне.
Тут в принципе все просто, за основу берем тот же bootstrap:
<!-- Button trigger modal --> <button type="button" data-toggle="modal" data-target="#myModal"> Заказать звонок </button> <!-- Modal --> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div role="document"> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h5>Modal title</h5> </div> <div> ... </div> <div> <button type="button" data-dismiss="modal">Close</button> <button type="button">Save changes</button> </div> </div> </div> </div>
getbootstrap.com/javascript/#modals
Кнопку выводим в нужном месте:
<button type="button" data-toggle="modal" data-target="#myModal">Заказать звонок </button>
Для модального окна создаем отдельный чанк и помещаем в него код модального окна и вызова самой формы:
<!--noindex--> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div role="document"> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h5>Оставьте Ваши контакты:</h5> </div> <div> <div> [[!AjaxForm? &snippet=`FormIt` &form=`obr-zvonok` &emailTpl=`tpl-obr-zvonok` &hooks=`spam,email` &emailSubject=`Заказ обратного звонка с сайта [[++site_url]]` &emailTo=`[email protected]` &validate=`name:required,phone:required` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Сообщение успешно отправлено!` ]] </div> </div> </div> </div> </div> <!--/noindex-->
Ну и выводим этот чанк ближе к закрытию body.
Вот в принципе и все!
Все о компьютерах — Модальная форма обратной связи в MODx Revolution
Доброго времени суток, дорогой читатель! В этой статье я хотел бы поделиться с Вами опытом в создании формы обратной связи на сайте, используя модальное окно Twitter Bootstrap и HTML5. Для обработки формы я буду использовать сниппет MODx Revolution — FormIt.
Подготовка
Устанавливаем дополнение FomIt и Bootstrap для MODx Revolution. Теперь создадим чанк с текстом письма, которое будет отправляться как уведомление на почту. Назовем его emailChunk
, сохраним его в категории FormIt, чтобы потом было легко его найти, и вставим простой HTML код:
<strong>[[+name]] заказал обратный звонок на сайте:</strong><br />
<p>Пользователь оставил свой номер телефона [[+phone]] для связи с ним.</p>
Последним шагом подготовки будет создание страницы (Вы можете перенаправить пользователя на любую существующую страницу, к примеру на главную), на которую будет перенаправляться пользователь в случае правильного заполнения полей. В содержимое ресурса внесите текст с оповещением пользователя (например, Мы скоро перезвоним Вам!). В конце статьи и покажу пример вызова сниппета без перенаправления.
Создание модального окна и кнопки Twitter Bootstrap
В тело страницы вставляем HTML код кнопки, при нажатии на которую будет выходить модальное окно Twitter Bootstrap:
<button type="button" data-toggle="modal" data-target="#phoneModal" data-whatever="">Заказать звонок</button>
и HTML код модального окна, которое включено в форму:
<form action="[[~[[*id]]]]" method="post" enctype="multipart/form-data" role="form">
<div tabindex="-1" role="dialog" aria-labelledby="phoneModalLabel" aria-hidden="true">
<div>
<div>
<div>
<button type="button" data-dismiss="modal"><span aria-hidden="true">×</span><span>Закрыть</span></button>
<h5>Заказать звонок</h5>
</div>
<div>
<div>
<div><label for="name">Имя [[!+fi.error.name]]</label></div>
<input type="text" name="name" value="[[!+fi.name]]" />
</div>
<div>
<div><label for="phone">Телефон [[!+fi.error.phone]]</label></div>
<input type="tel" name="phone" data-format="+7 (ddd) ddd-dddd" value="[[!+fi.phone]]" pattern="(\+[\d\ \(\)\-]{16})" />
</div>
</div>
<div>
<button type="button" data-dismiss="modal">Закрыть</button>
<input type="submit" name="submit_button" value="Заказать звонок">
</div>
</div>
</div>
</div>
</form>
В этом примере я использовал валидацию номера телефона с помощью Bootstrap Formhelpers Phone (подробнее):
- type=»tel» — указывает хелперу с каким полем работать;
data-format="+7 (ddd) ddd-dddd"
pattern="(\+[\d\ \(\)\-]{16})"
— здесь происходит проверка правила.
В каждом текстовом поле можно указать свойство required. Браузер, использующий HTML5, оповестит пользователя о необходимости заполнить это поле.
<input type="text" name="name" value="" required />
Для удобства, приведенный HTML код модального окна и кнопки его вызова, можно поместить в отдельный чанк.
Вызов сниппета FormIt
Итак, после всех приготовлений, мы дошли до сути статьи. Берем код вызова сниппета и вставляем (Обязательно!) его выше формы:
[[!FormIt? &hooks=`email,redirect` &submitVar=`submit_button` &emailSubject=`Заказ обратного звонка на сайте` &emailTpl=`emailChunk` &emailTo=`[email protected]` &redirectTo=`1` &validate=`name:required,phone:required`]]
А теперь все по порядку:
&hooks=`email,redirect`
— здесь подключаются хуки сниппета. В нашем случае хук «email» отправляет письмо, хук «redirect» перенаправляет на другую страницу. Они начинают свою работу только после успешной обработки формы, т.е. не вывелась ни одна ошибка.&submitVar=`submit_button`
— в нашем случае это свойство не обязательно. Но обязательно, когда вы будете использовать несколько форм на одной странице.&emailSubject=`Заказ обратного звонка на сайте
— заголовок письма.&emailTpl=`emailChunk`
— текст письма. Чанк, который мы создали ранее.&emailTo=`[email protected]`
— электронный почтовый ящик, куда будет отправлять хук «email» все письма с этой формы.&redirectTo=`1`
— ID документа (страницы), куда будет перенаправлять хук «redirect».&validate=`name:required,phone:required`
Проверочный код (captcha)
Если вам понадобится ввод проверочного кода, то здесь поможет recaptcha от Google. Заходим, регистрируемся, вводим доменное имя и получаем публичный и секретный ключи.
Заходим в настройки системы, в фильтре выбираем «formit» и в поле formit.recaptcha_private_key
вставляем секретный ключ, а в поле formit.recaptcha_public_key
— публичный ключ.
После идем к вызову сниппета и добавляем через запятую хук «recaptcha» в лист &hooks=`email,redirect,recaptcha`
.
Теперь подправим HTML код формы с модальным окном, в него нужно будет добавить вызов параметров сниппета:
[[+formit.recaptcha_html]]
[[!+fi.error.recaptcha]]
Первый поместит область с проверочным кодом в тело окна, второй — выведет ошибки, если они будут.
Обработка формы без перенаправления
Если Вы хотите, чтобы пользователь оставался на этой же странице, удалите из списка хуков хук «redirect» и удалите свойство &redirectTo
. В замен установите свойство &successMessage
, в котором должен содержаться текст. В тело документа (страницы) поместите параметр [[!+fi.successMessage]]
На этом моя статья заканчивает, надеюсь она помогла Вам. До новых встреч!
Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.
быстрый просмотр в модальном окне. / Русскоязычное сообщество MODX
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>
Также необходимо тело модалки, куда по клику в селектор будет подгружен результат
Код:
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
Подключение 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, template
data-data-element — название элемента
data-data-id — идентификатор обрабатываемого ресурса
data-dialog-* — параметры вывода при модальном окне
data-output-* — параметры вывода при селекторе
Режим срабатывания
data-click
режим срабатывания по клику
Вызов:
<a
data-click
...</a>
data-mouseoverрежим срабатывания по наведению
Вызов:
<a
data-mouseover
...</a>
Режим работы
data-quickview-mode
modal — режим работы с модальным окном
Вызов:
<a
data-click
data-quickview-mode="modal"
...</a>
data-quickview-modeselector — режим работы с селектором
Вызов:
<a
data-click
data-quickview-mode="selector"
...</a>
Действия
data-data-action
chunk — работа с чанком
Вызов:
<a
data-click
data-data-action="chunk"
...</a>
data-data-actionsnippet — работа со сниппетом
Вызов:
<a
data-click
data-data-action="snippet"
...</a>
data-data-actiontemplate — работа с шаблоном
Вызов:
<a
data-click
data-data-action="template"
...</a>
Кнопки
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>
Меняем вид всплывающих сообщений Ajaxform (Modx Revo)
Автор Алексей На чтение 2 мин. Опубликовано
По умолчанию, после успешной отправки формы Ajaxform выводит небольшое выплывающее окошко в правом углу с сообщение об успешной отправке, которое не все посетители замечают, отсюда могут заполнить форму несколько раз, да и внешний вид оповещения немного премитивный и зачастую возникает необходимость изменить его под стилистику сайта, да поменять его положение.
Изменение стилей и положения всплывающего окна Ajaxform
AjaxForm для стилизации окон использует стили jGrowl, которые лежат в assets/components/ajaxform/css/lib/jquery.jgrowl.min.css, можно поправить все прямо там, но если вы обновите компонент, то и стили ваши обновятся на дефолтные, следовательно их лучше предопределить в своем css.
к примеру положение окна по дефолту заданно вот таким стилем
.jGrowl.top-right { top:0; right:0; }
те прижато к верху и правой стороне
чтобы сменить положение, к примеру по центру, достаточно предопредилить их в своем css, к примеру так:
.jGrowl.top-right { top:40% !important; width:30% !important; left:35% !important; }
И точно таким же образом можно изменить весь внешний вид окошко с уведомлением, вот мой конечный код для одного из сайтов:
#jGrowl { font-size:18px; margin:0px 12px 0; } .jGrowl.top-right { left:35% !important; top:35% !important; } #jGrowl .jGrowl-notification { position: relative; width: 320px; padding: 15px; text-align:center; background: none repeat 0 0 #fff !important; box-shadow: 0 0 0 7px #8ab933 !important; border: 0px solid rgba(255, 255, 255, 0.49) !important; } #jGrowl .jGrowl-notification .jGrowl-close { position: absolute; right: 4px; top: 4px; color: #8ab933 !important; } #jGrowl .jGrowl-notification .jGrowl-message { color:#8ab933 !important; }
в итоге всплывает вот такое окошко по центру сайт.