Своя форма

Пример формы «Обратный звонок»

<form action="#" method="post">

<p><input data-title="Имя" id="f1" name="f1" placeholder="Имя" required="" type="text" /></p>

<p><input data-title="Телефон" id="f2" name="f2" placeholder="Телефон" required="" type="tel" /></p>

<input onclick="return gollos.AddCustomFeedback(this)" type="submit" value="Отправить" />

<div class="SuccessMessage" style="display:none">Спасибо, мы вам перезвоним!</div>

</form>

где

SuccessMessage – класс элемента который показывается при отправке формы, по умолчанию должно быть скрыто

data-title (атрибут тестового поля) – название поля, которое отображается в отчете

data-title (атрибут кнопки) – название формы, которое отображается в отчете

Обратите внимание, текстовые поля должны содержать атрибуты id="" и name="".

Когда мы нажимаем кнопку «Отправить», все поля формы отправляются на email администратора магазина и на страницу «Магазин» - «Обратная связь».

Форма обратной связи

Задача: создать страницу с контактами и формой обратной связи.

Шаг за шагом

  1. Откройте «Настройки» - «Меню и страницы»
  2. Создайте новую страницу
  3. В редакторе кликните «Источник»
  4. Вставьте код {{ controls.feedback }} в конец или начало текста
  5. Сохраните страницу

Сообщения с формы будут отображаться на странице «Информация» - «Обратная связь» и отправляться на email указанный в настройках как «Основной E-mail».

feedback.png

Устанавливаем форму обратной связи

  1. В панели управления перейдите на страницу «Настройки» далее «Дизайн», возле текущего дизайна кликните «Редактировать»
  2. Откройте «Мета теги» и добавьте
    Тип: CSS
    Значение: http://cdn.gollos.com/common/custom-form.css
  3. Вернитесь назад и откройте «Разметка»
    Найдите место куда нужно вставить ссылку, например после вывода блока с контактами {{ controls.contacts }} и вставьте код нужной формы

    Форма заказа обратного звонка:

    <a class="modal-opener" data-form="#formCallBack" href="#" style="border-bottom: 1px dashed; text-decoration: none;">Заказать звонок</a>
    <form action="" id="formCallBack" method="post" class="pcss3f pcss3f-vm pcss3f-modal" style="width: 300px;">
        <header>Обратный звонок</header>
        <p style="margin: 0px; padding: 0 0 10px 0; color: #a1a1a1;">Пожалуйста, укажите ваш номер телефона, мы вам перезвоним.</p>
        <section class="state-normal">
            <label for="name">Имя</label>
            <input type="text" name="name" id="name" required data-title="Имя">
            <i class="icon-user"></i>
        </section>
        <section class="state-normal">
            <label for="subject">Телефон</label>
            <input type="text" name="phone" id="phone" required data-title="Телефон">
            <i class="icon-phone"></i>
        </section>
        <section class="state-normal">
            <label for="message">Сообщение</label>
            <textarea cols="1" rows="1" name="message" id="message" data-title="Сообщение"></textarea>
            <i class="icon-comment"></i>
        </section>
        <div class="SuccessMessage" style="display: none; color: #49912C; font-weight: bold; padding: 10px 0;">Спасибо, мы вам перезвоним!</div>
        <footer>
            <button type="button" class="modal-closer">Закрыть</button>
            <button type="submit" class="color-blue" onclick="return gollos.AddCustomFeedback(this)" data-title="Обратный звонок">Отправить</button>
        </footer>
    </form>
    	

    Форма обратной связи:

    <a class="modal-opener" data-form="#formFeedback" href="#" style="border-bottom: 1px dashed; text-decoration: none;">Обратная связь</a>
    <form action="" id="formFeedback" method="post" class="pcss3f pcss3f-vm pcss3f-modal" style="width: 300px;">
        <header>Обратная связь</header>
        <section class="state-normal">
            <label for="message">Сообщение</label>
            <textarea cols="1" rows="1" name="message" id="Textarea1" data-title="Сообщение"></textarea>
            <i class="icon-comment"></i>
        </section>
        <section class="state-normal">
            <label for="name">Имя</label>
            <input type="text" name="name" id="Text1" required data-title="Имя">
            <i class="icon-user"></i>
        </section>
        <section class="state-normal">
            <label for="email">E-mail</label>
            <input type="email" name="email" id="email" required data-title="E-mail">
            <i class="icon-envelope-alt"></i>
        </section>
        <div class="SuccessMessage" style="display: none; color: #49912C; font-weight: bold; padding: 10px 0;">Спасибо, ваше сообщение отправлено!</div>
        <footer>
            <button type="button" class="modal-closer">Закрыть</button>
            <button type="submit" class="color-blue" onclick="return gollos.AddCustomFeedback(this)" data-title="Обратная связь">Отправить</button>
        </footer>
    </form>
    	

    Форма для проверки наличия товара. Нужно разместить только в «Дизайн» - «Редактировать» - «Товары. Описание» - «{{ zone.center }}». Код можно вставить перед кнопкой «В корзину» или выводить только при условии что товара нет в наличии.

    <a class="modal-opener" data-form="#formCheckAvailable" href="#" style="border-bottom: 1px dashed; text-decoration: none;">Уточнить наличие</a>
    <form action="" id="formCheckAvailable" method="post" class="pcss3f pcss3f-vm pcss3f-modal" style="width: 300px;">
        <header>Уточнить наличие товара</header>
        <section class="state-normal">
            <label for="name">Код товара</label>
            <input type="text" name="product" id="product" required data-title="Код товара" value="{{ product.id }}">
            <i class="icon-barcode"></i>
        </section>
        <section class="state-normal">
            <label for="name">Имя</label>
            <input type="text" name="name" id="name" required data-title="Имя">
            <i class="icon-user"></i>
        </section>
        <section class="state-normal">
            <label for="email">E-mail</label>
            <input type="email" name="email" id="email" required data-title="E-mail">
            <i class="icon-envelope-alt"></i>
        </section>
        <div class="SuccessMessage" style="display: none; color: #49912C; font-weight: bold; padding: 10px 0;">Спасибо, ваш запрос отправлен!</div>
        <footer>
            <button type="button" class="modal-closer">Закрыть</button>
            <button type="submit" class="color-blue" onclick="return gollos.AddCustomFeedback(this)" data-title="Уточнить наличие">Отправить</button>
        </footer>
    </form>
    	

При клике на ссылку форма отображается во всплывающем окне.

Обратите внимание, для ссылки должен быть указан атрибут data-form="#<id формы> " например: data-form="#formCheckAvailable".

Изменение Формы Оформления Заказа

1. Как изменить поля при оформлении заказа.

В панели управления откройте "Настройки">"Настройки магазина". В блоке "Настройка корзины" можно редактировать или добавлять новые поля.

2. Как убрать форму для зарегистрированного пользователя.

В файл стилей нужно добавить строки:

h2.ForOldUser { display: none; }

h2.ForNewUser { display: none; }

#loginCartForm { display: none; }

3. Как размесить текст на этой странице

Изменить текст нельзя, можно разместить текст до/после модуля

В редактировании дизайна, откройте "Оформление корзины".

Добавьте текст до или после строки {{ controls.checkout }}

4. Как разместить текст на странице с успешным оформлением заказа

В основной разметке дизайна можно сформировать специальное условие на Liquid и разместить в нем текст:

{% if page.checkout_success %}

Ваш_текст

{% endif %}