Эта страница содержит документацаю к устаревшей версии шаблонизатора, поддержка которой вскоре будет прекращена. Мы настоятельно рекомендуем вам обратиться к актуальной версии
Важно знать!
Форма заказа (поля, их названия и порядок следования) настраиваются в панели управления проектом, и не требуют от предприниматля каких-либо специальных знаний верстки. Именно поэтому мы не рекоменуем искусственно изменять названия полей при помощи js-скриптов
Описание настройки формы заказа

form - вставляет форму заказа. На одной странице может быть до 9 форм

Вы можете либо просто вставлять подряд неколько form form, либо нумеровать их вручную form form2
Внимание: первая форма form не содержит в себе цифру «1»

Методы для работы с формой

В форме заказа могут буть следующие поля:

  • fio
  • country
  • postIndex
  • region
  • city
  • address
  • house
  • flat
  • phone
  • email
  • quantity
  • comment
  • checkboxPersonalData
  • checkboxAgreeTerms
  • additional1
  • additional2
  • additional3
  • additional4

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'

Примеры

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

Обычная форма заказа

Код формы
form

Альтернативные названия полей, подписи под полями и 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>
                

Произвольный блок данных между полями


Цена: 1000 руб.
Доставка: 100 руб.
Итого (доставка + НДС): 1100 руб.

Акция! Всего 1000 руб лично для вас!
Код формы
                    [[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>