Modx revo formit параметри. Форма зворотного зв'язку на MODX Revo за допомогою Formit із незвичайною каптчею. Що таке FormIt
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
У нас залишилася лише одна сторінка, яку ми ще не переробили. Це сторінка Контакти. Тут у нас крім контактної інформаціїбуде розташована форма зворотнього зв'язку. У MODx існує спеціальний сніпет для створення такої форми - eForm. Давайте спочатку розглянемо, з чого взагалі може складатися форма зворотного зв'язку.
1. Насамперед, це сама форма з полями введення Ім'я, Поштової адреси, Теми повідомленняі самого Повідомлення. Для захисту від спаму слід додати капчу - форму для введення коду зі згенерованого зображення. Потрібно ще включити перевірку правильності введення інформації.
2. Повідомлення відвідувача про надсилання повідомлення.
3. Форма надісланого повідомлення, яке прийде на пошту.
Створюємо чанк із шаблоном форми зворотного зв'язку
Перш ніж створювати чанк із шаблоном для форми зворотного зв'язку, давайте вивчимо код, яким описується ця форма у нашому шаблоні. Відкриваємо в Notepad++ файл contact.htmlякий лежить у папці C:/xampp/htdocs/site/www/assets/templates/templatemo_250_chess/. Це будуть рядки зі 135 по 159 включно. Як бачимо, це контейнер з id="contact_form", В якому знаходиться наша форма. Беручи за основу цей код, створюємо новий чанк form-tplі додаємо необхідні нам плейсхолдери:
Зворотній зв'язок
[+validationmessage+]
Створення коду, що містить виклик сніпету 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
Ось у принципі і все!