Modx надсилання форми на пошту. Форма зворотний зв'язок MODX revo. Створюємо чанк із повідомленням відвідувача про відправлення повідомлення
У мене вже є кілька уроків щодо створення форм на 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=``]]Розбір коду, йдемо зверху донизу:
&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 3.0 встановлює оновлення для обчислення методів, використовуваних для обчислення форми submissions. Приблизно до 3.0 mcrypt був використаний, які в 3.0 is replaced with openssl, тому що mcrypt був виявлений як PHP 7.2. FormIt 3.0 використовується з migration page which is accessible from the manager.
Як FormIt 2.2.9, всі поля будуть автоматично мати html_entities applied. Для того, щоб зробити HTML tags для збереження/завантаженості, ви повинні використовувати для використанняспеціальних Chars validator на всіх областях, які повинні зберігати кілька html tags.
Як FormIt 1.1.4, всі поля будуть автоматично мати stripTags applied. Для того, щоб зробити HTML tags для збереження/завантаженості, ви повинні використовувати для застосування Tags validator на всіх сферах, стипендія яких tags є схвалена.
How to Use
Simply place the FormIt snippet call вРеsource , що міститься у формі, яку ви хочете використовувати. Незважаючи на подібні predecessors (більш неповторно eForm в MODX Evolution), ви не можете почати форму в Chunk і повідомити Chunk в FormIt snippet call: ви literally почати snippet call вниз до форми, що ви хочете, щоб процес. Specify the "hooks" (або post-validation processing scripts) в snippet call. Then add validation via the &validate and &customValidatorsпараметри в сниппет tag.
Якщо ви маєте багато форм на сторінці, встановіть &submitVar property on your Snippet call to name of form element within the form (ie, &submitVar=`form1-submit`). Це tells FormIt до лише процесу form requests with that POST variable. Multiple forms повинні бути використані з INPUT type="submit" name="form1-submit", але елементи повинні бути reported not working.
Available Properties
Вони є наявними загальними властивостями для FormIt call (не включають hook-specific properties):
| Name | Description | Default Value |
|---|---|---|
| preHooks | Що scripts to fire, if any, once form loads. Це може бути comma-separated list of hooks , і якщо перші незгоди, процедури, які не будуть. A hook може також бути Snippet name that will execute that Snippet. | |
| renderHooks | What scripts to fire, if any, once form loads, preHooks є finished and all fields & errors has been set. Це може бути comma-separated List, використовуваний для керування всіма сферами форми, що все, що є основою, що базується на виконаних даних з інших пакетів або preHooks. A hook може також бути Snippet name that will execute that Snippet. | |
| hooks | What scripts to fire, if any, після form passes validation. Це може бути comma-separated list of , and if first fails, the proceeding ones will not fire. A hook може також бути Snippet name that will execute that Snippet. | |
| submitVar | Якщо вибрати, не слід виконувати процес, якщо цей параметр POST не є пропущеним. Notice: Потрібно, якщо ви використовуєте &store property (+ set submit var in input="submit"!). | |
| validate | Натиснувши окремий аркуш повідомлень про validate, з кожним field name є name:validator (eg: username:required,email:required). Validators може бути chained, як email:email:required . Це може бути specified on multiple lines. | |
| validationErrorMessage | Загальна помилка message to set to a placeholder [[!+fi.validation_error_message]] if validation fails. Can contain [[+errors]] if you want to display a list of all errors at the top. | A form validation error відбулася. Please check the values you have entered. |
| validationErrorBulkTpl | HTML tpl that is used for each individual error in the generic validation error message value. | [[+error]] |
| errTpl | Завантажити html для error messages. Note: no a chunk, just straight HTML. | [[+error]] |
| customValidators | На comma-separated list of custom validator names (snippets) ви плануєте використовувати в цій формі. Вони повинні бути explicitly stated here, або вони будуть не run. | |
| clearFieldsOnSuccess | Якщо вірно, буде очищення полів на успішній формі прослуховування, що не є реdirect. | 1 |
| store | Якщо вірно, буде зберігати ваші дані в файлі для записування використовуючи FormItRetriever snippet. | 0 |
| storeTime | Якщо "store" is set to true, this specifies the number of seconds to store the data from the form submission. Defaults to five minutes. | 300 |
| storeLocation | Коли ви використовуєте магазин, це defines where the form is stored after submit. Можливі варіанти є "cache" і "session". Defaults to "cache". | cache |
| placeholderPrefix | Визначення для використання на всіх місцях, що вибираються з FormIt for fields. Make sure to include the "." separator in your prefix. | fi. |
| successMessage | Якщо ви не використовуєте рерективний удар, відтворення цього результату повідомлення після успішного повідомлення. | |
| successMessagePlaceholder | Ім'я місця placeholder to set the success message to. | fi.successMessage |
| redirectTo | page ID з "Thank You" page, де visitor може бути після успішного проміжку форми, але цей параметр є read Only if you include "redirect" in the list of &hooks. | |
| allowFiles | Specify if files allowed to be posted. Поміщені файли є зареєстрованими в періодичній директорії до попереднього файлів, щоб отримати короткі форми в multistep. | true |
| attachFilesToEmail | Примітка uploaded files в електронній пошті, форма потребує set enctype="multipart/form-data" | true |
Validation
Зміна в FormIt is done via the &validate property, and can be used to automatically handle validation on any of the fields in your form.
For more information on validation in FormIt, see the
Урок, у якому розглянемо створення форми зворотнього зв'язку CMF MODX Revolution, використовуючи компоненти 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-код:
Створення коду, що містить виклик сніпету 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 - Форма зворотного зв'язку, що не пройшла валідацію 
Практично на всіх комерційних сайтах є сторінка контактів, на яких розташована контактна форма, через яку користувачі можуть написати адміністрації сайту. Сьогодні ми розглянемо як швидко створити контактну форму. Реалізовувати форму зворотного зв'язку ми будемо за допомогою пакету Formitу зв'язці з пакетом AjaxForm, встановіть їх, якщо вони у вас не встановлені.
Створення форми зворотного зв'язку на MODX Revo з дозволом на обробку персональних даних відповідно до закону №152-ФЗ "Про персональні дані" від 27.07.2006.
Насамперед створюємо чанк, в якому буде зберігатися сама форма, нехай це буде чанк «kontact-form» і поміщаємо в нього код стандартної форми, я в основному роблю сайти з використанням bootstrap, так що візьму стандартну заготівлю трохи перероблену, її статичний код буде таким:
Ваш зовнішній виглядбуде відрізнятися, оскільки моя форма стилізована під проект, css стилівикладати не бачу сенсу.
Ось тут ви можете переглянути інші форми getbootstrap.com/css/#forms
А тепер переробимо код у динамічний з урахуванням синтаксису. Formitі AjaxForm, Отримаємо наступне.
Тепер створюємо ще один чанк, який формуватиме лист, назвемо його 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на свою пошту.
Документація по компонентам:
- FormIt — docs.modx.com/extras/revo/formit
- AjaxForm — docs.modx.pro/components/ajaxform
Ось у принципі і все!
