Дополнительные возможности

Для продвинутых пользователей имеется ряд дополнительных возможностей, которые помогут расширить функционал формы и связать этот плагин с другими.

События формы

Модуль формы имеет 3 события, в которые можно вставить свою функцию.

onShow - вызывается при появлении формы
onSendSuccess - вызывается при успешной отправке формы
onSendFail - вызывается если возникла ошибка, при отправке формы.

Сейчас, если в конструкторе добавить текстовые поля с типом tel или date, то в событие onShow будет дописана функция библиотеки маскированного ввода или календаря. По этому же принципу можно добавлять свои плагины, например chosen для выпадающего списка или простые js функции, типа редирект на другую страницу и прочие. Рассмотрим пример того, как именно нужно использовать эти события и в какое место кода их нужно вставлять:

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
  $('.my_button').jbform({ 
    key: "5d828116e001cf8bf52d466f29d7343c",
    title: "Заказ обратного звонка",
    copyright: false,
    identify: true,
    progress: "Формируется заказ...",
    success: "Спасибо за заказ! Мы перезвоним вам в ближайшее время.",
    postfix: "callme_order",
    fields: {
        name: {
            type: "text",
            placeholder: "Ваше имя"
        },
        tel: {
            type: "tel",
            required: true,
            placeholder: "Ваш номер телефона"
        },
        product: {
            type: "hidden"
        },
        submit: {
            type: "submit",
            value: "ЗАКАЗАТЬ"
        }
    },
    onShow: function(){
       // код выполнится, когда всплывёт форма
    },
    onSendSuccess: function(){
       // код выполнится, когда форма успешно отправится
    },
    onSendFail: function(){
       // код выполнится, если отправка по каким-то причинам не удалась
    }
  });
});  
// ]]>
</script>

Подключение Целей Яндекса

Цель можно подключить как к событию всплывания формы, так и к событию успешной отправки. Лучше всего подключать 2 цели, так можно будет высчитать сколько отказов было (открыли форму, но не отправили).

Для начала давайте создадим 2 цели: Добавить цель -> выбрать Событие -> Идентификатор цели:jbc_open; вторую цель создайте с идентификатором jbc_send

    onShow:function(){
        yaCounter2123456.reachGoal('jbc_open'); // вызовется при открытии формы
        return true;
    },
    onSendSuccess:function(){
        yaCounter2123456.reachGoal('jbc_send'); //вызовется при успешной отправке
        return true;
    } 

2123456 - id вашего счетчика. По такому же принципу можно подключать аналитику Гугла.

Отправка письма на адрес в зависимости от выбранного значения

В случае, когда у вас есть несколько отделов или представительств, было бы удобно отправлять заявки именно в то, которое выбрал пользователь. Представим ситуацию, когда у вас сеть салонов по ремонту мобильных телефонов. Вы делаете на сайт форму заявки на принятие устройства на ремонт, и добавляете выпадающий список (или радио-кнопки) со списком ваших салонов. Пользователь, заполняющий форму, выбирает ближайший к нему салон и отправляет заказ. Данные из формы приходят на почту именно того салона, который был выбран пользователем, а не попадают в общий почтовый ящик. Так же нам встречался случай, когда нужно было в одной форме сделать выбор юристов, и чтобы заявка приходила на почту того юриста, которого выбрали. Так что подобная функция бывает очень полезна.

Сперва необходимо в конструкторе добавить поле со списком и внести все отделы/представительства.

Затем сохранить изменения и в кабинете переключиться на пункт настроек. В поле Почты нужно будет ввести xml-конструкцию следующего вида:

<switch>
<field>radio_2</field>
<case>
	<if>МЦ “ROOMER” - м. Автозаводская</if>
	<then>mail_for_roomer@mail.ru</then>
</case>
<case>
	<if>ТРК “РИО” - м. Новогиреево</if>
	<then>mail_2@mail.ru</then>
</case>
<case>
	<if>МЦ “АРМАДА” - м. Пражская</if>
	<then>mail_3@mail.ru</then>
</case>
<case>
	<if>МТЦ “СКАРАБЕЙ” - м. Выхино</if>
	<then>mail_4@mail.ru</then>
</case>
<case>
	<if>МЦ “МОНАРХ” - м. Динамо</if>
	<then>mail_5@mail.ru</then>
</case>
<case>
	<if>ТК “ТРИ КИТА” - м. Славянский бульвар</if>
	<then>mail_6@mail.ru</then>
</case>
<case>
	<if>ТК “ГРАНД” - м. Речной вокзал</if>
	<then>mail_7@mail.ru</then>
</case>
<default>default@mail.ru</default>
</switch>

В поле тег field вписываем поле по которому будем проверять; поле default - поле почты по умолчанию; группы case - список значений представительств и их почты.