Guidelines for Coding Pop-ups and Embedded Forms

  • Updated on Mar 31, 2024
  • Published on May 29, 2023
  • 3 minute(s) read
Prev Next

Each form’s layout depends on the form type, i.e., whether it collects contacts or clicks. In this guide, we’ll go over some common principles for both layouts.

HTML

General guidelines

  • You can start your layout with <div>, with "popmechanic-reset" and id="popmechanic-form" classes. The <!DOCTYPE html> or <header> tags are not required.
  • The "popmechanic-main" class wraps the main screen of the subscription form.
  • Any element that is used to close a form should use "data-popmechanic-close". No additional scripts are needed:

<!-- The form is entirely wrapped in an individual div of the "popmechanic-reset" class and id="popmechanic-form" -->
<div class="popmechanic-reset" id="popmechanic-form">
  <div class="popmechanic-main">
      <div class="popmechanic-content">
          <div class="popmechanic-title">
              Header
          </div>
          <div class="popmechanic-sub-title">
              Text
          </div>
      </div>
  </div>
  <!-- A specific class to describe elements that close the form: -->
  <div class="popmechanic-close" data-popmechanic-close>×
  </div>
</div>

Forms that collect contacts

As contact collection forms send some customer details to Maestra, they should contain at least one input field and one confirmation button:


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

More on input and validation fields

In your contact collection form, you can add a Thank You screen and wrap it in the "popmechanic-thankyou" class:


<div class="popmechanic-thankyou">
		<div class="popmechanic-title">Thank you!</div>
    <div class="popmechanic-sub-title">An email was sent to you</div>
    <div class="popmechanic-close" data-popmechanic-close>×
    </div>
</div>

Ready-to-use example:


<!-- The entire form is wrapped in an individual div with the "popmechanic-reset" class and id="popmechanic-form" -->
<div class="popmechanic-reset" id="popmechanic-form">
  <div class="popmechanic-main">
      <div class="popmechanic-content">
          <div class="popmechanic-title">
              Header
          </div>
          <div class="popmechanic-sub-title">
              Text
          </div>
          <!-- Form input field and button: -->
          <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 text</button>
          </div>
      </div>
  </div>
  <!-- A specific class to describe elements that close the form: -->
  <div class="popmechanic-close" data-popmechanic-close>×
  </div>
  <div class="popmechanic-thankyou">
      <div class="popmechanic-title">Thank you!</div>
      <div class="popmechanic-sub-title">An email was sent to you</div>
  <!-- A specific class to describe elements that close the form: -->
      <div class="popmechanic-close" data-popmechanic-close>×
      </div>
  </div>
</div>

Data submission forms

If you need to count clicks on your embedded form’s URL or button, add "data-popmechanic-submit" to this URL/button.


<button type="button" name="button" class="popmechanic-button" data-popmechanic-submit>Button text</button>

If you have several buttons with this parameter in your form, all click counts will be aggregated in the report.

Ready-to-use example:


<!-- The entire form is wrapped in an individual div with the "popmechanic-reset" class and id="popmechanic-form" -->
<div class="popmechanic-reset" id="popmechanic-form">
  <div class="popmechanic-main">
      <div class="popmechanic-content">
          <div class="popmechanic-title">
              Header
          </div>
          <div class="popmechanic-sub-title">
              Text
          </div>
          <!-- Add data-popmechanic-submit to all the elements that need a click count -->
          <button type="button" name="button" class="popmechanic-button" data-popmechanic-submit>Текст кнопки</button>
      </div>
  </div>
  <!-- An individual class to wrap elements that close the form -->
  <div class="popmechanic-close" data-popmechanic-close>×
  </div>
</div>

CSS styles

Style parameters to fit various screen sizes

Avoid using media requests to create a pop-up form. Maestra’s script uses the "popmechanic-desktop", "popmechanic-tablet", and "popmechanic-mobile" classes in the pop-up container to adapt it to different devices.

Classes reserved for styles:

  • #popmechanic-form — all the form screens;
  • .popmechanic-mobile — the mobile version of a screen;
  • .popmechanic-tablet — the desktop form version;
  • .popmechanic-thankyou — the "Thank You For Subscribing" screen.

To create custom CSS form styles, place #popmechanic-form at the beginning of the selector as shown below:


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

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

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

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

Adding custom fonts to your form

Recommended:


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

Adding a video to your form

Limit your GIF animation by 2 MB.
The video can be used as a background for the form:


<video autoplay loop muted class="popmechanic-video popmechanic-video-desktop">
    <source src="Paste video link here" type="video/mp4">
</video>

For more information on how to handle video in your forms refer to How to Create a Pop-Up with a Video.

Multiscreen forms

When you design a multiscreen form or a form with a Thank You screen, hide all the screens except the first one.


<!-- The form is displayed with the Thank You screen hidden -->
#popmechanic-form .popmechanic-thankyou {
  display: none; }

<!-- The first screen is hidden once the data is successfully submitted, and the Thank You screen is displayed -->
.popmechanic-success #popmechanic-form .popmechanic-main {
  display: none; }

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



<!-- Similarly, a multiscreen form in which all screens are hidden except the first -->
#popmechanic-form .second-screen {
  display: none;
}

Example:

The form button styles are described below


<!-- General button styles for desktop and mobile versions -->
#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;
  }
  <!-- Changing a style when hovering over a button -->
  #popmechanic-form .popmechanic-button:hover {
  color: #4fad00;
  background: #fff;
  }
  <!-- Changing a style when designing a button on a mobile device -->
  .popmechanic-mobile #popmechanic-form .popmechanic-button {
  width: 120px;
  height: 25px;
  font-size: 12px;
  line-height: 10px;
  }