Инструкция по подключению jbCallMe модуля

Если есть возможность загрузки файлов на сервер, то лучше загрузить их на свой сервер и ссылаться на них. Если jQuery был подключен ранее, то в повторном подключении нет необходимости.

Если ЕСТЬ возможность загрузить файлы на сервер:

<!--Если jQuery не был подключен ранее, подключаем его-->			
<script type="text/javascript" src="/путь_к/jquery-1.8.3.min.js"></script>

<!--Подключаем js модуль форм-->
<script type="text/javascript" src="/путь_к/jquery.jbform.js"></script>
<!--Подключаем файл стилей-->
<link rel="stylesheet" type="text/css" href="/путь_к/jquery.jbform.css"><!--Тема по умолчанию-->		
<!-- <link rel="stylesheet" type="text/css" href="/путь_к/css/blue.jquery.jbform.css"> --><!--Синий стиль-->
<!-- <link rel="stylesheet" type="text/css" href="/путь_к/css/yellow.jquery.jbform.css"> --><!--Желтый стиль-->

Если НЕТ возможности загрузить файлы на сервер, подключаем из удалённого хранилища:

<!--Если jQuery не был подключен ранее, подключаем его-->			
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!--Подключаем js модуль форм-->
<script type="text/javascript" src="//jbcallme.ru/lib/js/jquery.jbform.js"></script>
<!--Подключаем файл стилей-->
<link rel="stylesheet" type="text/css" href="//jbcallme.ru/lib/css/jquery.jbform.css"><!--Тема по умолчанию-->		
<!-- <link rel="stylesheet" type="text/css" href="//jbcallme.ru/lib/css/blue.jquery.jbform.css"> --><!--Синий стиль-->
<!-- <link rel="stylesheet" type="text/css" href="//jbcallme.ru/lib/css/yellow.jquery.jbform.css"> --><!--Желтый стиль-->

Вызов формы нажатием на кнопку или ссылку

Допустим, у вас уже есть ссылка или кнопка, по нажатию на которую будет открываться форма, и она имеет класс, например, my_button. Учтите, что любой элемент с таким классом будет вызывать ваше модальное окно.

<a href="#" class="my_button">Кнопка вызова формы</a>

Тогда код для вызова модальной формы будет выглядеть так:

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
  $('.my_button').jbform({ 
    key: "5ffa78f4191761804f3a1d821cd3d303",
    title: "Заказ обратного звонка",
    copyright: false,
    success: "",
    postfix: "callme_order",
    fields: {
        name: {
            type: "text",
            required: true,
            label: "Как Вас зовут",
            placeholder: "Ваше имя"
        },
        tel: {
            type: "text",
            required: true,
            label: "Ваш телефон",
            placeholder: "Ваш контактный телефон"
        },
        text_4: {
            type: "text",
            label: "Промо-код ",
            placeholder: "Промо-код если есть"
        },
        file_6: {
            type: "file",
            label: "Загрузить фото",
            placeholder: "Прикрепите Ваше фото хорошего качества",
            multiple: true
        },
        submit: {
            type: "submit",
            input_class: "",
            value: "Получить макет БЕСПЛАТНО"
        }
    }
  });
});  
// ]]>
</script>
Кнопка вызова формы

Вывод формы сразу в указанном месте

Для вывода формы в блоке, сперва создайте блок-контейнер с идентификатором, например, form_container в желаемом месте.

<div id="form_container"></div>

Тогда вывести форму в этот блок-контейнер можно, добавив параметр modal: false:

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
  $('#form_container').jbform({ 
    modal: false,
    key: "5ffa78f4191761804f3a1d821cd3d303",
    title: "Заказ обратного звонка",
    copyright: false,
    success: "",
    postfix: "callme_order",
    fields: {
        name: {
            type: "text",
            required: true,
            label: "Как Вас зовут",
            placeholder: "Ваше имя"
        },
        tel: {
            type: "text",
            required: true,
            label: "Ваш телефон",
            placeholder: "Ваш контактный телефон"
        },
        text_4: {
            type: "text",
            label: "Промо-код ",
            placeholder: "Промо-код если есть"
        },
        file_6: {
            type: "file",
            label: "Загрузить фото",
            placeholder: "Прикрепите Ваше фото хорошего качества",
            multiple: true
        },
        submit: {
            type: "submit",
            input_class: "",
            value: "Получить макет БЕСПЛАТНО"
        }
    }
  });
});  
// ]]>
</script>