[Modx Evo] Создание он-лайн формы, обратная связь eForm ModX. Форма обратной связи modx revo
Форма обратной связи modx на MODX без спама
Для создания формы на Modx без спама, надо её создать с дополнительными невидимыми полями:
1. Загружаем и устанавливаем компоненты Ajaxform и Formit
2. Форма вызывается очень просто, вы должны разобраться
[[!AjaxForm? &snippet=`FormIt` &form=`tpl.AjaxForm.example` &hooks=`email,spam` &emailFrom=`[email protected]` &emailSubject=`Заявка с сайта https: daruse.ru ` &emailTo=`[email protected]` &validate=`name:required,email:required,message:required,work-email:blank` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Спасибо за заявку! Мы свяжемся с вами в ближайшее время.` &emailTpl=`mailtpl` ]]Описание параметров:
- snippet - сниппет для обработки AjaxForm, ставим Formit - он как раз и отправляет письма
- form - чанк оформления формы, стоит тот, который по умолчанию
- hooks - хуки для защиты от спама
- emailFrom - адрес, от которого приходит письмо
- emailTo - адрес, которому приходит письмо
- validate - валидация, тут также два невидимых поля
- validationErrorMessage - сообщение, которые будет выводиться, при не успешном вводе полей
- successMessage - сообщение, которые будет выводиться, при успешной отправке письма
- emailTpl - чанк, в котором храниться шаблон приходящего письма на почту (о нём читайте ниже)
3. После этого заходим в наш чанк оформления формы, в данном случае это tpl.AjaxForm.example и добавим после тега form, следующие два поля.
<form action="" method="post"> <input type="hidden" name="nospam:blank" value="" /> <input type="hidden" name="work-email" value="" /> ... </form>Теперь по Вашей форме не должен проходить спам, за счет двух новых полей.
4. Внешней вид приходящего письма
По умолчанию приходит на почту письмо без всякого форматирования в не очень читаемом формате. Поэтому давайте оформим немного наше письмо на примере.
Шаблон письма это простой чанк, который мы указываем в параметре emailTpl, тут всё очень просто, напишу пример оформления. Если будут вопросы, пишите в комментариях.
mailtpl:
<p>На сайте <b>[[++site_url]]</b> оставили заявку.</p> [[+name:notempty=`<p><b>Имя: [[+name]]</p>`]] [[+email:notempty=`<p><b>Почта: [[+email]]</p>`]] [[+message:notempty=`<p><b>Сообщение: [[+message]]</p>`]] <p>Пожалуйста свяжитесь с ним в ближайшее время.</p> <p>Не отвечайте на это письмо, так как оно автоматическое.</p>Читайте о создании обратной формы на Ajax и php и простой обратной форме на php c защитой от спама.
daruse.ru
Все о компьютерах - Модальная форма обратной связи в MODx Revolution
Доброго времени суток, дорогой читатель! В этой статье я хотел бы поделиться с Вами опытом в создании формы обратной связи на сайте, используя модальное окно Twitter Bootstrap и HTML5. Для обработки формы я буду использовать сниппет MODx Revolution — FormIt.
Подготовка
Устанавливаем дополнение FomIt и Bootstrap для MODx Revolution. Теперь создадим чанк с текстом письма, которое будет отправляться как уведомление на почту. Назовем его emailChunk , сохраним его в категории FormIt, чтобы потом было легко его найти, и вставим простой HTML код:
<strong>[[+name]] заказал обратный звонок на сайте:</strong><br /><p>Пользователь оставил свой номер телефона [[+phone]] для связи с ним.</p>Последним шагом подготовки будет создание страницы (Вы можете перенаправить пользователя на любую существующую страницу, к примеру на главную), на которую будет перенаправляться пользователь в случае правильного заполнения полей. В содержимое ресурса внесите текст с оповещением пользователя (например, Мы скоро перезвоним Вам!). В конце статьи и покажу пример вызова сниппета без перенаправления.
Создание модального окна и кнопки Twitter Bootstrap
В тело страницы вставляем HTML код кнопки, при нажатии на которую будет выходить модальное окно Twitter Bootstrap:
<button type="button" data-toggle="modal" data-target="#phoneModal" data-whatever="">Заказать звонок</button>В этом примере я использовал валидацию номера телефона с помощью Bootstrap Formhelpers Phone (подробнее):
- type="tel" — указывает хелперу с каким полем работать;
- data-format="+7 (ddd) ddd-dddd" — здесь указываем формат и правило заполнения номера;
- pattern="(\+[\d\ \(\)\-]{16})"— здесь происходит проверка правила.
В каждом текстовом поле можно указать свойство required. Браузер, использующий HTML5, оповестит пользователя о необходимости заполнить это поле.
<input type="text" name="name" value="" required />Для удобства, приведенный HTML код модального окна и кнопки его вызова, можно поместить в отдельный чанк.
Вызов сниппета FormIt
Итак, после всех приготовлений, мы дошли до сути статьи. Берем код вызова сниппета и вставляем (Обязательно!) его выше формы:
[[!FormIt? &hooks=`email,redirect` &submitVar=`submit_button` &emailSubject=`Заказ обратного звонка на сайте` &emailTpl=`emailChunk` &emailTo=`[email protected]` &redirectTo=`1` &validate=`name:required,phone:required`]]А теперь все по порядку:
- &hooks=`email,redirect` — здесь подключаются хуки сниппета. В нашем случае хук "email" отправляет письмо, хук "redirect" перенаправляет на другую страницу. Они начинают свою работу только после успешной обработки формы, т.е. не вывелась ни одна ошибка.
- &submitVar=`submit_button` — в нашем случае это свойство не обязательно. Но обязательно, когда вы будете использовать несколько форм на одной странице.
- &emailSubject=`Заказ обратного звонка на сайте — заголовок письма.
- &emailTpl=`emailChunk` — текст письма. Чанк, который мы создали ранее.
- &emailTo=`[email protected]` — электронный почтовый ящик, куда будет отправлять хук "email" все письма с этой формы.
- &redirectTo=`1` — ID документа (страницы), куда будет перенаправлять хук "redirect".
- &validate=`name:required,phone:required` — валидация (проверка) заполнения полей name и phone.
Проверочный код (captcha)
Если вам понадобится ввод проверочного кода, то здесь поможет recaptcha от Google. Заходим, регистрируемся, вводим доменное имя и получаем публичный и секретный ключи.
Заходим в настройки системы, в фильтре выбираем "formit" и в поле formit.recaptcha_private_key вставляем секретный ключ, а в поле formit.recaptcha_public_key — публичный ключ.
После идем к вызову сниппета и добавляем через запятую хук "recaptcha" в лист &hooks=`email,redirect,recaptcha`.
Теперь подправим HTML код формы с модальным окном, в него нужно будет добавить вызов параметров сниппета:
[[+formit.recaptcha_html]][[!+fi.error.recaptcha]]Первый поместит область с проверочным кодом в тело окна, второй - выведет ошибки, если они будут.
Обработка формы без перенаправления
Если Вы хотите, чтобы пользователь оставался на этой же странице, удалите из списка хуков хук "redirect" и удалите свойство &redirectTo. В замен установите свойство &successMessage, в котором должен содержаться текст. В тело документа (страницы) поместите параметр [[!+fi.successMessage]]
На этом моя статья заканчивает, надеюсь она помогла Вам. До новых встреч!
Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.
aboutcomputers.ru
MODX Revolution. Создание контактной формы с разрешением на обработку персональных данных
Контактная форма для обратной связи существует практически на каждом сайте. Она может служить для связи с администратором сайта, для заказа услуг или продукции, предложений сотрудничества и т. д. Реализовывать форму контактов мы будем с помощью дополнений Formit и AjaxForm и в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006.
1. Устанавливаем пакеты Formit и AjaxForm.
2. Создаём шаблон контактов. Вкладка Элементы → категория Шаблоны → щёлкните правой кнопкой мыши и в контекстном меню выберите Новый шаблон.
В открывшемся окне заполните поля:
- Имя*: Contacts;
- Описание: Контакты;
- Код шаблона (html):
Здесь в шаблон страницы необходимо вставить код Ajax
[[!AjaxForm? &snippet=`FormIt` &form=`сontact-form` &emailTpl=`contactTpl` &hooks=`spam,email` &emailSubject=`Сообщение с сайта [[++site_url]]` &emailTo=`ваша@почта.ru` &validate=`name:required,email:required` &validationErrorMessage=`В форме содержатся ошибки!` &successMessage=`Сообщение успешно отправлено!` ]]
3. Создадим саму форму обратной связи. Вкладка Элементы → категория Чанки → щёлкните правой кнопкой мыши и в контекстном меню выберите Создать новый чанк здесь.
В открывшемся окне заполните поля:
- Имя*: сontact-form;
- Если используете bootstrap, то код формы может выглядеть так:
<form method="post">
<div>
<input type="text" name="name" required="" placeholder="Ваше имя*" value="[[+fi.name]]">
<span>[[+fi.error.name]]</span>
</div>
<div>
<input type="text" name="email" required="" placeholder="Ваш email*" value="[[+fi.email]]">
<span>[[+fi.error.email]]</span>
</div>
<div>
<input type="text" name="phone" required="" placeholder="Ваш телефон*" value="[[+fi.phone]]">
<span>[[+fi.error.phone]]</span>
</div>
<div>
<textarea rows="4" name="message" required="" data-maxlength="200" data-info="textarea-words-info" placeholder="Сообщение*"></textarea>
<span>[[+fi.error.message]]</span>
</div>
<div>
<label>
<input type="checkbox" required=""> Согласен на обработку персональных данных<br/>
<span>[[+fi.error.opd]]</span>
</label>
</div>
<p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="[[~20]]" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>
<button type="submit">Отправить</button>
[[+fi.success:is=`1`:then=`
<div>[[+fi.successMessage]]</div>`]]
[[+fi.validation_error:is=`1`:then=`<div>[[+fi.validation_error_message]]</div>`]]
</form>
Где [[~20]] страница с пользовательским соглашением
4. Создаём чанк, который формирует письмо на отправку. Вкладка Элементы → раздел Чанки → категория Tpl → щёлкните правой кнопкой мыши и в контекстном меню выберите Создать новый чанк здесь
В открывшейся форме Новый чанк заполните поля:
Дополнительно:
Стили AjaxForm: assets/components/ajaxform/css/default.css
Документация по FormIt: https://docs.modx.com/extras/revo/formit
Документация по AjaxForm: https://docs.modx.pro/components/ajaxform
СВами
opencentr.ru
Создание формы обратной связи (заказа) / modx.pro
Всем привет!Запилил такую вот форму обратной связи — ниже.
При попытке отправки сообщения выдает: «Пожалуйста, укажите получателя или получателей электронной почты.» Адрес указываю — в чем проблема? Спасибо!
Ну и если дадите какие-то общие рекомендации по оформлению, то буду крайне признателен!
[[!FormIt? &hooks=`recaptcha,spam,email,redirect,FormItAutoResponder` &validate=`name:required:minLength=^2^, tel:required, mail:<s></s>required, marka:required` &emailTo=`[email protected]` &emailTpl=`tplOrderOnlineEmail` &emailSubject=`Запрос с сайта "Название компании"` &redirectTo=`20` &fiarTpl=`tplOrderOnlineAutoResponse` &fiarSubject=`Спасибо за обращение!` &fiarToField=`mail` &fiarFromName=`Название компании` ]] [[!+fi.error_message:notempty=`<p>[[!+fi.error_message]]</p>`]] <form action="[[~[[*id]]]]" method="post"> <input type="hidden" name="nospam:blank" value="" /> <label for="name">ИМЯ *</label> <span>[[!+fi.error.name]]</span> <input type="text" name="name" value="[[!+fi.name]]" /> <label for="tel">ТЕЛЕФОН *</label> <span>[[!+fi.error.tel]]</span> <input type="text" name="tel" value="[[!+fi.tel]]" /> <label for="mail">EMAIL</label> <span>[[!+fi.error.mail]]</span> <input type="text" name="mail" value="[[!+fi.mail]]" /> <label for="marka">МАРКА *</label> <span>[[!+fi.error.marka]]</span> <select name="marka"> <option value="АВТО 1" [[!+fi.marka:FormItIsSelected=`auto_1`]] >АВТО 1</option> <option value="АВТО 2" [[!+fi.marka:FormItIsSelected=`auto_2`]] >АВТО 2</option> </select> <label for="vin">VIN</label> <input type="vin" name="vin" value="[[!+fi.vin]]" /> <label for="text">ПРИЧИНА ОБРАЩЕНИЯ</label> <textarea name="text" cols="55" rows="7" value="[[!+fi.text]]">[[!+fi.text]]</textarea> [[!+formit.recaptcha_html]] [[!+fi.error.recaptcha]] <input type="submit" value="Отправить" /> </form>modx.pro
[Modx Evo] Создание он-лайн формы, обратная связь eForm ModX от Василисы Белозеровой
Создадим простую форму обратной связи с проверкой валидности e-mail и всеми обязательными полями. Так же добавим капчу. Слова капчи можно редактировать в меню Modx. Инструмент - Конфигурация - Пользователи.
Все парметры eform можно посмотреть в русской документации, вот тут.
1. В самом начале необходимо создать новый чанк с именем zayvka. (Элементы - Управление элементами - Чанки - Новый чанк)
Описание: основной чанк он лайн формы, вставить в шаблон
Код чанка (HTML):
[!eForm? &formid=`form1` &tpl=`form-tpl`&to=`[email protected]` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Сообщение с сайта yotadom.com`!]
Здесь необходимо вставить свою почту (вместо [email protected]), куда будет приходить информация из формы обратной связи. &vericode=`1` - если поставить 0, то капчи не будет. И изменить заголовок письма (Сообщение с сайта yotadom.com)
Сохраняем, выходим.
2. Далее создаем новый чанк, называем form-tpl и заполняем так:
<div>[+validationmessage+]<form method="post" action="[~10~]" name="myform"><input type="hidden" name="formid" value="form1" /><label for="author">Ваше имя</label> <input type="text" name="author" eform="Имя::1" /><label for="email">Email:</label> <input type="text" name="email" eform="Адрес электронной почты:email:1" /><label for="text">Текст сообщения</label> <textarea name="text" rows="0" cols="0" eform="Текст сообщения:html:0"></textarea><p>Введите этот код: <img src="[+verimageurl+]" alt="Код проверки" border="0"/><input type="text" name="vericode" /><input type="submit" name="submit" value=" Отправить " /><input type="reset" name="reset" value=" Сбросить " /></form></div>
Здесь меняем внешний вид, стили, можно так же добавить дополнительные окна и изменить текст около окон. Вместо [~10~] вставляем ID страницы на которой расположена форма.
3. Важный чанк ответа report-tpl:
Это сообщение было отправлено посетителем по имени [+author+] с помощью формы обратной связи. </p> <table><tr valign="top"><td><b>Имя:</b></td><td>[+author+]</td></tr><tr valign="top"><td><b>Email:</b>:</td><td>[+email+]</td></tr><tr valign="top"><td><b>Сообщение:</b></td><td>[+text+]</td></tr></table><p>Вы можете использовать эту ссылку для ответа: <a href="mailto:[+email+]?subject=RE:[+subject+]">[+email+]</a></p>
Если в прошлом пункте добавили поля, то следует их добавить и сюда.
4. И последний чанк называем thank-tpl, вот его содержимое:
<strong>Ваше сообщение отправлено!</strong> <p>Мы рассмотрим его в ближайшее время</p><p>Отправленная информация:</p><ul><li><b>Ваше имя:</b> [+author+]</li><li><b>Ваш e-mail:</b> [+email+]</li><li><b>Текст сообщения:</b> [+text+]</li></ul>
Здесь урок, который поможет прикрепить файл к форме обратной связи
Здесь урок, который поможет создать форму в модальном окне (всплывающее окно)
Отправить файл клиенту, после отправки формы связи
Другой вариант формы в модальном окне
yotadom.com
