ИНСТРУКЦИЯ ПО ВЕРСТКЕ И ДОБАВЛЕНИЮ СВОИХ
ШАБЛОНОВ ФОРМ В POPMECHANIC.IO

1.
Типы форм и поведения в Popmechanic
ОБЩИЕ ТИПЫ ФОРМ
ТИПЫ ПОВЕДЕНИЯ ФОРМ
Когда вы создаете свой шаблон или загружаете его сами
нужно понимать какой это тип формы и какие наборы поведения нужны.

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

Или информационный скроллбокс, где мы просто показываем одну ссылку без ввода пользователем данных.

2.
Правила верстки
3.1. Все экраны формы оборачиваются в popmechanic-form:
<!-- Вся форма обернута в отдельный div с классом "popmechanic-reset" и id="popmechanic-form" -->
<div class="popmechanic-reset" id="popmechanic-form">
    <div class="popmechanic-main">
        <div class="popmechanic-content">
            <div class="popmechanic-header">
                Заголовок
            </div>
            <div class="popmechanic-text">
                Текст
            </div>

<!-- На ссылки, клики по которым нужно считать добавляйте  data-popmechanic-submit: -->
            <a href="https://app.popmechanic.io" target="_blank" name="button" class="popmechanic-button" data-popmechanic-submit>
                <span class="popmechanic-telegram-icon"></span>
                Кнопка
            </a>
        </div>
    </div>

<!-- Отдельный класс для элементов закрытия формы: -->
    <div class="popmechanic-close" data-popmechanic-close>&times;</div>
</div>
3.2. Для форм подписки используйте классы
"popmechanic-main" (основной экран) и
"popmechanic-thankyou"(после ввода данных пользователем) :
<div class="popmechanic-reset" id="popmechanic-form">

	<div class="popmechanic-main">
		<div class="popmechanic-content">
			<div class="popmechanic-text">Текст</div>
			<div class="popmechanic-title">Заголовок</div>

<!-- Для создания полей ввода используйте "popmechanic-inputs": -->
<div class="popmechanic-inputs">
				<input type="email" class="popmechanic-input" data-popmechanic-input="email" placeholder="Email" required>
				<button type="button" name="button" class="popmechanic-submit" data-popmechanic-submit>Текст кнопки</button>
			</div>
		</div>
	</div>

<!-- Отдельно в форму добавляем экран, который пользователь увидит после подписки с классом "popmechanic-thankyou": -->

	<div class="popmechanic-thankyou">
		<div class="popmechanic-title"><Спасибо!></div>
		<div class="popmechanic-text"><Уже отправили вам письмо></div>
	</div>
	
	<div class="popmechanic-close" data-popmechanic-close>&times;</div>

</div>
3.3. Для ссылок, клики по которым необходимо считать добавляйте data-popmechanic-submit :
 <a href="https://app.popmechanic.io" target="_blank" name="button" class="popmechanic-button" data-popmechanic-submit>
    
3.4. Помечайте поля ввода данных специальными переменными :
<!-- Пример трех полей ввода в форме: -->

<div class="popmechanic-inputs">
          <div class="popmechanic-input">
              <input type="text" class="popmechanic-name" data-popmechanic-input="name" placeholder="Имя">
          </div>          
          <div class="popmechanic-input">
              <input type="text" class="popmechanic-phone" data-popmechanic-input="phone" placeholder="Телефон">
          </div>   
          <div class="popmechanic-input">
              <input type="email" class="popmechanic-email" data-popmechanic-input="email" placeholder="Email">
          </div>
<!-- Пример двух кнопок для выбора пола и сохранения данных: -->

<button type="button" class="btn" name="button" data-popmechanic-submit onclick="PopMechanic.customs.gender = 'Male'" data-target="screen">
FOR MEN
</button>

