Creating Pop-Up Forms on Landing Pages

Article Contents

• Preparing the Landing Page
• Adding Form Code

1. Click Forms in SharpSpring's left toolbar.
2. Create or edit a form.
3. Click Landing Pages in SharpSpring's left toolbar.
4. Create or edit a landing page.
5. Add a button to the landing page.
6. Click the button that was just added.
7. Type #popup in the the Set a Custom URL field in the right panel.

Click to enlarge.

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.

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" class="modalDialog">
    <div>
     <a href="#close" title="Close" class="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.
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;
    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>

8. Click Save and Close.