Creating Pop-Up Forms on Landing Pages

Tip: Are you looking for information about Constant Contact’s Email and Digital Marketing product? This article is for Constant Contact’s Lead Gen & CRM product. Head on over to the Email and Digital Marketing articles by clicking here. Not sure what the difference is? Read this article.

Preparing the Landing Page

To create a landing page that utilizes pop-up forms, first create a form. Next, create or edit a landing page and add a button to the landing page. Then:

1. Click the button that was just added.
2. Type #popup in the the Set a Custom URL field in the right panel.
   
   
    

Adding Form Code

Pop-up forms can be used in many ways. They can be something similar to a modal window in the corner of the computer screen, or they can serve as an overlay over an entire site page. All it takes is a little coding.

Note: Constant Contact offers Professional Services to assist with custom coding.

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

1. Click    Edit Code in the left menu.
2. Paste the following code on an empty line in the Body tab:
    

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

   
   
    
3. Locate the PASTE YOUR FORM EMBED CODE BELOW! text within the code and paste your form's embed code between the PASTE YOUR FORM EMBED CODE BELOW! and PASTE YOUR FORM EMBED CODE ABOVE! text.
4. Click Save.
   
   
    
5. Click the Head tab.
6. 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;
    max-width: 100%;
    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>

7. Click Save and Close.
   
   

Did this article answer your question?