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 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

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"

signupbox0

 

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.

 

 

 

 

 

 

Pricing Calculator

Pricing Calculator

Total: $10 monthly