содержание x
    Правила верстки попапов и встроенных форм
    • 29 May 2023
    • 3 минуты
    • Темная тема
      Светлая тема
    • формат pdf
    содержание

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

    • Обновлено 29 May 2023
    • 3 минуты
    • Темная тема
      Светлая тема
    • формат pdf
    Article Summary

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

    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;
}
    Как использовать попапы, не раздражая клиентов. Какие ошибки совершают бренды при создании попапов и как сделать, чтобы этот инструмент приносил пользу и клиенту, и компании.
    What's Next