Выбор читателей
Популярные статьи
У меня уже есть пару уроков по созданию форм на 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=`
Разбор кода, идем сверху в низ:
&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"
и соответственно добавить поля для прикрепления файла
Несколько форм на одной странице
Просто в вызовах каждой формы пропишите
&submitVar=`имя формы на английском`
у каждой формы свое имя.
Как не крути, но вы однозначно столкнетесь со спамом — самый эффективный способ для борьбы с ним — , так же можете попробовать .
Для создания формы на Modx без спама, надо её создать с дополнительными невидимыми полями:
1. Загружаем и устанавливаем компоненты Ajaxform и Formit
2.
Форма вызывается очень просто, вы должны разобраться
[[!AjaxForm? &snippet=`FormIt` &form=`tpl.AjaxForm..ru ` &emailTo=`info@сайт` &validate=`name:required,email:required,message:required,work-email:blank` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Спасибо за заявку! Мы свяжемся с вами в ближайшее время.` &emailTpl=`mailtpl` ]]
Или через шабланизатор Fenom, вот так:
{$_modx->runSnippet("!AjaxForm", [ "snippet" => "FormIt", "form" => "tpl.AjaxForm.example", "hooks" => "email,spam" "emailFrom" => "[email protected]", "emailSubject" => "Заявка с сайта daruse.ru", "emailTo" => "[email protected]", "validate" => "name:required,email:required,message:required,work-email:blank", "validationErrorMessage" => "В форме содержатся ошибки!", "successMessage" => "Спасибо за заявку! Мы свяжемся с вами в ближайшее время.", "emailTpl" => "mailtpl", ])}
Описание параметров:
3. После этого заходим в наш чанк оформления формы, в данном случае это tpl.AjaxForm.example и добавим после тега form, следующие два поля.
Теперь по Вашей форме не должен проходить спам, за счет двух новых полей.
4. Внешней вид приходящего письма
По умолчанию приходит на почту письмо без всякого форматирования в не очень читаемом формате. Поэтому давайте оформим немного наше письмо на примере.
Шаблон письма это простой чанк, который мы указываем в параметре emailTpl , тут всё очень просто, напишу пример оформления. Если будут вопросы, пишите в комментариях.
mailtpl:
На сайте [[++site_url]] оставили заявку.
[[+name:notempty=`Имя: [[+name]]
`]] [[+email:notempty=`Почта: [[+email]]
`]] [[+message:notempty=`Сообщение: [[+message]]
`]]Пожалуйста свяжитесь с ним в ближайшее время.
Не отвечайте на это письмо, так как оно автоматическое.
Читайте о создании и c защитой от спама.
У нас осталась только одна страница, которую мы еще не переделали. Это страница Контакты . Здесь у нас помимо контактной информации будет расположена форма обратной связи. В 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 и добавляем необходимые нам плэйсхолдеры:
От кого:
Телефон:
Сообщение:
Здесь:
- имя отправителя
- телефон отправителя
- электронная почта отправителя
- сообщение, написанное отправителем на сайте
Д
алее создадим страницу с сообщением об успешной отправке и благодарностью за то, что пользователь отправил сообщение через форму обратной связи.
Например:
Благодарим Вас за отправку письма!
Ваше письмо успешно отправлено.
Наш специалист ответит Вам в ближайшее время.
Н
а эту страницу настроим редирект по ее ID.
Не
забываем изменить значение параметра &redirectTo=`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=`email:email:required,text:required:stripTags`
ответить
Виктор replied on пн, 19/10/2015 - 14:03
ТЕМА СООБЩЕНИЯ В ФОРМЕ ОБРАТНОЙ СВЯЗИ FORMIT
Доброго времени суток.
Использую "&emailSubject=`Письмо с сайта 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="" placeholder="Ваше имя" - обрезается
Спасибо
ответить
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% ВЕРНА. ДЕЙСТВУЙТЕ ПО ИНСТРУКЦИИ.
Внимательно прочтите статью. Обратите внимание на чанк
Статьи по теме: | |
Полный сброс настроек на смартфоне Nokia Lumia
Lumia 520 зарекомендовал себя как очень надежный смартфон, который очень... Обзор Xiaomi Mi6: мощная годнота с двойной камерой
Смартфоны Xiaomi все чаще можно увидеть в руках обычных людей, но... Как полностью удалить аваст Утилита для удаления аваст с компьютера
Антивирус легко установить, но сложно удалить, и данная статья расскажет... |