Creating Pop-Up Forms on Your Website

Set your form to pop up when a visitor clicks on a link or button on your website

Adding Pop-Up Forms

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.

To create and add a pop-up form to your website, create or edit a form and copy the form embed code:
 

1. In a new browser tab, locate the HTML of the page on your website. 
2. Paste the following code. The div id named popup can be replaced with any label you like:

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

3. Create a link or add a button on your website.
4. Set #popup as the URL location for this link or button. Refer to the following example code:

   <a href="#popup">This is a popup link</a>

5. Paste your form's embed code between the PASTE ABOVE and PASTE BELOW text in the supplied code from Step 5.

When adding pop-up forms, be aware that you can also have multiple pop-up forms on a single page by creating unique IDs for each div class modalDialog

Questions?