Теперь приступим к нашим формам обратной связи. Формы у нас будет 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! Это ведь казалось намного сложнее чем на самом деле, верно?
Drakonoved
02 мая 2020, 13:10(Комментарий был изменён)
#
↓
0
Kirill
04 февраля 2022, 12:12
#
↓
0
