Форма зворотний зв'язок modx evo стилі. Форми зворотний зв'язок за допомогою FormIt. Перенаправлення на сторінку успішного виконання

Зворотній зв'язок

[+validationmessage+]

Ваше ім'я

Email: електронної пошти:email:1" />

Тема повідомлення

Запит інформації
Технічна підтримка
Пропозиція

Текст повідомлення

Введіть цей код:

Де [+validationmessage+]- відповідає за виведення повідомлень про помилку заповнення під час надсилання форми.
action="[~[*id*]~]- вказує, що обробником форми буде та сторінка, де викликаний сниппет. Замість [~[*id*]~] MODx підставить URL поточного документа.
вказує ідентифікатор форми, який ми вкажемо під час виклику сніпета.
label accesskey- Встановлює доступ до елементів форми за допомогою гарячих кнопок.
eform="Адреса електронної пошти:email:1"- описує поле для введення поштової адреси, вказує тип даних і робить це поле обов'язковим для заповнення. Взагалі, шаблон для заповнення цього параметра наступний: eform="[опис поля]:[тип даних, що вводяться]:[чи обов'язкове поле]:[повідомлення про помилку введення]:[правило перевірки введення]" . Але нам достатньо лише трьох значень. Аналогічно до цього параметра заповнюється eform="Ім'я::1".
[+verimageurl+]відповідає за виведення капчі.

Створюємо чанк із повідомленням відвідувача про відправлення повідомлення

Створюємо чанк thank-tpl

Дякую, що скористалися формою зворотного зв'язку на нашому сайті.

Ваше повідомлення буде розглянуто в найкоротший термін, і, якщо воно вимагає відповіді, Ви обов'язково отримаєте його.

Відправлена ​​інформація:

• Ваше ім'я:[+author+]


• Ваш e-mail:[+email+]


• Текст повідомлення:[+text+]

Створюємо чанк з формою надісланого повідомлення

Створюємо чанк report-tplі в його вміст розміщуємо наступний код:

Це повідомлення надіслано відвідувачем на ім'я [+author+] за допомогою форми зворотного зв'язку.

Ім'я:	[+author+]
Email::	[+email+]
Повідомлення:	[+text+]

У цьому чанці, як і попередньому, вся введена користувачем інформація передається з допомогою плейсхолдерів виду [+author+]. При цьому назва кожного плейсхолдера збігається зі значенням атрибуту "name" відповідного поля в чанці із формою зворотного зв'язку (name="author", name="email", name="text").

Створюємо чанк із викликом форми зворотного зв'язку

Створюємо чанк з ім'ям formі розміщуємо туди конструкцію:

