Creating Pop-Up Forms on Landing Pages

With SharpSpring’s landing page builder, you can edit the landing page's code to fully customize your website. This article will detail how to create a pop-up window with a form on your landing page.

The following user roles can create landing pages:

• Administrators
• Marketing Managers

Article Contents

• Preparing the Landing Page
• Adding Form Code
• Ready to Learn More?

Preparing the Landing Page

To create a landing page that utilizes pop-up forms, do the following:

Adding Form Code

Once the landing page has been created and readied, do the following to add pop-up form code:

1. In the left panel, click    Edit Code from the
   menu on the left.
2. Paste the following code on an empty line in
   the Body tab:
   
   

   <div id="popup" class="modalDialog">
        <div> <a href="#close" title="Close" class="close">X</a>
   
   <!-- PASTE YOUR FORM EMBED CODE BELOW!   -->
   
   
   <!-- PASTE FORM EMBED CODE ABOVE!   -->      
   
   </div>
         </div>

3. Locate the PASTE YOUR FORM EMBED CODE
   BELOW! text within the code.
4. Paste your form's embed code between the
   PASTE YOUR FORM EMBED CODE ABOVE!
   and PASTE YOUR FORM EMBED CODE
   BELOW! text.
5. Click Save.
6. Click the Head tab.
7. Paste the following into the Head tab:
   
   

   <style>
   .modalDialog {
     position: fixed;
     font-family: Arial, Helvetica, sans-serif;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: rgba(0, 0, 0, 0.8);
     z-index: 9999;
     overflow-y: scroll;
     overflow: scroll;
     display: none;
   }
   .modalDialog:target {
     display: block;
   }
   .modalDialog > div {
      width: 400px;
      position: relative;
      margin: 10% auto;
      padding: 5px 20px 13px 20px;
      border-radius: 10px;
      background: #fff;
   }
   .close {
      background: #606061;
      color: #FFFFFF;
      line-height: 25px;
      position: absolute;
      right: -12px;
      text-align: center;
      top: -10px;
      width: 24px;
      text-decoration: none;
      font-weight: bold;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      -moz-box-shadow: 1px 1px 3px #000;
      -webkit-box-shadow: 1px 1px 3px #000;
      box-shadow: 1px 1px 3px #000;
   }
   .close:hover {
      background: #00d9ff;
   }
   .noscroll {
    overflow: hidden;
   }
   </style>

8. Click Save and Close.

Ready to Learn More?

• Adding Forms to Landing Pages
• Adding Call-to-Action Buttons to Landing Pages
• Creating Dynamic Landing Pages