Для начала, давайте рассмотрим вызов формы обратного звонка. Как правило, вызывается такая форма нажатием на ссылку, картинку или кнопку. Расположение этих элементов может быть совершенно различным. Зачастую ссылка на вызов формы располагается в «шапке» сайта, рядом с контактным номером телефона, иногда прижата к какой-либо стороне браузера и при прокрутке страницы всегда остаётся на видном месте. Основное правило – чтобы пользователю было удобно.
Одну форму можно открывать сразу несколькими кнопками, если задать им какой-нибудь одинаковый атрибут. К примеру, этим атрибутом может быть class. Рассмотрим на примере:
<a class="fixed_btn callme_btn"><img src="img/callme.png" alt="Перезвонить" /></a> картинка как кнопка
<input type="button" class="callme_btn" value="Заказать звонок" /> кнопка
<a class="callme_btn">перезвоним Вам</a> ссылка
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
$('.callme_btn').jbform({
...
});
});
// ]]></script>
Все эти элементы имеют один общий класс callme_btn. Он же используется в качестве селектора в инициализации формы. Получается, что любой элемент на сайте с классом callme_btn будет вызывать эту форму.
Посмотреть пример
В ситуации, когда на сайте представлен ряд услуг, и эти услуги исполняют разные люди, удобно для каждой услуги (или для каждого исполнителя) создать свою форму со своими полями и почтовым ящиком. Так можно разделить поток пользователей и разгрузить менеджера. Обратите внимание, что Идентификатор окна должен быть уникальным.
Посмотреть пример
Допустим, на вашем сайте есть каталог товаров. Рядом с каждым товаром расположена кнопка «Заказать». Как организовать заказ и, используя одну форму, определить, какой именно товар заказывают? Сделать это можно, добавив этой кнопке псевдо-свойство по шаблону data-<Идентификатор поля>="Значение", например:
<input type="button" class="order_btn" data-product="Изделие #573001" value="Заказать"/>
Нажав кнопку, значение Изделие #573001 вставится в поле product. По желанию, это поле может быть, выпадающим списком, скрытым полем, либо быть доступно только для чтения.
Посмотреть пример
Чтобы форма смотрелась на вашем сайте как родная и не выделялась из общего дизайна, ей можно задать собственные стили. Их можно задать как всем вашим формам одновременно, так и каждой в отдельности. Каждая форма, если было соблюдено правило уникальности идентификатора окна, будет иметь id="jbForm_<идентификатор окна>". Тогда обозначить в стилях контейнер формы можно будет вот так:
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
$('.callme_btn').jbform({
...
postfix: "callme_order",
...
});
});
// ]]></script>
<style type="text/css">
#jbForm_callme_order{
...
}
</style>
Контейнерам полей ввода и самим полям (в конструкторе) можно указать класс, и работать уже с этим классом, при назначении стилей.
Использование плагина jquery.maskedinput.js для ввода значений по шаблону уменьшает количество неверно заполненных форм. Скорее всего, вам попадались поля ввода телефона, где используется маска ввода: разрешено вводить только цифры и только определённое количество. Если вы не видели подобного, посмотрите в примере ниже.
Вызов функций, модифицирующих поля ввода (maskedinput, chosen и др.) необходимо производить в обработчике события onShow :
<script type="text/javascript" src="путь_к/jquery.maskedinput-1.3.1.min_.js"></script>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
$('.callme_btn').jbform({
...
postfix: "callme_order",
onShow: function(){
$("#jbForm_callme_order input[name=tel]").mask("+7 (999) 999-99-99");
}
});
});
// ]]></script>