≡× МЕНЮ

• Гаджеты
• Android
• Windows
• Ios
• Блог

Формы обратной связи при помощи FormIt. Как сделать форму обратной связи в ModX Revolution с помощью FormIt Форма для комментариев в modx простая

Добрый день! Сегодня я познакомлю вас с созданием формы обратной связи для Modx Revolution, фишкой которой будет необычная каптча (так как гугловская qaptcha слишком сложная и громоздкая). Делать обратную связь мы будем с помощью дополнения Formit. Установить вы его сможете, наверное, сами, ну а для тех, кто не знает как это сделать я все таки распишу урок от начала до конца. Начинаем!

Пропущу все моменты связанные с установкой MODX Revolution, настройкой системы, встраивание дизайна сайта и так далее. Начнем с установки пакета Formit.

1. Заходим в Система - Управление пакетами

2. Жмем "Загрузить дополнения"

3. Выбираем из списка Formit

Жмем "загрузить". После загрузки Formit у вас появиться в загруженных пакетах, жмем кнопку установить. Formit установлен!

4. Далее создаем новый чанк

Назовем его "form", и вставляем следующий код:

[[!Qaptcha]] [[!FormIt?&hooks=`spam,email,redirect` &emailTpl=`sentEmailTpl` &emailSubject=`Заявка на обратный звонок` &emailTo=`ваш электронный почтовый адрес` &redirectTo=`id страницы "Письмо успешно отправлено"` &validate=`contact_name:required,contact_phone_NA_format:required` &customValidators=`qaptcha.Slider`]] Имя\Компания* Телефон* E-mail [[+qaptcha.Slider]]

Здесь сам вызов сниппета Formit, форма и каптча, которую мы заставим работать в следующих пунктах. Не забываем в параметре emailTo указать почтовый ящик, на которое должно приходить письмо, а в redirectTo нужно поставить id страницы "Письмо успешно отправлено"

5. Создаем чанк sentEmailTpl

Он будет говорить, какую информацию отсылать на почту и вставляем туда код:

Имя: [[+contact_name]]
Email: [[+contact_email]]
Телефон: [[+contact_phone_NA_format]]
Примечание: [[+contact_message]]

6. Создаем новый документ под названием "Письмо успешно отправлено"

В содержимое ресурса можно вставить текст типа: Мы получили ваше письмо! Спасибо за выбор нашей компании. Наш менеджер в кратчайшие сроки свяжется с Вами по контактному телефону, который Вы оставили в заявке!

7. Теперь займемся самой Каптчей

Подключаем на страницу бибилотеку jquery:

8. Создаем каталоги assets/components/qaptcha/ и core/components/qaptcha/

В каталог assets/components/qaptcha/ помещаем папку images и jquery с содержимым, а в core/components/qaptcha/ - папку php с файлом Qaptcha.jquery

9. Создаем сниппет Qaptcha

и поместим туда следующий код: