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.
Article Contents
|
|
|
Available with: |
|
|
|
Marketing Automation |
✓ |
|
|
CRM Ultimate |
|
|
|
CRM PRO |
|
|
|
CRM Free |
|
|
|
|
|
|
|
Toolbar: |
|
|
 |
|
|
|
|
|
Users: |
|
|
|
Administrators |
✓ |
|
|
Company Managers |
✓ |
|
|
Marketing Managers |
✓ |
|
|
Sales Managers |
|
|
|
Salespersons |
|
|
|
Jr. Salespersons |
|
|
|
Preparing the Landing Page
To create a landing page that utilizes pop-up forms, do the following:
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.
Once the landing page has been created and readied, do the following to add pop-up form code:
|
|
|
- Click
Edit Code in the left menu.
- 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>
- Locate the PASTE YOUR FORM EMBED CODE BELOW! text within the code.
- Paste your form's embed code between the PASTE YOUR FORM EMBED CODE ABOVE! and PASTE YOUR FORM EMBED CODE BELOW! text.
- Click Save.
- Click the Head tab.
- 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>
- Click Save and Close.
|
|
|