Формы обратной связи на AjaxForm + FormIt. Часть 4.

22.06.2018
2181

Теперь приступим к нашим формам обратной связи. Формы у нас будет 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]]
`]]
						[[+subject:!empty=`<strong>Тема:</strong> [[+subject]]
`]]
						[[+email:!empty=`<strong>Email:</strong> [[+email]]
`]]
						[[+phone:!empty=`<strong>Тема:</strong> [[+phone]]
`]]
						[[+text:!empty=`<strong>Вопрос:</strong>
 [[+text]]
`]]</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! Это ведь казалось намного сложнее чем на самом деле, верно?

Оцените статью:

Проголосовало: 5

Комментарии ()

Ваш комментарий будет первым!

Написать комментарий

Наши клиенты

Многие компании уже доверяют нам. Будьте в их числе!

Хотите реализовать проект?

Контакты

Напишите нам - мы расскажем вам много интересного!


Пермь, ул. Крупской 34, офис 510