<button type="button" class="btn" name="button" data-popmechanic-submit onclick="PopMechanic.customs.gender = 'Female'" data-target="screen">
FOR WOMEN
</button>
<!-- Пример выбора пользователем из списка галочек: -->

  <h3 class="popmechanic-header-heading">Choose your interests:</h3>
            </div>
            <div class="popmechanic-categories">
              <ul class="popmechanic-categories-list">
                <li class="popmechanic-categories-item popmechanic-categories-item-running">
                  <div class="popmechanic-categories-pic popmechanic-categories-pic-running"></div>
                  <input id="running" type="checkbox" data-popmechanic-input="customs.running" value="1">
                  <label class="popmechanic-categories-label" for="running">Run</label>
                </li>
                <li class="popmechanic-categories-item popmechanic-categories-item">
                  <div class="popmechanic-categories-pic popmechanic-categories-pic-training"></div>
                  <input id="training" type="checkbox" data-popmechanic-input="customs.training" value="1">
                  <label class="popmechanic-categories-label" for="training">Gym</label>
                </li>
                <li class="popmechanic-categories-item popmechanic-categories-item-autosport">
                  <div class="popmechanic-categories-pic popmechanic-categories-pic-autosport"></div>
                  <input id="autosport" type="checkbox"  data-popmechanic-input="customs.auto" value="1">
                  <label class="popmechanic-categories-label" for="autosport">Motorsport</label>
                </li>
<!-- Пример полей для сбора даты: -->

  <span class="birthday-text">Date of Birth</span>
              <div class="popmechanic-input">
                  <input data-popmechanic-mask="##" class="popmechanic-day" data-popmechanic-required data-popmechanic-input="customs.day" placeholder="day">
              </div>
              <div class="popmechanic-input">
                  <input data-popmechanic-mask="##" class="popmechanic-month" data-popmechanic-required data-popmechanic-input="customs.month" placeholder="month">
              </div>
              <div class="popmechanic-input">
                  <input data-popmechanic-mask="####" class="popmechanic-year" data-popmechanic-required data-popmechanic-input="customs.year" placeholder="year">
              </div>
3.5. Добавляйте чек-бокс для соглашения с политикой конфиденциальности, если это нужно:
<!-- Пример чек-бокса политики конфиденциальности с предзаполненной галочкой: -->

 <label class="popmechanic-checkbox-block">
<input type="checkbox" class="popmechanic-checkbox" checked 
data-popmechanic-input="customs.agreement" data-popmechanic-required value="1">
<div class="popmechanic-checkbox-check"></div>
Я согласен с Политикой конфиденциальности компании Н и хочу получать рассылку			</label>                 

<!-- data-popmechanic-required = без этого значения форму нельзя отправить-->
3.6. Правила верстки многошаговых поп-апов :
<!-- Для использования нескольких экранов поставьте на кнопку первого экрана href="#id2", где id2 присвоенное id экрана, который должен быть показан при нажатии на кнопку: -->

<button type="button" name="button" data-popmechanic-submit data-target="screen" href="#popmechanic-welcome-bday">Текст кнопки</button>
                 
    <div class="popmechanic-screen popmechanic-bday-screen" id="popmechanic-welcome-bday">
       Текст второго экрана, на который переходят при нажатии кнопки
     </div>
               
<!-- Пример показа разных блоков с учетом предыдущего выбора пользователя: -->

<!-- 1. Помечаем варианты выбора разными значениями: "PopMechanic.customs.questionN = 'adidas'" и "PopMechanic.customs.questionN = 'deha'": -->

<div class="popmechanic-title">Choose the colors you like</div>
<ul class="popmechanic-options">
<li class="popmechanic-option" rel="screen" href="#popmechanic-third" onclick="PopMechanic.customs.questionN = 'adidas'"> </li>
<li class="popmechanic-option" rel="screen" href="#popmechanic-third"onclick="PopMechanic.customs.questionN = 'deha'"></li> </div>


<!-- 2. Используем условие IF для выбора, какой блок показывать пользователю: -->

<div class="popmechanic-promocode_block"  data-popmechanic-if="PopMechanic.customs.questionN === 'adidas'">
<div class="popmechanic-promocode_text">We give <strong>5% promo code</strong> to all brand collections</div><div class="popmechanic-promocode">ADIDAS636A</div></div>

<div class="popmechanic-promocode_block" data-popmechanic-if="PopMechanic.customs.questionN === 'deha'">
<div class="popmechanic-promocode_text">We give <strong>5% promo code</strong> to all brand collections</div>
<div class="popmechanic-promocode">DEHA1366A</div></div>

<!-- 3. Блок с промокодом  ADIDAS636A покажется только тем, кто выбрал ранее вариант со значением "PopMechanic.customs.questionN === 'adidas'"-->
3.7. Параметры стилей для разного размера экранов:
НЕ используйте медиазапросы, если верстаете попап-форму.

