How to Create a Custom Pop-up or an Embedded Block Form

To create a custom Form:

1. Follow the rules below to create html code;
2. Follow the steps below to upload the html code to the project.

Rules

1. All the screens of a form:

Should be wrapped in <div class="popmechanic-reset" id="popmechanic-form">

<!-- The whole form is wrapped in an individual div with the class "popmechanic-reset" and id="popmechanic-form" -->
<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>

<!-- Add data-popmechanic-submit to the URLs to enable their click count: -->
            <a href="https://app.popmechanic.io" target="_blank" name="button" class="popmechanic-button" data-popmechanic-submit>
            <span class="popmechanic-telegram-icon"></span>
            Button
            </a>
        </div>
    </div>

<!-- A specific class to describe elements that close the form: -->
    <div class="popmechanic-close" data-popmechanic-close>×
    </div>
</div>

2. For Subscription Forms

Use popmechanic-main class for the main screen a customer sees first and popmechanic-thankyou class for a screen, which is displayed after a customer fills in a form.

<div class="popmechanic-reset" id="popmechanic-form">
    <div class="popmechanic-main">
        <div class="popmechanic-content">
            <div class="popmechanic-text">Text</div>
            <div class="popmechanic-title">Header</div>
        </div>
    </div>
</div>

Use popmechanic-inputs to create input fields:

<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 text</button>
</div>

Additionally, insert a screen with popmechanic-thankyou class. A customer will see it after subscribing:

<div class="popmechanic-thankyou">
    <div class="popmechanic-title"><Thank you!></div>
        <div class="popmechanic-text"><A message has been sent to you></div>
</div>
<div class="popmechanic-close" data-popmechanic-close>×</div>

Add the following piece of code to hide screens and display them only when required in forms with multiple screens or with a Thank You screen.

The code below is used to avoid displaying such screens all at once:

#popmechanic-form .popmechanic-thankyou {
    display: none; }

.popmechanic-success #popmechanic-form .popmechanic-main {
    display: none; }

.popmechanic-success #popmechanic-form .popmechanic-thankyou {
    display: block; }

3. To count clicks on links

Add data-popmechanic-submit:

<a href="https://app.popmechanic.io" target="_blank" name="button" class="popmechanic-button" data-popmechanic-submit>

4. Use special variables for input fields

Email field:

input type="text" class="popmechanic-input" data-popmechanic-input="email" placeholder="Email"

First name field:

input type="text" class="popmechanic-input" data-popmechanic-input="first_name" placeholder="First name"

Phone number field:

input type="text" class="popmechanic-input" data-popmechanic-required data-popmechanic-input="phone" placeholder="Tel."

Last name field:

input type="text" class="popmechanic-input" data-popmechanic-input="last_name" placeholder="Last name" 

Full name field:

input type="text" class="popmechanic-input" data-popmechanic-input="name" placeholder="First and Last name"

Any other custom fields:

Users can create custom fields using the customs.your custom field name:

data-popmechanic-input="customs.year" 
data-popmechanic-input="customs.female"

Use them to collect subscribers’ answers for future segmentation.

Input mask

In the input tag use data-popmechanic-mask="####" where the four hash signs (####) stand for four chars.

Use the data-popmechanic-mask="##.##.####" to enter a full date, separated by dots.

Value of the elements that close screens

Insert data-popmechanic-close into all clickable elements that close your form.

Example:

<a class="popmechanic-button" data-popmechanic-close>Close</a>

Examples

An example of three input fields:

<div class="popmechanic-inputs">
  <div class="popmechanic-input">
    <input type="text" class="popmechanic-name" data-popmechanic-input="name" placeholder="Name"
    />
  </div>
  <div class="popmechanic-input">
    <input type="text" class="popmechanic-phone" data-popmechanic-input="phone" placeholder="Tel."
    />
  </div>
  <div class="popmechanic-input">
    <input type="email" class="popmechanic-email" data-popmechanic-input="email" placeholder="Email"
    />
  </div>
</div>

An example of two buttons to select your gender and save your data:

<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>

An example of checkboxes:

<h3 class="popmechanic-header-heading">Choose your interests:</h3>

<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>
    </ul>>
</div>>

An example of the birthdate field:

<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>

An example of a checkbox for Privacy policy. The field is pre-checked:

<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>
    I agree to the Privacy Policy of the company N and agree to receive their emails
</label> 

<!-- data-popmechanic-required = you cannot submit the form if this field is not checked-->

How to Create Multi-screen Pop-ups:

To have several consecutive screens, add href="#id2″ to the button on the first screen. id2 must be the id of the next screen to open:

<button type="button" name="button" data-popmechanic-submit data-target="screen" href="#popmechanic-welcome-bday">Button text</button>

<div class="popmechanic-screen popmechanic-bday-screen" id="popmechanic-welcome-bday">
Text of the second screen to open after clicking this button
</div>

Sample screen with embedded blocks that the system displays depending on the previous user choice:

<!-- 1. Choices have different values: "PopMechanic.customs.questionN = 'adidas'" and "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. Use IF to select the block to display: -->

<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. The block with the ADIDAS636A promo code will pop up only for the users who selected the option with the value "PopMechanic.customs.questionN === 'adidas'"-->

Parameters of styles for various screens:

DO NOT use media requests when creating a pop-up form.

The following classes are reserved to be used for styles:

• #popmechanic-form — all the screens of a form
• .popmechanic-mobile — a mobile version of a form
• .popmechanic-tablet — a tablet version of a form
• .popmechanic-thankyou — the Thank you for subscription screen

<!-- Styles for all URLs: -->
#popmechanic-form a {
    display: block;
}

