Теперь приступим к нашим формам обратной связи. Формы у нас будет 2:
- В блоке с контактами
- В модальном окне
Начнем реализация с формы в блоке контактов. Для этого нам необходимо установить компоненты AjaxForm из репозитория modstore.pro и FormIt из официального репозитория. Надеюсь, что большинство из вас это уже сделало.
Начнем с того, что создадим чанк нашей будущей формы “contactFormTpl” (для форм я делаю отдельную категорию, чтобы потом было удобнее их искать):
<form action="#" method="post" class="ajax_form" id="contactform"> <div class="message"></div> <div class="form-group hidden"> <label>Имя</label> <input class="form-control" name="user" placeholder="" type="text"> </div> <div class="form-group hidden"> <label>Имя</label> <input class="form-control" name="username" placeholder="" type="text"> </div> <div class="form-group"> <input type="text" name="name" class="form-control" placeholder="Name"> </div> <div class="form-group"> <input type="email" name="email" class="form-control" placeholder="Email"> </div> <div class="form-group"> <input type="text" name="subject" class="form-control" placeholder="Subject"> </div> <div class="form-group"> <textarea class="form-control" name="text" cols="30" rows="10"></textarea> </div> <button type="submit">Submit</button> </form>
Обратите внимание на атрибуты name и класс формы “ajax_form” сделайте все так же как у меня, иначе сообщения не будут отправляться. Также я ввел скрытое поле для борьбы со спамом username и дал форме id, чтобы можно было вывести сообщение об успешной отправке пользователю.
Отлично! Теперь создадим чанк письма, отталкиваясь от наших name’ов полей. Сейчас будет бонус! Я переделал стандартный чанк miniShop2 для данных целей, чанк contactEmailTpl:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>[[++site_name]]</title> </head> <body style="margin:0;padding:0;background:#f6f6f6;"> <div style="height:100%;padding-top:20px;background:#f6f6f6;"> <a href="[[++site_url]]"> <img style="display:block;margin: auto;" src="[[++site_url]]assets/images/logo.png" alt="[[++site_name]]" width="120"/> </a> <!-- body --> <table class="body-wrap" style="padding:0 20px 20px 20px;width: 100%;background:#f6f6f6;margin-top:10px;"> <tr> <td></td> <td class="container" style="border:1px solid #f0f0f0;background:#ffffff;width:800px;margin:auto;"> <div class="content"> <table style="width:100%;"> <tr> <td> <h3 style="font-family:Arial;color: #111111;font-weight: 200;line-height: 1.2em;margin: 40px 20px;font-size: 22px;"> Сообщение с сайта. </h3> <div style="font-family: Arial;color: #666666;font-size: 12px;margin: 0 20px;"> <p>[[+name:!empty=`<strong>Имя:</strong> [[+name]]<br/>`]] [[+subject:!empty=`<strong>Тема:</strong> [[+subject]]<br/>`]] [[+email:!empty=`<strong>Email:</strong> [[+email]]<br/>`]] [[+phone:!empty=`<strong>Тема:</strong> [[+phone]]<br/>`]] [[+text:!empty=`<strong>Вопрос:</strong><br/> [[+text]]<br/>`]]</p> </div> </td> </tr> </table> </div> <!-- /content --> </td> <td></td> </tr> </table> <!-- /body --> <!-- footer --> <table style="clear:both !important;width: 100%;"> <tr> <td></td> <td class="container"> <!-- content --> <div class="content"> <table style="width:100%;text-align: center;"> <tr> <td align="center"> <p style="{$style.p}"> <a href="[[++site_url]]" style="color: #999999;"> [[++site_name]] </a> </p> </td> </tr> </table> </div> <!-- /content --> </td> <td></td> </tr> </table> <!-- /footer --> </div> </body> </html>
Чанки у нас есть, теперь будем вызывать сниппет ajaxForm вместо формы:
[[!AjaxForm? &snippet=`FormIt` &form=`contactFormTpl` &hooks=`spam,email,FormItSaveForm` &emailTpl=`contactEmailTpl` &emailSubject=`Вам сообщение с сайта [[++site_name]]` &emailTo=`artpetropavlovskij@gmail.com` &emailFrom=`noreply@site.ru` &formName=`Сообщение с сайта` &validate=`name:required,email:required,text:required,user:blank,username:blank,captcha:blank` ]]
Где:
- Snippet – запускаемый сниппет
- Form – чанк формы
- Hooks – хуки FormIt (spam – проверка на спам, email – отправка email сообщения, FormItSaveForm – сохранение формы в панели администратора)
- emailTpl – чанк email сообщения
- emailSubject – тема письма
- emailTo – кому отправляем
- emailFrom – от кого отправляем
- FormName – имя формы
Теперь можно проверить форму – она у меня заработала с первого раза.
Одна форма у нас есть, теперь аналогично создадим форму в модальном окне. Так как у нас используется Bootstrap 3 я взял стандартное модальное окно и вставил туда форму. Модальное окно я убрал в чанк “modals” (естественно его нужно вызвать в шаблоне главной страницы, я сделал это перед чанком scripts):
<div class="modal fade" id="callback" tabindex="-1" role="dialog" aria-labelledby="callback"> <div class="modal-dialog" role="document"> <div class="modal-content"> [[!AjaxForm? &snippet=`FormIt` &form=`modalFormTpl` &hooks=`spam,email,FormItSaveForm ` &emailTpl=`contactEmailTpl` &emailSubject=`Вам сообщение с сайта [[++site_name]]` &emailTo=`artpetropavlovskij@gmail.com` &emailFrom=`noreply@site.ru` &formName=`Заказ сайта` &validate=`name:required,email:required,text:required,user:blank,username:blank,captcha:blank` ]] </div> </div> </div>
Чанк формы “modalFormTpl”:
<form action="[[~[[*id]]]]" method="POST" class="ajax_form"> <input type="hidden" name="pagetitle" value="[[*pagetitle:htmlent]]"> <input type="hidden" name="id" value="[[*id:htmlent]]"> <input type="hidden" name="href" value="[[~[[*id]]? &scheme=`full`]]"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Buy Now</h4> </div> <div class="modal-body"> <div class="message"></div> <div class="form-group hidden"> <label>Имя</label> <input class="form-control" name="user" placeholder="" type="text"> </div> <div class="form-group hidden"> <label>Имя</label> <input class="form-control" name="username" placeholder="" type="text"> </div> <div class="form-group"> <input type="text" name="name" class="form-control" placeholder="Name"> </div> <div class="form-group"> <input type="email" name="email" class="form-control" placeholder="Email"> </div> <div class="form-group"> <input type="text" name="subject" class="form-control" placeholder="Subject"> </div> <div class="form-group"> <textarea class="form-control" name="text" cols="30" rows="10"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Submit</button> </div> </form>
Также, чтобы форма заработала нужно прописать атрибуты у ссылки в шапке и у чанка с товарами:
<a href="#" data-toggle="modal" data-target="#callback">Buy Now</a>
Проверим? Работает!
Мелочи я рассказал в видео, вот мы с вами и сделали лендинг на MODx Revo! Это ведь казалось намного сложнее чем на самом деле, верно?