Наши зарезервированные классы для стилей:
#popmechanic-form - все экраны формы
.popmechanic-mobile - мобильная версия формы
.popmechanic-tablet - планшетная версия формы
.popmechanic-thankyou - экран благодарности за подписку
popmechanic-invalid - класс для ошибок ввода, когда пользователь, например, хочет отправить пустое поле.
<!-- Стили для ссылок в форме в целом: -->
#popmechanic-form a {
    display: block;
}
<!-- Стили для элемента закрытия в форме в целом: -->
#popmechanic-form .popmechanic-close {
    font-size: 20px;
}

<!-- Стили для мобильной версии формы: -->
.popmechanic-mobile #popmechanic-form {
    width: 300px;
}
<!-- Стили для картинок мобильной версии формы: -->
.popmechanic-mobile #popmechanic-form img {
    width: 200px;
}
3.8. Кнопка вызова формы верстается как отдельный элемент:
<!-- Пример верстки кнопки: -->

<button class="popmechanic-widget">
<img src="https://static.popmechanic.io/media/user-media/mic/first/img/popmechanic-button-letter.png" class="popmechanic-button-letter">
</button>
<style>
.popmechanic-widget {
  width: 75px;
  height: 75px;
  background-color: #000;
  background-size: cover;
  cursor: pointer;
  border-radius: 10px;
  border: none;
  outline: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center; }
  .popmechanic-widget .popmechanic-button-letter {
    width: 48px;
    height: 36px; }    
    .popmechanic-mobile .popmechanic-widget {
  border-radius: 50%; }
    </style>
3.9. Добавление кастомных шрифтов в форму:
<!-- Рекомендуемый вариант:-->
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic-ext");

<!-- Возможный вариант:-->
@font-face {
  font-family: 'Gotham Pro';
  src: url("https://static.popmechanic.ru/media/fridays-video/fonts/GothamPro.eot");
  src: url("https://static.popmechanic.ru/media/fridays-video/fonts/GothamPro.eot?#iefix") format("embedded-opentype"), url("https://static.popmechanic.ru/media/fridays-video/fonts/GothamPro.woff") format("woff"), url("https://static.popmechanic.ru/media/fridays-video/fonts/GothamPro.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
3.10. Добавление видео в форму
НЕ добавляйте GIF анимацию размером больше 2 МБ
Используйте видеоформат для фона, если это необходимо:
	<video autoplay loop muted class="popmechanic-video popmechanic-video-desktop">
		<source src="https://static.popmechanic.ru/media/fridays-video/video/desktop_bg.mp4" type="video/mp4">
	</video>
3.11. Формат готового файла:
Если загружаете через нас:
Создаете архив .zip в котором:
- папка fonts со шрифтами (если необходимо)
- папка img с изображениями (до 2 мб, лучше сжимать)
- файл index.html с самой формой
- файл style.css со стилями

Смотрите примеры архивов ниже.

Если загружаете самостоятельно:
- отдельное поле для HTML
- отдельное поле для CSS
- поле для HTML и CSS кнопки вызова формы (если необходимо)
- поля для JS формы (если необходимо)

Изображения и шрифты также можете размещать на своих доменах или использовать наши при загрузке шаблонов.


3.
Примеры сверстанных файлов
Вы можете скачать и адаптировать готовые шаблоны.
Или же посмотреть примеры форм на вкладке "Шаблоны партнеров"

4.
Как добавлять формы в сервис?
Вариант 1. Добавить архивом
Вариант 2. Добавить самостоятельно
Форму в личный кабинет мы вам добавим сами в течении
3 дней и проверим соблюдение правил верстки.

При необходимости разметим важные переменные для редактирования.
Вы можете добавить форму сами себе в личный кабинет.
Данный функционал находится в бета-тесте.
Добавив свой архив верстки можно в ЛК:
Меню "Добавить форму" - "Custom" - "Загрузить свой HTML" или по ссылке.
Также вы можете отправить архив с готовым HTML-файлом на [email protected]
Добавив свой шаблон самостоятельно:
Запросите доступ к функционалу добавлению шаблонов, написав нам
на [email protected] или в чате.

В личном кабинете у вас появится раздел "Шаблоны партнеров"
6.
Как добавить редактируемые параметры?
Редактируемые параметры шаблона - набор параметров шаблона формы, которые маркетолог может сам заполнять визуально в личном кабинете Popmechanic не внося изменения в сам HTML шаблона.

Не является обязательным для шаблонов.
То есть, вы можете создать шаблон и не создавать редактируемые параметры.
НО! Рекомендуем добавить основные - текст, картинки, чтобы легко вносить изменения и править форму без привлечения верстальщика в дальнейшем.

Способы добавления редактируемых параметров шаблона:
1) при добавлении архивом
Укажите при загрузке архива формы какие параметры должны быть редактируемые визуально. Нас специалист сам создаст нужную разметку.

2) при самостоятельном добавлении через "Шаблоны партеров"
Следуйте инструкции ниже.
6.1. Логика создания редактируемых параметров:
1. Выделяете редактируемый элемент верстки и ставите вместо него переменную
Структура для всех переменных в верстке:
<%=text%>
2. Задаете её тип, имя и значение по умолчанию
Машинное имя: то, как вы пометили эту переменную в верстке.
Если в верстке на месте текста поставили <%=text%>, то машинное имя будет text