<!-- Styles for all window close elements: -->
#popmechanic-form .popmechanic-close {
    font-size: 20px;
}

<!-- Styles for the mobile version: -->
.popmechanic-mobile #popmechanic-form {
    width: 300px;
}

<!-- Styles for images in the mobile version: -->
.popmechanic-mobile #popmechanic-form img {
    width: 200px;
}

The call-to-action button should be made as a specific element.

Sample button:

<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>

How to add custom fonts:

Recommended:

@import url("https://help.mindbox.ru/airee_fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic");
@import url("https://help.mindbox.ru/airee_fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic-ext");

Alternative:

@font-face {
    font-family: 'Gotham Pro';
    src: url("https://help.mindbox.ru/airee_static.popmechanic.ru/media/fridays-video/fonts/GothamPro.eot");
    src: url("https://help.mindbox.ru/airee_static.popmechanic.ru/media/fridays-video/fonts/GothamPro.eot?#iefix") format("embedded-opentype"), url("https://help.mindbox.ru/airee_static.popmechanic.ru/media/fridays-video/fonts/GothamPro.woff") format("woff"), url("https://help.mindbox.ru/airee_static.popmechanic.ru/media/fridays-video/fonts/GothamPro.ttf") format("truetype");
    font-weight: normal;
    font-style: normal; }*

How to add video content

DO NOT add GIF animation over 2 Mb
You can use the video format as a background:

<video autoplay loop muted class="popmechanic-video popmechanic-video-desktop">
    <source src="https://help.mindbox.ru/airee_static.popmechanic.ru/media/fridays-video/video/desktop_bg.mp4" type="video/mp4">
</video>

How to Add Forms into Maestra

You can add a form yourself. Go to Campaigns and select the form or create a new campaign for your pop-ups.
Open the campaign:

Click Add —> Embedded block / Pop-up:

Click + Upload custom template:

Enter your Template name and select your Form type:
и
Lead generation: use it to collect an email, a phone number, launch a survey, or get any other details through your form.
Notification: use it to pop up a notification, stimulate subscription to web pushes, display a promo code, or share details of promotions.
Select your Form position:

Check Multi-window form to create a multi-screen form and check Contains thank you window to insert a Thank you screen (for lead generation type of a form):

Multi-window form: This is a form with multiple screens. This does not count the Thank you screen that pops up after the customer submits their contact details. For example, the first screen is for the customer to enter their emails, the second—to specify their favorite category. Or, the first screen asks ’Looking for a Promo Code?’ and prompts Yes, whereas the second screen pops up after clicking and displays the promo code.
A Thank you screen is a window that pops up after submitting contact details or other information that the customer enters. It is usually a window to say thanks for subscribing and show contact details as well as to explain next steps. For example, there can be : "A promo code was sent to you by email. Please open it, so you can get a 10% discount off your next order".
Attention:
When you click Create pop-up, the system may display the errors at this point. This is the list of elements you need to successfully create a form.

Error: No button to submit. It means that your HTML code needs a button with the data-popmechanic-submit class.
Error: No input fields. It means that your HTML code needs fields of the class data-popmechanic-input. Applicable only to forms that collect contact details.

<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 text</button>
</div>

Insert your HTML code:

Insert your CSS code:

This instruction is available by clicking How to create custom HTML.

Click Create pop-up:

When you click it, the system automatically creates a pop-up / embedded block and a template. Later, you can use them to create new pop-ups / embedded blocks as if they were templates in the catalog.
Go to Custom templates to view your uploaded forms.

If you have any questions, feel free to contact our support chat by clicking the right button below.