Правила верстки попапов и встроенных форм

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

HTML

Общие правила

  • В начало верстки не требуется вставлять <!DOCTYPE html> или <header>. верстка начинается сразу с <div>, с классом "popmechanic-reset" и id="popmechanic-form”.

  • Главный экран формы подписки оборачивается классом "popmechanic-main"

  • Используйте "data-popmechanic-close" во всех элементах, при клике на которые, форма должна закрываться. Никаких дополнительных скриптов прописывать не нужно:

<!-- Вся форма обернута в отдельный div с классом "popmechanic-reset" и id="popmechanic-form" -->
        <div class="popmechanic-reset" id="popmechanic-form">
            <div class="popmechanic-main">
                <div class="popmechanic-content">
                    <div class="popmechanic-title">
                        Заголовок
                    </div>
                    <div class="popmechanic-sub-title">
                        Текст
                    </div>
        				</div>
        		</div>
        		<!-- Отдельный класс для элементов закрытия формы: -->
            <div class="popmechanic-close" data-popmechanic-close>×
            </div>
        </div>

Для форм сбора контактов

  • Форма сбора контактов по определению должна передавать некоторые данные клиента в Mindbox, поэтому в ней должно быть как минимум одно поле ввода и кнопка подтверждения:
<div class="popmechanic-inputs">
        		<input type="email" class="popmechanic-input" data-popmechanic-input="email" placeholder="Email" required>
        		<button type="button" name="button" class="popmechanic-button" data-popmechanic-submit>Текст кнопки</button>
        </div>

Подробнее о полях ввода и валидации.

  • В форме сбора контактов можно добавить экран благодарности и обернуть его классом "popmechanic-thankyou"
<div class="popmechanic-thankyou">
        		<div class="popmechanic-title">Спасибо!</div>
            <div class="popmechanic-sub-title">Уже отправили вам письмо</div>
            <div class="popmechanic-close" data-popmechanic-close>×
            </div>
        </div>

Пример готового кода

<!-- Вся форма обернута в отдельный div с классом "popmechanic-reset" и id="popmechanic-form" -->
        <div class="popmechanic-reset" id="popmechanic-form">
            <div class="popmechanic-main">
                <div class="popmechanic-content">
                    <div class="popmechanic-title">
                        Заголовок
                    </div>
                    <div class="popmechanic-sub-title">
                        Текст
                    </div>
        						<!-- Поле ввода и кнопка формы: -->
        						<div class="popmechanic-inputs">
        					    <input type="email" class="popmechanic-input" data-popmechanic-input="email" placeholder="Email" required>
        					    <button type="button" name="button" class="popmechanic-button" data-popmechanic-submit>Текст кнопки</button>
        						</div>
        				</div>
        		</div>
        		<!-- Отдельный класс для элементов закрытия формы: -->
            <div class="popmechanic-close" data-popmechanic-close>×
            </div>
            <div class="popmechanic-thankyou">
                <div class="popmechanic-title">Спасибо!</div>
                <div class="popmechanic-sub-title">Уже отправили вам письмо</div>
        		<!-- Отдельный класс для элементов закрытия формы: -->
                <div class="popmechanic-close" data-popmechanic-close>×
                </div>
            </div>
        </div>

Для информационных форм

  • Если ваша форма предполагает наличие ссылки или кнопки, клики по которым нужно считать, то добавьте в них "data-popmechanic-submit"
<button type="button" name="button" class="popmechanic-button" data-popmechanic-submit>Текст кнопки</button>

Если в форме будет несколько кнопок с этим параметром, в отчете все клики будут объединены.

Пример готового кода

<!-- Вся форма обернута в отдельный div с классом "popmechanic-reset" и id="popmechanic-form" -->
        <div class="popmechanic-reset" id="popmechanic-form">
            <div class="popmechanic-main">
                <div class="popmechanic-content">
                    <div class="popmechanic-title">
                        Заголовок
                    </div>
                    <div class="popmechanic-sub-title">
                        Текст
                    </div>
        					  <!-- На элементы, клики по которым нужно считать добавляйте data-popmechanic-submit -->
        					  <button type="button" name="button" class="popmechanic-button" data-popmechanic-submit>Текст кнопки</button>
        				</div>
        		</div>
        		<!-- Отдельный класс для элементов закрытия формы -->
            <div class="popmechanic-close" data-popmechanic-close>×
            </div>
        </div>

Стили CSS

Параметры стилей для разного размера экранов

Не используйте медиазапросы, если верстаете попап-форму. Скрипт Mindbox вешает на контейнер формы классы "popmechanic-desktop", "popmechanic-tablet", "popmechanic-mobile" для адаптации внешнего вида под устройство.

Наши зарезервированные классы для стилей:

  • #popmechanic-form — все экраны формы
  • .popmechanic-mobile — мобильная версия формы
  • .popmechanic-tablet — планшетная версия формы
  • .popmechanic-thankyou — экран благодарности за подписку

Для кастомных стилей в CSS формы используйте #popmechanic-form в начале селектора как в примерах ниже:

<!-- Стили для ссылок в форме в целом: -->
        #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;
        }

Добавление кастомных шрифтов в форму

Рекомендуемый вариант:

@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");

Добавление видео в форму

Не добавляйте 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>

Больше информации по использованию видео в форме в статье.

Для многоэкранных форм

Если форма многоэкранная или содержит экран благодарности, нужно скрыть все экраны кроме первого при отрисовке формы.

<!-- Экран благодарности скрыт при показе формы -->
        #popmechanic-form .popmechanic-thankyou {
            display: none; }
        
        <!-- Первый экран скрывается, когда данные успешно отправлены и показывается экран благодарности -->
        .popmechanic-success #popmechanic-form .popmechanic-main {
            display: none; }
        
        .popmechanic-success #popmechanic-form .popmechanic-thankyou {
            display: block; }
        
<!-- Аналогично скрываются все экраны кроме первого в многоэкранной форме -->
        #popmechanic-form .second-screen {
          display: none;
        }

Пример

В качестве примера опишем стили кнопки формы

<!-- Общие стили кнопки для ПК, мобильного вида -->
        #popmechanic-form .popmechanic-button {
        width: 110px;
        height: 30px;
        background: #4fad00;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 30px;
        cursor: pointer;
        outline: none;
        border: none;
        text-decoration: none;
        -webkit-transition: all .3s;
        transition: all .3s;
        }
        <!-- Изменение стиля кнопки при наведении -->
        #popmechanic-form .popmechanic-button:hover {
        color: #4fad00;
        background: #fff;
        }
        <!-- Изменение стиля кнопки при отрисовке на мобильном устройстве -->
        .popmechanic-mobile #popmechanic-form .popmechanic-button {
        width: 120px;
        height: 25px;
        font-size: 12px;
        line-height: 10px;
        }
Как использовать попапы, не раздражая клиентов. Какие ошибки совершают бренды при создании попапов и как сделать, чтобы этот инструмент приносил пользу и клиенту, и компании.
Предыдущая
Как создать собственный шаблон формы для сбора кликов или информирования клиентов
Следующая
Поля ввода и валидация данных