Имя: то, как маркетолог в шаблоне увидит название этой переменной.
Например, для <%=text%> это может быть "Текст заголовка"

Тип: какой тип данных в переменной, в данном случае Текст

Значение по умолчанию: то, что подставится в форму на месте переменной по умолчанию, например "Заголовок формы"
3. Маркетолог получает шаблон с возможностью редактировать данные в нем
Чем больше переменных вы создадите в шаблоне, тем проще его будет править в дальнейшем без изменения исходного шаблона.
6.2. Типы значений редактируемых параметров:
6.3. Примеры работы редактируемых параметров:
1) Текст - возможность изменять любое текстовое поле формы
У вас есть форма с текстом, но вы знаете, что маркетолог может поменять условия скидки или протестировать несколько вариантов текстов.
Исходный сверстанный вариант:
<div class="popmechanic-reset" id="popmechanic-form">
    <div class="popmechanic-main">
        <div class="popmechanic-content">
            <div class="popmechanic-header">
                Скидка -10%
            </div>
            <div class="popmechanic-text">
             только для подписчиков на 1 заказ
            </div> </div></div>  </div>
Для возможности редактирования заменяем в форме текст нашими параметрами с таким синтаксисом: <%=PARAMETR%>

Важно! Не используйте кириллицу, дефис или другие спец. символы в текстах параметров (исключение - нижнее подчеркивание)

Например, назовем наш кусок текста "Скидка 10%" - header, а текст "только для подписчиков на 1 заказ" - text.
Заменяем текстовые поля переменными с нашим синтаксисом:
<div class="popmechanic-reset" id="popmechanic-form">
    <div class="popmechanic-main">
        <div class="popmechanic-content">
            <div class="popmechanic-header">
<%=header%>          
  </div>
            <div class="popmechanic-text">
<%=text%>          
            </div> </div></div>  </div>
После этого заполняем информацию в Параметрах шаблона таким образом:
Маркетолог после такой разметки получит возможность визуально редактировать все тексты формы:
Совет!
Если делаете редактируемыми тексты формы, то добавляйте к ним еще поля для редактирования размера шрифта (на десктопе и мобильном), чтобы при изменении текста на более длинный, форма не плыла и её не приходилось поправлять.
2) Выбор цвета
В верстке помечаем:
<%=but_col1%> - цвет фона кнопок
<%=but_col2%> - цвет фона кнопок при наведении курсора
<%=but_font_col%> - цвет текста на кнопках

#popmechanic-form button {
    display: block;
    width: 350px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border: none;
    background: <%=but_col1%>;
    cursor: pointer;
    font-size: 14px;
    color:<%=but_font_col%>;
    letter-spacing: 3px; }
  #popmechanic-form button:hover {
    background: <%=but_col2%>; }
В параметрах Шаблона создаем новые параметры с типом Выбор цвета и задаем значения по умолчанию
3) Изображение
В верстке помечаем: <%=background_png%> - ссылку на изображение
Создаем новый параметр шаблона типа "Изображение" со значением по умолчанию.

#popmechanic-form .popmechanic-main { 
background: url(<%=background_png%>) no-repeat 0 0/cover; 
} 
5) Слайдер
В верстке помечаем нужные параметры:
#popmechanic-form .popmechanic-main {
    padding: <%=otstup1%>px <%=otstup2%>px <%=otstup3%>px;
          border-radius: <%=crug1%>px;
 font-size: <%=text_size%>px;
}
<%=otstup%> - отступы полей
<%=crug1%> - уровень скругления углов
<%=text_size%> - размер шрифта

