Описание настройки формы заказа
form
Вы можете либо просто вставлять подряд неколько form form ,
либо нумеровать их вручную form form2
Внимание: первая форма form не содержит в себе цифру «1»
Методы для работы с формой
В форме заказа могут буть следующие поля:
Javascript-методы
<script>window.leadvertex.form.label('fio','Как вас зовут?',2);</script>
Устанавливает альтернативный заголовок для поля fio. Последний параметр «2» подразумевает, что
заголовок будет установлен для form2 . Если параметр не передан, то заголовок будет применен
к form . Последний параметр ведет себя так во всех методах
<script>window.leadvertex.form.subLabel('address','Пример: ул. Академика Королева',2);</script>
Устанавливает заданный текст под полем «address» как пояснение к полю
<script>window.leadvertex.form.buttonText('Заказать сейчас',2);</script>
Устанавливает текст кнопки оформления заказа для формы 2
<script>window.leadvertex.form.placeholder('fio','Фамилия Имя Отчество',2);</script>
Устанавливает placeholder для поля «fio». Placeholder - это текст, написанный в поле, который исчезает после того, как пользователь
начинает что-то писать в нем
<script>window.leadvertex.form.placeholderOnly(2);</script>
Устанавливает placeholder для всех полей формы. Значение placeholder'a берется из заголовка формы, а сам заголовок скрывается.
Передаваемый параметр подразумевает номер формы, для которой будут применены изменения. Пример
<script>window.leadvertex.form.validationByAlert(2);</script>
Отображает сообщения об ошибках в заполнении формы во всплывающем сообщении, после нажатия кнопки оформления заказа
(Пример)
Перемещение блоков с данными (например, ценой) осуществляется следующим образом (пример ):
Допишите к блоку класс .lv-move
Допишите к блоку атрибут data-field="submit", который означает, относительно какого поля
формы будут происходить изменения. Это могут быть поля формы или кнопка заказа,
которая в данном случае именуется как «submit»
Допишите к атрибут data-position="before" или data-position="after".
before - переместит блок перед полем, after - после поля
Допишите к атрибут data-form="2" определяет в какую форму заказа будет перемещен блок
Важно Если вы используете форму уточнения заказа ,
то вместо номера формы необходимо передавать значение 'update'
Примеры
На этой странице приведены различные варианты конфигурирования формы заказа. Вы можете комбинировать их как угодно,
для достижения нужного результата
Обычная форма заказа
Альтернативные названия полей, подписи под полями и placeholder
Код формы
[[form2]]
<script>
/* Альтернативный заголовок поля fio */
window.leadvertex.form.label('fio','Как вас зовут?',2);
/* Пояснение под полем address */
window.leadvertex.form.subLabel('address','Пример: ул. Академика Королева',2);
/* Текст кнопки оформления заказа */
window.leadvertex.form.buttonText('Заказать сейчас!',2);
/* Placeholder для поля fio */
window.leadvertex.form.placeholder('fio','Фамилия Имя Отчество',2);
</script>
Placeholder вместо заголовка поля
Не переживайте за кроссбраузерность placeholder'a, ко всем формам автоматически подключается
Placeholders.js
Код формы
[[form3]]
<script>
/* Placeholder во всех полях вместо заголовка */
window.leadvertex.form.placeholderOnly(3);
/* Альтернативный placeholder для поля fio */
window.leadvertex.form.placeholder('fio','Фамилия Имя Отчество',3);
</script>
Название поля слева
Код формы
[[form4]]
<style>
#lv-form4 .lv-row-input .lv-label{
display: inline-block;
width: 30%;
}
#lv-form4 .lv-row-input .lv-field{
display: inline-block;
width: 70%;
}
</style>
Произвольный блок данных между полями
Цена: {{price}} руб.Доставка: 100 руб.Итого (доставка + НДС): {{total_price}} руб.
Акция! Всего {{price}} руб лично для вас!
Код формы
[[form5]]
<!-- Размещаем блок НАД кнопкой заказа -->
<div class="lv-move" data-position="before" data-form="5" data-field="submit">
<hr/><b>Цена:</b> [[price]] руб.<br>
<b>Доставка:</b> [[delivery_price]] руб.<br>
<b>Итого (доставка + НДС):</b> [[total_price]] руб.<hr/>
</div>
<!-- Размещаем блок ПОД полем «телефон» -->
<div class="lv-move" data-position="after" data-form="5" data-field="fio">
<hr/><b>Акция!</b> Всего [[price]] руб лично для вас!<hr/>
</div>
Поля в 2 колонки
Код формы
[[form6]]
<style>
#lv-form6 .lv-row {
display: inline-block;
width: 46%;
margin: 0 2%;
vertical-align: top;
}
</style>
Сообщения об ошибках во всплывающем сообщении
Код формы
[[form7]]
<script>window.leadvertex.form.validationByAlert(7);</script>
Форма во всплывающем окне
Используется виджет Dialog jQuery UI . Скопируйте код, указав в переменной formNumber номер формы, и допишите к
кнопке/ссылке, которая будет открывать форму класс lv-popup-form. Например,
<button class="lv-popup-form">Заказать сейчас!!!</button>
Код формы
[[form8]]
<script src="http://yandex.st/jquery-ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://yandex.st/jquery-ui/1.10.4/themes/base/jquery-ui.min.css"/>
<script>
var formNumber = 8;
window.leadvertex.form.placeholderOnly(formNumber);
$(document).ready(function(){
$('#lv-form'+formNumber).dialog({
autoOpen: false,
title: 'Оформление заказа',
width: '450',
modal: true
});
$('.lv-popup-form').click(function(){$('#lv-form'+formNumber).dialog('open')});
});
</script>