Инструкция по подключению 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: "cf1a10be4c498b17c31bbd2dfddd4302",
    title: "Оформление заказа",
    copyright: false,
    success: "Менеджер свяжется с вами через несколько минут для уточнения заказа.",
    postfix: "demo_product_order_maxi",
    fields: {
        name: {
            type: "text",
            required: true,
            placeholder: "Ваше имя"
        },
        tel: {
            type: "text",
            required: true,
            placeholder: "Номер телефона"
        },
        mail: {
            type: "text",
            required: true,
            placeholder: "Ваш e-mail"
        },
        file_2: {
            type: "file",
            label: "Выбор файлов не более 3 шт. (любые графические)",
            placeholder: "Выберите файл",
            multiple: true
        },
        text_4: {
            type: "text",
            required: true,
            label: "Размер готовой вышивки (мм) ширина-высота",
            placeholder: "например: 150 х 200"
        },
        descr: {
            type: "textarea",
            label: "Комментарии к заказу (шеврон, вышивка на изделии, вышивка на крое и т.д.)"
        },
        submit: {
            type: "submit",
            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: "cf1a10be4c498b17c31bbd2dfddd4302",
    title: "Оформление заказа",
    copyright: false,
    success: "Менеджер свяжется с вами через несколько минут для уточнения заказа.",
    postfix: "demo_product_order_maxi",
    fields: {
        name: {
            type: "text",
            required: true,
            placeholder: "Ваше имя"
        },
        tel: {
            type: "text",
            required: true,
            placeholder: "Номер телефона"
        },
        mail: {
            type: "text",
            required: true,
            placeholder: "Ваш e-mail"
        },
        file_2: {
            type: "file",
            label: "Выбор файлов не более 3 шт. (любые графические)",
            placeholder: "Выберите файл",
            multiple: true
        },
        text_4: {
            type: "text",
            required: true,
            label: "Размер готовой вышивки (мм) ширина-высота",
            placeholder: "например: 150 х 200"
        },
        descr: {
            type: "textarea",
            label: "Комментарии к заказу (шеврон, вышивка на изделии, вышивка на крое и т.д.)"
        },
        submit: {
            type: "submit",
            value: "Заказать"
        }
    }
  });
});  
// ]]>
</script>