Красивая и функциональная форма с проверкой корректности ввода мобильного номера телефона
Необходимо установить FormIt и AjaxForm, так-же подключить библиотеку jquery.inputmask.min.js.
Создаем Чанк, назвал его “ZakazSite” со следующим кодом:
<form action=”#” method=”post” name=”contact-form” id=”main-contact-form zakaz-form” style=”padding:15px;”>
<div class=”form-group”>
<input type=”text” required placeholder=”Имя” class=”form-control” name=”name” value=”[[+fi.name]]”>
<span class=”error error_name”>[[+fi.error.name]]</span>
</div>
<div class=”form-group”>
<input type=”tel” required placeholder=”Телефон” class=”form-control” name=”pfone” id=”tel” value=”[[+fi.pfone]]”>
<span class=”error error_name”>[[+fi.error.pfone]]</span>
</div>
<div class=”form-group”>
<input type=”text” required placeholder=”Ваша сфера деятетельности” class=”form-control” name=”sphere” value=”[[+fi.sphere]]”>
</div>
<button class=”btn btn-primary bounceInRight” type=”submit”>Заказать лендинг!</button>
[[+fi.success:is=`1`:then=`
<div class=”alert alert-success”>[[+fi.successMessage]]</div>`]]
[[+fi.validation_error:is=`1`:then=`<div class=”alert alert-error”>[[+fi.validation_error_message]]</div>`]]
</form>
И Чанк, назвал его “zakazEmailTpl” со следующим кодом:
Лид с сайта mysite.ru
Имя: [[+name]]
Телефон: [[+pfone]]
Сфера деятельности: [[+sphere]]
Затем в коде шаблона в нужном месте просто вставляем следующий код:
[[!AjaxForm?
&snippet=`FormIt`
&form=`ZakazSite`
&emailTpl=`zakazEmailTpl`
&hooks=`spam,email`
&emailSubject=`Лид “VIP” с сайта [[++site_url]]`
&emailTo=`some@gmail.com`
&validate=`name:required,pfone:required`
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Сообщение успешно отправлено!`
]]
Далее внизу кода шаблона, где *#tel – это добавление валидации ко всем полям с id=”tel”:
<script type=”text/javascript”>
$(document).ready(function() {
$(“*#tel”).inputmask(“+7(999)999-99-99”)
});
</script>