Creating Pop-Up Forms on Your Website

SharpSpring forms are one of the ways you can track leads on a drip campaign. This article will detail how to set your form to pop up on your website when a visitor clicks a link or button.

The following user roles can create forms:

• Administrators
• Marketing Managers

Article Contents

• Adding Pop-Up Forms
• Ready to Learn More?

Adding Pop-Up Forms

To create and add a pop-up form to your website, do the following:

1. In SharpSpring's top toolbar, click Content > Forms.
2. Create or edit a form.
3. Copy the form embed code.
4. In a new browser tab, locate the HTML of the page on your website. 
5. Paste the following code. The div id named popup can be replaced with any label you like:
   

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

6. Create a link or add a button on your website.
7. 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>

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

Ready to Learn More?

• Creating Pop-Up Forms on Landing Pages
• Five Forms to Add to Your Site
• SharpSpring Forms Overview