How to embed a signup box into your Squarespace website.
This will allow your website visitors to fill out a form on your Squarespace website and their information will automatically go into your AllProWebTools CRM. You can also be notified by the AllProWebTools smartphone app and AllProWebTools can auto-respond to your new lead with an email drip campaign.
1. Copy this code to a text file on your computer:
<div id="my-iframe" style="text-align: center; -webkit-overflow-scrolling: touch; overflow: auto;"><iframe src="put web address here"></iframe></div>
2. Create your signup box in your AllProWebTools account.
3. Create a webpage in your AllProWebTools account and place your signup box on it. From the main menu go to "Website" and then choose "My Webpages" to create the page. Paste your signup box code on the page (it will look like this: # |-SignUpBox|1-| #)
4. Go to page settings and turn off the theme
5. Go to "Settings" from the main menu and click on "Administrator". Then click on "Stylesheet" and paste the following at the bottom of the AllProWebTools stylesheet:
.leadbox1 select {
min-height: 40px;
padding: 0 15px;
margin: 5px;
display: block;
width: 18rem;
}
.leadbox1 input {
min-height: 40px;
padding: 0 15px;
margin: 5px;
display: block;
width: 16rem;
}
.leadbox1 label {
padding: 0 5px;
}
.leadbox1 button {
height: 35px;
width: 18.2rem;
padding: 0 15px;
margin: 5px;
background-color: #222;
color: white;
}
6. Save the AllProWebTools stylesheet.
6b. Now choose "No Theme Header" from the "Theme Editor" and add this line directly above where it says "</head>":
- <link rel="stylesheet" type="text/css" href="/content/templates/default/css/style.css" media="screen">
7. Test your new AllProWebTools page
8. Copy the entire URL from your web browser and paste it into the text file on your computer by replacing where it says "put web address here"
9. Login to your Squarespace account and follow these instructions to add the following to your Squarespace stylesheet:
#my-iframe iframe {
height: 400px;
width: 100%;
margin: 0;
padding: 0;
border-style: solid;
border-width: 0px;
}
10. Now you can edit your Squarespace webpage where you would like your signup box to appear.
11. Move your mouse around the center of the page and click the handlebar
12. A box will popup and you can click on "Embed". Learn more here
13. Next click the symbol </>
14. Now paste the code from your textfile and then click "set". (If you get an error message, you can safely ignore it)
15. Now you can save the page
16. Now you can go to your new webpage and you will see your signup box
17. If you want to add or remove questions from your signup box, you can make the changes in your AllProWebTools account and they will instantly update on your foursquare website. You only need to follow the instructions in this tutorial once per signup box on your foursquare website.