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.
|
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: |
Note: SharpSpring offers Professional Services to assist with custom coding.
|
- In SharpSpring's top toolbar, click Content > Forms.
- 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
namedpopup
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.
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
.