[! eForm? &formid=`Send` &tpl=`form-tpl` &to=` [email protected],[email protected],[email protected]` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Повідомлення з мого сайту`!]

Де &formid=`Send`- ідентифікатор форми, який ми вказували у чанці form-tpl
&tpl=`form-tpl`- шаблон для форми зворотнього зв'язку
&to=` [email protected],[email protected],[email protected]` - адреса Email для надсилання інформації
&mailselector=`otdel`- встановлює поле форми, яке використовуватиметься при виборі єдиної адреси зі списку адрес розділених комою (,) у параметрі &to. У нашому випадку це список, що випадає у чанці form-tpl, де otdelприймає значення 1,2 чи 3, залежно від обраної відвідувачем теми.
&report=`report-tpl`- шаблон інформації, що відправляється
&thankyou=`thank-tpl`- повідомлення, що виводиться після відправки даних
&vericode=`1`- Включає код перевірки. Шаблон повинен містити поле для перевірки та плейсхолдер [+vericode+].
&subject=`Повідомлення з мого сайту`- тема повідомлення, що надсилається

Поміщаємо виклик форми зворотного зв'язку у шаблон

Створюємо чанк contacty, в який розміщуємо наступний код:

Наш Адреса

ХХХХХХХХХХХХХХХХХХХХХХХХХ

ХХХХХХХХХХХХХХХХХХХХХХХХХ

ХХХХХХХХХХХХХХХХХХХХХХХХХ



Email: хххххх@хххххх.ххх

Додатковий офіс

ХХХХХХХХХХХХХХХХХХХХХХХХХ

ХХХХХХХХХХХХХХХХХХХХХХХХХ

ХХХХХХХХХХХХХХХХХХХХХХХХХ



Email: хххххх@хххххх.ххх

((Form))

На сторінці Контакти розміщуємо виклик чанка contacty:

((contacty))

Змінюємо стилі

Знаходимо у файлі зі стилями опис наших кнопок:

margin-left: 108px;
padding: 5px 10px;
background: #cecece;
border: 1px solid #888888;
}

Через те, що ми вставили російські написи до кнопок Надіслати та Скинути, вони зрушили. Ще мені не подобається, що при наведенні курсору на кнопку вид курсору не змінюється, я хочу це виправити. За одне, давайте зробимо так, щоб кнопка змінювала колір при наведенні курсору. Ну і зрушимо капчу вправо. Отже, замість опису стилю, який я навів вище, ми вставимо ось що:

#contact_form form .submit_btn (
margin-left: 55px; /*Змінюємо лівий відступ у кнопок*/
padding: 5px 10px;
background: #cecece;
border: 1px solid #888888;
}
#contact_form form .submit_btn:hover (
margin-left: 55px;
padding: 5px 10px;
background: #505050; /*Вказуємо колір кнопки при наведенні курсору*/
border: 1px solid #888888;
color: #fff; /*Міняємо колір тексту*/
cursor: pointer; /*Змінюємо вигляд курсору*/
}
#contact_form form img (
padding: 0 0 0 90px; /*Зрушуємо вправо картинку з кодом*/
}

Якщо все зробили правильно, форма набуде наступного вигляду:

Тепер пробуємо заповнити форму та надіслати листа. Тому що ми використовуємо локальний сервер, всі листи, що надходять, можна подивитися в папці C:\xampp\tmp\sendmail\ . Пам'ятаєте, ми створювали цю папку під час встановлення XAMPP?

Можна встановити свій список слів для генерації в капчі, робиться це на сторінці системної конфігурації Інструменти >> Конфігурація >> Користувачі >> Слова для створення CAPTCHA-кодів :

На цьому інтеграція дизайну нашого сайту MODX повністю завершена. Залишилося викласти наш сайт на якомусь хостингу. Цим ми займемося на наступному уроці.

При створенні цього уроку використані матеріали із сайту

У мене вже є кілька уроків щодо створення форм на FormIt у зв'язці з - у цієї зв'язки є як плюси: відправка форм без перезавантаження, є вікно, що випливає, що повідомлення відправлено і т.д. Ну і відповідно мінуси: код додається js і css файл- що дає мінус до швидкості і у виведенні js не потрібний тип у виклику, через нього у валідаторе з'являється попередження - у html 5 його вказувати не потрібно.

Тому я вирішив робити форми на чистому FormIt, саме про це сьогодні і урок.

HTML розмітка форми зараз має наступний код:

Не чого особливого, так би мовити стандарт з розміткою від bootstrap 4. Переробимо її з урахуванням синтаксису і за одне повикидаємо зайве, русифікуємо, додамо захист від спаму:

[[!FormIt? &hooks=`spam,email` &emailTpl=`email-tpl` &emailTo=`[[++emailsender]]` &emailSubject=`Лист із сайту [[++site_url]]` &validate=`workemail:blank,name:required, email:email:required,message:required:stripTags,phone:required` &successMessage=`

Дякую, Ваше звернення надіслано.

` ]] [[!+fi.successMessage:default=``]]

Ваше ім'я*: [[!+fi.error.name]]

Ваш телефон*: [[!+fi.error.phone]]

Ваш Email*: [[!+fi.error.email]]

Повідомлення: [[!+fi.error.message]]

Відправити

Розбір коду, йдемо зверху донизу:

&hooks - сюди додаються різні хуки, у тому числі самописні: у нашому випадку 2 стандартних: span - простий захист від спаму та email - обов'язковий, для відправки даних на Поштова скринька. Про решту хуків я досить докладно розповідаю у відео.

&emailTpl - чанк з оформленням листа, має наступний код:

Від кого: [[+name]]

Телефон: [[+phone]]

E-mail: [[+email]]

Повідомлення: [[+message]]

&emailTo — адреса електронної пошти куди надсилаються форми, даному випадкувказано системне налаштування(ключ) ++emailsender

&emailSubject — тема листа, що надсилається

&validate - прописуємо обов'язкові поля для заповнення і часто поля для захисту від спаму

&successMessage — повідомлення після успішного надсилання

Розбирати код форми не буду, кому цікаво дивіться відео та читайте документацію: docs.modx.com/extras/revo/formit

Прикріплення файлів до форми

Для того, щоб була можливість прикріплювати та відправляти вкладення, необхідно в тег форми прописати

Enctype="multipart/form-data"

і відповідно додати поля для прикріплення файлу

Обробка чекбоксів та option

Декілька форм на одній сторінці

Просто у викликах кожної форми пропишіть

&submitVar=`ім'я форми англійською`

кожна форма має своє ім'я.

Боротьба зі спамом

Як не крути, але ви однозначно зіштовхнетеся зі спамом - самий ефективний спосібдля боротьби з ним - так само можете спробувати.

Практично на всіх комерційних сайтах є сторінка контактів, на яких розташована контактна форма, через яку користувачі можуть написати адміністрації сайту. Сьогодні ми розглянемо як швидко створити контактну форму. Реалізовувати форму зворотного зв'язку ми будемо за допомогою пакету Formitу зв'язці з пакетом AjaxForm, встановіть їх, якщо вони у вас не встановлені.

Створення форми зворотного зв'язку на MODX Revo з дозволом на обробку персональних даних відповідно до закону №152-ФЗ "Про персональні дані" від 27.07.2006.

Насамперед створюємо чанк, в якому буде зберігатися сама форма, нехай це буде чанк «kontact-form» і поміщаємо в нього код стандартної форми, я в основному роблю сайти з використанням bootstrap, так що візьму стандартну заготівлю трохи перероблену, її статичний код буде таким:

Згодний на обробку персональних даних

Користувальницької угоди

Відправити

Ваш зовнішній виглядбуде відрізнятися, оскільки моя форма стилізована під проект, css стилівикладати не бачу сенсу.

Ось тут ви можете переглянути інші форми getbootstrap.com/css/#forms

А тепер переробимо код у динамічний з урахуванням синтаксису. Formitі AjaxForm, Отримаємо наступне.

[[+fi.error.name]]

[[+fi.error.email]]

[[+fi.error.pfone]]

[[+fi.error.message]]

Згодний на обробку персональних даних
[[+fi.error.opd]]

Ставлячи відмітку, я даю свою згоду на обробку моїх персональних даних відповідно до закону №152-ФЗ «Про персональні дані» від 27.07.2006 та приймаю умови Угоди користувача

Відправити[[+fi.success:is=`1`:then=`

[[+fi.successMessage]]

`]] [[+fi.validation_error:is=`1`:then=`

[[+fi.validation_error_message]]

`]]

Тепер створюємо ще один чанк, який формуватиме лист, назвемо його tpl-kontact-form з таким вмістом:

Ім'я: [[+name]]

Email: [[+email]]

Телефон: [[+pfone]]

Повідомлення: [[+message]]

Ну і сталося зробити висновок у потрібному місці:

[[! AjaxForm? &snippet=`FormIt` &form=`kontact-form` &emailTpl=`tpl-kontact-form` &hooks=`spam,email` &emailSubject=`Повідомлення з сайту [[++site_url]]` &emailTo=` [email protected]` &validate=`name:required,email:required` &validationErrorMessage=`У формі містяться помилки!` &successMessage=`Повідомлення успішно надіслано!` ]]

Не забудьте змінити значення emailToна свою пошту.

Документація по компонентам:

1. FormIt — docs.modx.com/extras/revo/formit
2. AjaxForm — docs.modx.pro/components/ajaxform

Ось у принципі і все!

Урок, на якому розглянемо створення форми зворотного зв'язку в CMF MODX Revo lution, використовуючи компоненти AjaxForm та FormIt.

Призначення компонентів FormIt та AjaxForm

FormIt – це компонент (СНІПЕТ) для MODX Revolution, призначений для обробки форми на стороні сервера. Він може здійснювати перевірку полів форми (валідацію) перед подальшими діями, захищати сайт від отримання спаму, відправляти дані форми на пошту, зберігати копії заповнених форм, здійснювати редирект на іншу сторінку (наприклад, після успішного відправлення форми на email), виконувати функцію автовідповідача та багато іншого.

Але для того, щоб працювати з FormIt через AJAX необхідно використовувати додатковий компонент AjaxForm.

Принцип роботи форми зворотного зв'язку

Перед тим як перейти до розробки форми зворотного зв'язку MODX Revolution, розглянемо основний алгоритм її роботи.

Після відкриття деякої сторінки з формою (вона береться з чанка, вказаного у параметрі &form виклику сніпету AjaxForm при формуванні сторінки на сервері), користувач переходить до її заповнення. Завершивши заповнення, користувач натискає на кнопку "Надіслати" і компонент AjaxForm ( код JavaScript) відправляє її на сервер за допомогою AJAX. На сервері даний компонент запускає сніпет FormIt і передає йому дані форми. Обробивши ці дані, Сніппет FormIt формує відповідь, яка через компонент AjaxForm передається клієнту і відображається на сторінці користувача. Відповідь може бути позитивною (це означає, що форма пройшла валідацію і, наприклад, дані були успішно відправлені на пошту) або негативною (наприклад, при заповненні форми користувач припустився деяких помилок).

Створення форми зворотнього зв'язку

Для створення форми зворотного зв'язку в MODX Revolution необхідно виконати такі основні кроки:

Розглянемо кроки 2 і 4 докладніше.

Створення HTML форми у чанці

Створення HTML форми зворотнього зв'язку можна здійснити за допомогою копіювання заготовки tpl.AjaxForm.example. Наприклад, надамо скопійованому чанку ім'я tpl.AjaxForm . Цей чанк вже містить готову HTML-форму, що складається з 3 полів: Ім'я, E-mail та Повідомлення. Основні дії, які треба робити з формою, в основному будуть зводитися до додавання нових категорій або до видалення існуючих. Під категорією розумітимемо групу пов'язаних між собою елементів: мітка (label), елемент форми (input , select , textarea) та елемент span (використовується для відображення помилки валідації).

Основні моменти:

• Текст етикетці (елемента label). Зазвичай береться або зі словника (для багатомовних сайтів) або безпосередньо за допомогою тексту.
• Елемент span повинен мати атрибут class зі значенням error_name , в якому фразу name необхідно змінити на значення атрибута name елемента форми, за яким він розташований.

Увага: використання плейсхолдера [[+fi.name]] як значення атрибуту value елемента форми та плейсхолдера [[+fi.error.name]] як контент елемента span актуальне тільки для класичної роботи з FormIt , тобто. без AJAX. Вони використовуються для заповнення форми при її повторному надсиланні для того, щоб зберегти значення введені користувачем і відобразити помилки валідації.

Наприклад, додамо в HTML формуполе для введення телефонного номера:

У результаті цей чанк міститиме наступний HTML-код:

Ім'я*

E-mail*

Телефон

Повідомлення*

Очистити Відправити

Створення коду, що містить виклик сніпету AjaxForm

Відкриваємо шаблон, який використовуватиме ресурс і вводимо код, який здійснюватиме все це.

[[! AjaxForm? &form=`tpl.AjaxForm` &snippet=`FormIt` &hooks=`FormItSaveForm,email` &emailSubject=`Тестове повідомлення` &emailTo=` [email protected]`&emailFrom=` [email protected]` &emailTpl=`tpl.email` &validate=`name:minLength=^2^,email:email:required,message:minLength=^10^` &validationErrorMessage=`У формі містяться помилки!` &successMessage=`Повідомлення успішно надіслано` ] ]

Розберемо основні параметри:

• &form - відповідає за чанк, що містить форму (tpl.AjaxForm).
• &snippet - сніпет, що обробляє форму (FormIt).
• &hooks – хуки, які виконуватиме сніпет FormIt після успішної перевірки форми (1 - FormItSaveForm, 2 - email). Хуки - це скрипти, які запускаються після того, як форма пройшла валідацію (перевірку). Вони вказуються через кому і послідовно запускаються один за одним. Якщо в одному з них сталася помилка, то решта не запускається. У цьому уроці будемо використовувати 2 хуки. Хук FormItSaveForm призначений для збереження форми у базі даних. Хук email призначений для надсилання даних форми на пошту.
• &emailSubject, &emailTo, &emailFrom, &emailTpl – параметри, значення яких використовує хук email. Вони призначені для вказівки теми листа (&emailSubject), адреси відправки (&emailTo), заголовка From (&emailFrom), шаблону листа (&emailTpl).
• &validate – параметр, виходячи з значення якого здійснюється валідація форми. Значення параметра є список елементів, розділених між собою комами. Кожен елемент складається з імені елемента форми (який потрібно перевірити) та правила (вимоги до нього), розділені між собою за допомогою знака двокрапки. Наприклад, валідатор name:minLength=^2^ перевіряє, щоб поле name містило не менше 2 символів. Валідатор email:email:required перевіряє, щоб поле mail містило адресу електронної пошти. З основними правилами створення валідаторів можна познайомитись на сторінці "FormIt Validators".
• &validationErrorMessage - містить повідомлення, яке буде виводитися, якщо у формі містяться помилки.
• &successMessage - повідомлення, яке побачить користувач, якщо повідомлення буде успішно надіслано.

Залишилося лише створити чанк tpl.email, який міститиме шаблон листа.

Повідомлення

Від кого: [[+name]]

E-mail: [[+email]]

Телефон: [[+phone]]

Повідомлення: [[+message]]

MODX - Чанк tpl.email

Увага: Для виведення значень полів форми використовується плейсхолдери.

Демонстрація роботи форми зворотного зв'язку

Основні моменти під час роботи з формою зворотного зв'язку на сторінці продемонструємо за допомогою таких зображень.

MODX - Форма зворотного зв'язку, що не пройшла валідацію