Инструкция по подключению 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>