В параметрах задаем тип поля "Слайдер", минимальное, максимальное значение и шаг.
Например, для скругления может быть min значение - 0, а max = 50 с шагом 1 и значением по умолчанию 2.
А если будем настраивать межстрочный интервал, то тут может быть min значение 1, max=3, а шаг 0.1.
6) Чекбокс
Вариант 1. Полностью скрыть элемент
В верстке помечаем элемент, который нам нужно дать возможность скрыть таким образом:

<!-- Машинное имя в данном случае будет showChekbox: -->
<% if (parseInt(showChekbox)) { %>
			<label class="popmechanic-checkbox-block">
					<input type="checkbox" class="popmechanic-checkbox" checked data-popmechanic-input="customs.agreement" data-popmechanic-required value="1">
					<div class="popmechanic-checkbox-check"></div>
					<%=pol_text%>
				</label>                        <% } %>
Вариант 2. При скрытии элемента на его место ставить другой кусок кода:
<!-- Пример, если хотим чекбокс при нажатии на который меняется содержание формы. Машинное имя в данном случае будет show1button: -->

<% if (parseInt(show1button)) { %>

<div class="popmechanic-submits">
<button type="button" name="button" class="popmechanic-submit" data-popmechanic-submit><%=text_but3%></button></div>
			
<% } else { %> 
			
<div class="popmechanic-submits">
<button type="button" name="button"  class="popmechanic-submit" data-popmechanic-submit><%=text_but1%></button>
<button type="button" name="button"  class="popmechanic-submit" data-popmechanic-submit><%=text_but2%></button></div>

<% } %>
7) Выбор из вариантов
В верстке помечаем элемент, который нам нужно дать возможность выбирать таким образом:
#popmechanic-form .popmechanic-text {
    font-family: <%=font1%>;
 }
Размечаем возможные варианты выбора таким образом:

7.
Как протестировать форму на сайте?
Что должно быть для теста формы на сайте:

1) Доступ в аккаунт в Popmechanic.io;

2) Установленный скрипт на сайте;
Скрипт находится на этой странице и там же внизу отображается список доменов, на которых он обнаружен.

3) Загруженный раннее шаблон
Может быть загружен вами самостоятельно и расшаренный на нужный аккаунт или нашим специалистом и добавлен на нужный аккаунт
Шаблон должен в разделе Custom в каталоге шаблонов появится вверху.

Вариант теста 1. Создать тестовую ссылку
1. Заходим на главную страницу ЛК и выбираем "Добавить форму" - вкладка Castom - нужный шаблон

2. В шаблоне нажимаем сохранить на этапе правки дизайна и текста.
Обратите внимание на вкладку "Поведение" - там будет набор параметров для вашего типа шаблона - анимация для попапа или сторона, к которой на экране нужно прижимать скроллбокс. Также там находятся параметры показа кнопки вызова шаблона.

3. На этапе "Условия показа" ничего не выбираем, а нажимаем на кнопку, которая появилась справа вверху "Проверить форму на сайте".
При нажатии на неё у вас в выпадаюшем списке появятся домены, на которых установлен скрипт сервиса.
Выберите нужный и получите тестовую ссылку.
Форма на ней будет отображена сразу после перехода.



Вариант теста 2. Запустить форму на одну страницу
1. Заходим на главную страницу ЛК и выбираем "Добавить форму" - вкладка Castom - нужный шаблон

2. В шаблоне нажимаем сохранить на этапе правки дизайна и текста. Просмотрите раздел "Поведение" - там параметры, где именно будет показана форма на экране и с какой анимацией.

3. На этапе "Условия показа" добавьте простое условие для теста. Например, провел 10 секунд на сайте:


4. На этапе "Управление таргетингом" выберите одну страницу сайта для тестового показа или используйте такую конструкцию *pm-test*
Форма будет показываться только на url сайта, которые содержат pm-test.
Просто добавьте это значение в конце ссылки, чтобы получить тестовый вариант: site.com/#pm-test

Можете установить -1 день до повторного показа - так форма будет показываться даже тем, кто её видел, что удобно для теста.
После теста параметры не забудьте поменять на необходимые.

5. Включите форму:


Форма будет показываться на заданных в таргетинге страницах.

Если у вас что-то не получилось:
- проверьте установлен ли код трекера на сайте и отображается ли домен на этой странице;
- проверьте, есть ли условия показа формы;
- проверьте, включена ли форма;
- зайдите с другого браузера по нужной ссылке или в режиме Инкогнито.

- напишите нам в поддержку в чат справа внизу в личном кабинете - постараемся помочь :)