06-08-2014 22:30:00 3886 Comments ollserg & MaxWeb for you
Прочень швидко створюємо форму зворотного зв'язку на сайті під керуванням CMF MODX revo використовуючи пакетFormIt.
Процес установки пакетів на MODX revo детально описувати в цьому пості не буду з причини його простоти і великої кількості матеріалу на цю тему в інтернеті. Нагадаю лише послідовність дій:
<Система> - <Управление пакетами> - <Загрузить дополнения> - <Поиск>(Вводимо - FormIt) 
Нажімаем<Загрузить>, а потім<Установить>
Далеї створимо новий чанк і назвемо його
Зоздаем чанк sendEmailTpl Він описує яку інформацію відсилати на пошту і вставляємо туди код:
Від кого:
Телефон:
Повідомлення:
тут:
- Ім'я відправника
- телефон відправника
- електронна пошта відправника
- повідомлення, написане відправником на сайті
Далеї створимо сторінку з повідомленням про успішну відправку і вдячністю за те, що користувач відправив повідомлення через форму зворотного зв'язку.
наприклад:
Дякуємо Вам за відправку листа!
Ваш лист успішно надіслано.
Наш фахівець відповість Вам найближчим часом.
На цю сторінку налаштуємо редирект по її ID. 
Чи не забуваємо змінити значення параметра & redirectTo \u003d `178` в місці виклику сниппета FormIt (в коді чанка
відповісти
ollserg replied on пт, 17/04/2015 - 11:07
ЦЕЙ КОД ФОРМИ ЗВОРОТНОГО ЗВ'ЯЗКУ НЕ МОЖЕ ПРАЦЮВАТИ!
Це не адаптація! Ви видалили весь функціонал! Перечитайте уважно статтю і розберетеся.
Тут я докладно все розписав, але якщо все ж таки не вийде, то можете звернутися через форму "замовлення" на цьому сайті.
відповісти
Денис replied on пн, 20/04/2015 - 17:56
FORMIT спливаюче вікно
Спасибі! розібрався!
А є у вас урок як зробити, щоб при натисканні кнопки "відправити", повідомлення про іспешной відправки з'являлося в спливающем вікні, а не на новій сторінці?
відповісти
ollserg replied on чт, 23/04/2015 - 14:56
модальне вікно
Використовуйте на своєму сайті як спливаюче. Методів реалізації багато, один приклад:
Відкрити вікно 1 
Тут ви можете розмістити будь-який текст, картинки або відео!
Ну і CSS для цього коду.
відповісти
Олексій replied on вс, 31/05/2015 - 16:09
модальне вікно
потрібно прописати в html шаблоні, але значення # win1 то йому невідомо? Його десь потрібно задати?
Спасибі.
відповісти
Олексій replied on вс, 31/05/2015 - 16:17
модальне вікно
Уточніть будь ласка, а параметр # win1 де в чанка form потрібно прописати, щоб в шаблоні html посилання розуміла що саме потрібно викликати? Може бути я щось не зрозумів, але рядок
потрібно прописати в html шаблоні, але значення win1 то йому невідомо? Його десь потрібно задати?
З modx знаком тільки 3 дні, будь ласка, як і все вищеописане, по простому поясніть.
Спасибі.
відповісти
ollserg replied on пн, 01/06/2015 - 12:28
HTML КОД модальності ВІКНА
Привіт, Гість!
відповісти
Алекс replied on вт, 07/07/2015 - 10:18
НЕМАЄ ЛИСТА
Ваш спрацював, лист прийшов.
поміняв поля на ті які потрібні ме і на жаль, лист перестало приходити.
ось код
відповісти
ollserg replied on ср, 08/07/2015 - 13:09
В! FORMIT? ОПИШІТЬ TEXT І EMAIL
В! FormIt? потрібно опис типу - & validate \u003d `email: email: required, text: required: stripTags`
відповісти
Віктор replied on пн, 19/10/2015 - 14:03
ТЕМА ПОВІДОМЛЕННЯ В ФОРМІ ЗВОРОТНОГО ЗВ'ЯЗКУ FORMIT
Доброго часу доби.
Використовую "& emailSubject \u003d` Лист з сайту https: // сайт / "- лист не відправляється, форма повертається в стан буд-то помилка в поле.
.
Зрозуміло, що воно не розуміє кириличної кодування, але де шукати?
Підкажіть будь ласка, в чому м.б. причина.
Спасибі.
відповісти
ollserg replied on вт, 20/10/2015 - 22:47
ВЕРСІЇ APACHE І PHP
Перше на що думаю слід звернути увагу в Вашому випадку це - версії Apache і PHP на вашому сервері.
відповісти
AlexP replied on чт, 29/10/2015 - 14:15
PLACEHOLDER
Урізається placeholder ..
Хотілося зробити всередині імпута "Ваше ім'я" і стилізувати css Але чому то ріжеться код після value \u003d "" placeholder \u003d "(! LANG: Ваше ім'я" - обрезается!}
спасибі
відповісти
ollserg replied on чт, 29/10/2015 - 20:01
ВСЕ CSS підключенням перевірте
Обрізка "placeholder" відбувається саме через верстки
відповісти
Роман replied on пт, 27/11/2015 - 13:43
FORMIT І ПРОБЛЕМИ
Є великий мінус у Fornit або документації до нього. Ось у мене є гарне спливаюче вікно зворотного зв'язку, але воно не створено окремим документом, а випливає за допомогою jquery! Так ось Formit з нею не працює .. І як налаштувати, я ніяк не зрозумію! Може бути ви зустрічалися з чимось подібним.
відповісти
ollserg replied on вт, 01/12/2015 - 23:23
AJAXFORM ВИКОРИСТОВУВАТИ ДЛЯ POPUP ЗВОРОТНОГО ЗВ'ЯЗКУ
FormIt з коробки ajax творити не вміє ... До нього тобто FormIt треба писати надбудову ... або AjaxForm використовувати, що і буде найкращим рішенням для popup зворотного зв'язку.
відповісти
andreev888 replied on сб, 05/12/2015 - 22:26
ЩОСЬ НІЯК
Народ підкажіть, інструкція на вигляд найдоступніша з усіх, що бачив, все зробив по інструкції, але форми на сайті взагалі не бачу ... ні гачка, ні коми ... Вона не по-просту не виводиться ... Де дивитися?
відповісти
ollserg replied on вс, 06/12/2015 - 23:37
MODX REVOLUTION - очищення кешу
А якщо в Меню - Сайт та Оновити сайт (Очистити кеш сайту) Це перше, що спадає на думку. Ну а так, все просто, ще раз або два перечитайте пост і у вас все вийде !!!
відповісти
Зло replied on пт, 18/12/2015 - 07:00
ЗЛІСТЬ
Ви задовбали копіювати одні й ті ж статті! Придумайте щось своє або хоча б змініть код в статті!
відповісти
ollserg replied on пт, 18/12/2015 - 14:28
КОД ЦІЄЇ ФОРМИ ЧИТАЧІ ВЖЕ НАМАГАЛИСЯ МІНЯТИ
У них виникали питання пов'язані з непрацездатністю цього коду.
У коментарях вище можете почитати.
Інше питання, багато (точної статистики немає) бездумно копіюють і вставляють код цієї статті на свої сайти навіть не прочитавши її уважно. Я навмисно скопіював код форми зворотного зв'язку зі свого сайту і вказав у статті місця в коді які потрібно змінити на свої. І скільки ж листів з сайтів йшло на мою пошту до тих пір поки я не виправив адреса в коді ?! Їх були немає не сотні, всього лише десятки.
відповісти
svbel replied on чт, 02/06/2016 - 10:11
ПОМИЛКА ПРИ надсилання електронних листів
Що значить повідомлення "Відбулася помилка при спробі відправити пошту. Неможливо запустити функцію mail."?
відповісти
ollserg replied on чт, 02/06/2016 - 10:54
НЕМОЖЛИВО ЗАПУСТИТИ ФУНКЦІЮ MAIL.
Причин може бути багато. Дивіться логи, зазначений в FormIt поштовий домен і пошта існують і працюють нормально?
Задайте питання в сапорт вашого хостинг провайдера. Загалом однозначної відповіді немає на ваше запитання.
відповісти
Денис replied on ср, 15/06/2016 - 15:53
НЕ ПРИХОДЯТЬ ЛИСТИ НА ПОШТУ
Добридень! Зробив форму по Вашому опису, все працює, переміщує на сторінку подяки, але на пошту так нічого не приходить
Сайт на хостингу. За ідеєю все в коді норм
Підкажіть, в чому проблема то? Спасибі!
відповісти
ollserg replied on пт, 17/06/2016 - 12:17
ФОРМА ЗВОРОТНОГО ЗВ'ЯЗКУ MODX 100% ВЕРНА. ДІЙТЕ ПО ІНСТРУКЦІЇ.
Уважно прочитайте статтю. Зверніть увагу на чанк
Створення коду, що містить виклик сниппета AjaxForm
Відкриваємо шаблон, який буде використовувати ресурс і вводимо код, який буде все це здійснювати.
[[! AjaxForm? & Form \u003d `tpl.AjaxForm` & snippet \u003d` FormIt` & hooks \u003d `FormItSaveForm, email` & emailSubject \u003d` Тестове сообщеніе` & emailTo \u003d ` [Email protected]`& EmailFrom \u003d` [Email protected]`& EmailTpl \u003d` tpl.email` & validate \u003d `name: minLength \u003d ^ 2 ^, email: email: required, message: minLength \u003d ^ 10 ^` & validationErrorMessage \u003d `У формі містяться помилки!` & SuccessMessage \u003d `Повідомлення успішно отправлено`] ]
Розберемо основні параметри:
- & 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 \u003d ^ 2 ^ перевіряє, щоб поле name містило не менш 2 символів. Валідатор email: email: required перевіряє, щоб поле mail містило адресу електронної пошти. З основними правилами створення валідаторів можна познайомитися на сторінці "FormIt Validators".
- & ValidationErrorMessage - містить повідомлення, яке буде виводитися, якщо в формі містяться помилки.
- & SuccessMessage - повідомлення, яке побачить користувач, якщо повідомлення буде успішно відправлено.
Залишилося тільки створити чанк tpl.email, який буде містити шаблон листи.
Повідомлення
Від кого: [[+ name]]
E-mail: [[+ email]]
Телефон: [[+ phone]]
Повідомлення: [[+ message]]
MODX - Чанк tpl.email
Увага: Для виведення значень полів форми, використовується плейсхолдери.
Демонстрація роботи форми зворотного зв'язку
Основні моменти при роботі з формою зворотного зв'язку на сторінці продемонструємо за допомогою наступних зображень.
MODX - Форма зворотного зв'язку, що не пройшла валідацію 
Для створення форми на Modx без спаму, треба її створити з додатковими невидимими полями:
1. Завантажуємо і встановлюємо компоненти Ajaxform і Formit
2.
Форма викликається дуже просто, ви повинні розібратися
[[! AjaxForm? & Snippet \u003d `FormIt` & form \u003d` tpl.AjaxForm..ru `& emailTo \u003d` [Email protected]сайт` & validate \u003d `name: required, email: required, message: required, work-email: blank` & validationErrorMessage \u003d` У формі містяться помилки! `& successMessage \u003d` Дякую за заявку! Ми зв'яжемося з вами найближчим время.` & emailTpl \u003d `mailtpl`]]
Або через шабланізатор Fenom, ось так:
($ _Modx-\u003e runSnippet ( "! AjaxForm", [ "snippet" \u003d\u003e "FormIt", "form" \u003d\u003e "tpl.AjaxForm.example", "hooks" \u003d\u003e "email, spam" "emailFrom" \u003d\u003e " [Email protected]"," EmailSubject "\u003d\u003e" Заявка з сайту daruse.ru "," emailTo "\u003d\u003e" [Email protected]"," Validate "\u003d\u003e" name: required, email: required, message: required, work-email: blank "," validationErrorMessage "\u003d\u003e" У формі містяться помилки! "," SuccessMessage "\u003d\u003e" Спасибі за заявку! Ми зв'яжемося з вами найближчим часом. "," EmailTpl "\u003d\u003e" mailtpl ",]))
Опис параметрів:
- snippet - сниппет для обробки AjaxForm, ставимо Formit - він як раз і відправляє листи
- form - чанк оформлення форми, варто той, який за замовчуванням
- hooks - хукі для захисту від спаму
- emailFrom - адреса, від якого приходить лист
- emailTo - адреса, якого дійшов лист
- validate - валідація, тут також два невидимих \u200b\u200bполя
- validationErrorMessage - повідомлення, які буде виводитися, при не успішному введенні полів
- successMessage - повідомлення, які буде виводитися, при якому зазначається вдале надсилання листа
- emailTpl - чанк, в якому зберігатися шаблон приходить листи на пошту (про нього читайте нижче)
3. Після цього заходимо в наш чанк оформлення форми, в даному випадку це tpl.AjaxForm.example і додамо після тега form, наступні два поля.
Тепер по Вашій формі не повинен проходити спам, за рахунок двох нових полів.
4. Зовнішньої вид приходить листи
За замовчуванням приходить на пошту лист без будь-якого форматування в не дуже читається форматі. Тому давайте оформимо трохи наш лист на прикладі.
Шаблон листа це простий чанк, який ми вказуємо в параметрі emailTpl, Тут все дуже просто, напишу приклад оформлення. Якщо будуть питання, пишіть в коментарях.
mailtpl:
На сайті [[++ site_url]] залишили заявку.
[[+ Name: notempty \u003d `Ім'я: [[+ name]]
`]] [[+ Email: notempty \u003d`Пошта: [[+ email]]
`]] [[+ Message: notempty \u003d`Повідомлення: [[+ message]]
`]]Будь ласка зв'яжіться з ним найближчим часом.
Не відповідайте на цей лист, так як воно автоматичне.
Читайте про створення і c захистом від спаму.
Добридень! Сьогодні я познайомлю вас із створенням форми зворотного зв'язку для Modx Revolution, фішкою якої буде незвичайна каптча (так як гугловський qaptcha занадто складна і громіздка). Робити зворотний зв'язок ми будемо за допомогою доповнення Formit. Встановити ви його зможете, напевно, самі, ну а для тих, хто не знає як це зробити я все таки розпишу урок від початку до кінця. Починаємо!
Пропущу всі моменти пов'язані з установкою MODX Revolution, налаштуванням системи, вбудовування дизайну сайту і так далі. Почнемо з установки пакета Formit.
1. Заходимо в Система - Управління пакетами
2. Тиснемо "Завантажити доповнення"
3. Вибираємо зі списку Formit
Тиснемо "завантажити". Після завантаження Formit у вас з'явитися в завантажених пакетах, тиснемо кнопку встановити. Formit встановлений!
4. Далі створюємо новий чанк
Назвемо його "form", і вставляємо наступний код:
[[! Qaptcha]] [[! FormIt? & Hooks \u003d `spam, email, redirect` & emailTpl \u003d` sentEmailTpl` & emailSubject \u003d `Заявка на зворотний звонок` & emailTo \u003d` ваш електронну поштову адрес` & redirectTo \u003d `id сторінки" Лист успішно відправлено "` & validate \u003d `contact_name: required, contact_phone_NA_format: required` & customValidators \u003d` 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
і помістимо туди наступний код:
regClientCSS (MODX_SITE_URL. "assets / components / qaptcha / jquery / QapTcha.jquery.css"); $ Modx-\u003e regClientScript (MODX_SITE_URL. "Assets / components / qaptcha / jquery / jquery-ui.js"); $ Modx-\u003e regClientScript (MODX_SITE_URL. "Assets / components / qaptcha / jquery / jquery.ui.touch.js"); $ Modx-\u003e regClientScript (MODX_SITE_URL. "Assets / components / qaptcha / jquery / QapTcha.jquery.js"); $ Modx-\u003e setPlaceholder ( "qaptcha.Slider", "
"); $ Paramqaptcha \u003d array (); $ modx-\u003e getService (" lexicon "," modLexicon "); $ modx-\u003e lexicon-\u003e load (" qaptcha: default "); $ txtLock \u003d $ modx-\u003e lexicon ( "Посуньте навантажувач вправо для розблокування"); $ txtUnlock \u003d $ modx-\u003e lexicon ( "Тепер можете натиснути кнопку" Відправити ""); if (! empty ($ disabledSubmit)) $ paramqaptcha \u003d "disabledSubmit:". $ disabledSubmit; $ paramqaptcha \u003d "PHPfile: \\" ". MODX_SITE_URL. "Core / components / qaptcha / php / Qaptcha.jquery.php \\" "; $ paramqaptcha \u003d" txtLock: \\ "". $ TxtLock. "\\" "; $ Paramqaptcha \u003d" txtUnlock: \\ "". $ TxtUnlock. " \\ ""; $ paramqaptcha \u003d implode ( ",", $ paramqaptcha); $ modx-\u003e regClientHTMLBlock ( "");Через сніпет відразу підключаються всі скрипти і css файл, а також викликається плейсхолдер qaptcha.Slider
10. Розміщуємо чанк туди, де хочемо бачити каптчу (і увагу: куди підключена бібліотека jquery, без бібліотеки працювати не буде) і радіємо :))
Всім вдалої роботи і гарного настрою на вихідні!
P.S. У мене є відмінна ідея))) в "демо" я поставив свою пошту і всі листи, які ви будете відсилати для перевірки роботи скрипта будуть приходити до мене)) Як спасибі чекаю від вас анекдотів і прикольних невеликих історій))