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.
Article Contents
|
|
|
Available with: |
|
|
| |
Marketing Automation |
✓ |
|
| |
CRM Ultimate |
✓ |
|
| |
CRM PRO |
✓ |
|
| |
CRM Free |
✓ |
|
| |
|
|
|
| |
Toolbar: |
|
|
 |
| |
|
|
|
| |
Users: |
|
|
| |
Administrators |
✓ |
|
| |
Company Managers |
✓ |
|
| |
Marketing Managers |
✓ |
|
| |
Sales Managers |
|
|
| |
Salespersons |
|
|
| |
Jr. Salespersons |
|
|
| |
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, do the following:
- Click Forms in SharpSpring's top toolbar.
- Create or edit a form.
- Copy the form embed code.
- In a new browser tab, locate the HTML of the page on your website.
- 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>
- Create a link or add a button on your website.
- 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>
- Paste your form's embed code between the PASTE ABOVE and PASTE BELOW text in the supplied code from Step 5.
|
|
|
| |
Note: 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.
|
