5 Squarespace Programming Hacks to Grow Your Following

1. Introduction & Overview: Welcome to five Squarespace programming hacks to grow your audience. If you have an e-commerce site, online portfolio, or a blog, then you probably know that a robust e-mail list is among the most powerful marketing tools. Many of us entice our audience to subscribe by offering free downloads, coupon codes, and exclusive offers that only our mailing list is eligible for. Squarespace websites have some of the most elegant and user-friendly templates out there, and they're especially popular with creative freelancers for just that reason. Sometimes though, the widgets and blocks used to build the sites require creative workarounds to get just the function and level of customization that you want. In this class, I will share five invaluable programming tips for capturing your site visitors' email addresses, and promoting free materials and exclusive offers. All these techniques are possible with only a very basic working knowledge of Squarespace, and they work with all Squarespace templates. Only two of the techniques require custom code, but I will literally give you the exact code you need to copy and paste so the process is entirely foolproof. The specific techniques I'll teach you include, how to add code to your contact form, to redirect visitors to accustom thank you page. People who contact you through your site or a captive audience. You're losing out on the perfect opportunity to share more with them about your business, if you stick with Squarespace's default contact form, confirmation window. I'm also going to show you how to offer free downloadable content to your audience via buttons and text links. I'll show you how to capture visitors' e-mail addresses in exchange for downloads and coupon codes. I'll also show you how to style the text within your form pop-up windows and newsletter confirmation fields, which will add a professional consistent look to your site, and be cohesive with your branding. Lastly, I'll show you how you can use a cover page to offer free downloads or coupons in exchange for e-mail sign-ups and then redirect those forms submissions to the trackable custom thank you page you will have made in step 1. To follow along in this class, you'll need to have a Squarespace account already, and at least the very start of a website. It can be as simple site though, even a work in progress. You'll also need very basic working knowledge of Squarespace's back-end. However, you do not need to be a Squarespace pro or have any experience with coding or programming. If you need to learn the basics of Squarespace before taking this class, I highly recommend Squarespace's own Skillshare class called Personal Branding Essentials. You can find the live link to this Squarespace course in the above section of this class. This class is all about networking. When deciding on what the class project should be, I thought, we're better to start than with your peers. Today I'm going to ask you to create a custom thank you page as described in the very first lesson video. You're going to set up a redirect to that page from any form on your site. Then you'll post a screen capture of this new customized thank you page and share a link to your site. Either the thank you page itself or the contact form, which visitors must submit in order to see your new page. Of course, if your site isn't live yet on the Internet, that's fine. You don't have to share a live link. But if you have one, it'd be great to share and network with your fellow students. 2. Redirect Form to Custom Thank You Page: By default, when users submit a Squarespace Contact form, the form itself transforms into a thank you message as soon as the submit button is pressed. The reason I don't like this is that, A, I want to add calls to action to users who contact me, such as asks them to download something, visit my shop, follow my blog, etc. B, when it comes to SEO and analytics, I can't track the users who submit my contact form, therefore, I can't capture that audience. If your Facebook pixel user, for instance, you can't install a pixel to track users who actually submit your forms, you can only track users who visit the page that the form is on. For many of you, my first reason of having a pretty redirect page is enough reason to do this, but if SEO is very important to you and you do lots of Facebook advertising and use Facebook pixel, then this technique is a must. This is my current page, which is the page visitors are redirected to after they submit the form on my contact page. You can see that I've kept it pretty simple. I just have a graphic that expresses my thanks, a note confirming that the message was sent, and then a number of calls to action. Here, for example, I share a link to a new online resource guide that I've made for lettering artists, links to my Skillshare channel, my Instagram, my books, and a call to action to sign up for my workshop newsletter, news bulletin. These thank you pages are a really great place to incorporate one or more calls to action, because your audience on this page will always be users who've had enough interest in you or your website to have contacted you to begin with. This is a prime audience to remind about all of the cool features and things that you offer. Whether it's an e-shop or a blog, downloadable content, Instagram, Facebook page, what have you, use this page to the max to reach the people who've already expressed interest in you and your website. Even though I already have this thank you page, I'm going to start a new one so that I can walk you through it from scratch. So here is the backend of my website. Start by going into the Not Linked section of your site, clicking the plus sign to create a new page. I'm going to select a simple blank page here, but technically you can choose any of these options. I'm titling this new page, "Thanks." The layout you can choose is up to you, but I want this page to be simple, so I will select this first minimalist design and then click Start Editing. I'm going to quickly do some customizations here. Now that the Thank You Page Mockup is done, I need to incorporate it into the Contact page form. So I'm coming up here to my Contact page, we can also navigate to it from over here in my pages sidebar. I'm scrolling down to my form, editing the page, then editing the form itself. Start by going over to the Advanced tab. This Post-Submit Message box is where you would type any sort of a message like thank you in the normal default mode for Squarespace. This is where when someone submits the form, the form itself will transform into a little thank you note and whatever you write here is what they are going to see. But for now we're keeping it blank, and we're scrolling down here to Post-Submit HTML. Now the whole point of this hack or work-around that I'm showing you happens right here. Instead of writing a message in this box, we're actually going to input code that is going to force the website to redirect to a new page of your website when someone hits "Submit". That new page, of course, is going to be the thank you page that we just made. Before we can actually create this code, I'm going to cancel out of this, discard my changes because I didn't actually make any crucial changes just now. Cancel out of the editing mode of this Contact page. Scroll down to my new Thanks page that I just made, and I'm going to click this gear button for the settings. This is what I need to see. I need to look at the URL slug for this page. This means that the direct URL to this particular webpage is my website's URL/Thanks. If I come here to a new browser window, you can see that this works just fine already. Because we created this page and put it into the not linked section of our pages panel, this means that it's not actually directly linked to anywhere on your website, but it is still a live page on the internet. That is just what we need in order to be able to redirect people to that page without having a link to it on the website. Remember what your URL slug is and we're going on to the next step. Back here in the Contact page. Again, I am editing the page, editing the Contact form. Coming over here to Advanced, scrolling down to Post-Submit HTML. You do not have to be able to write code to do this. I've made this super easy for you. There are awesome websites out there that generate code that's open-source for lots of commonly used functions. The function that we need today is a simple URL redirect. I have found already for you a redirect generator. I have the URL right here on the screen for you, but also the live link is in the about section of this class. For the URL that we need to redirect to, I want you to put in the full web address for the website that we just made. In my case, that's this, the pluralbellestudio.com/thanks. Once you do that, just click this button, "Generate the redirect code for me." Now copy this whole code and paste it. So I'm copying it here and then pasting it over here into the Post-Submit HTML field. Because this is a lovely free code, the authors have included a bit of advertising for their website. I'm fine with that though, give credit where it's due. The credit will not appear anywhere on the visible side of your website though, so there's absolutely nothing to be concerned about. If for whatever reason you cannot access this code, I have placed it into a Google Drive document, which you can access and copy, since this is open source code, over at the link that I have on the screen here, or in the live link that I've included in the about section of this class. The nifty code generator has included my unique URL at three different points in this code, so when I hit "Apply" and then save my page, this should work. Now, this is super important. Unfortunately, in the backend of Squarespace, you cannot test out form submission fields like this. So we're going to have to go to the front end of my website. I want to go to the Contact page. I'm not in the backend, I'm on my actual website. I know that because here in the backend, I am at my pluralbelle.squarespace.com URL, and over here on at my real custom URL, pluralbellestudio.com. So I come over here to my real website and I'm just going to put in a fake little message and hit "Submit." Like magic, I have now been redirected to this new thanks page that I created a minute ago. 3. Create a Download Link: A very common sight feature these days is to offer a free download to your site visitors. Squarespace makes it easy to add a link or button to download a file. In the next video, I'll show you how to create a download link in exchange for capturing of visitors, email address, and other contact information. But first, let's just make sure you know how to make a link that downloads a file the traditional easy way in Squarespace. Here I am at one of my Websites, calligrafile.com, where I frequently offer free downloads to readers of the blog. In this particular post, we teamed up with uppercase magazine to give away a printable PDF file of their beautiful abecedary poster. By clicking on this button, visitors are able to download a high resolution print quality PDF of this poster, which opens in a new window and allows people to zoom, print, or download. How did I do this? Well, it's really quite simple. I'm going to make another one just so that we can all take a look at how I did it. Let's start by editing this page. I'm going to add this download button right here. I will click to add a new widget and scroll down to button, I will title this Free Download, and the click through link. I'm going to select this oft overlooked tab called files, and here I'm prompted either to add a new file or use an existing file that I've uploaded in the past. For this demonstration, I'm going to add a brand new one, navigating to my PDF file. It's quite a large file and that really doesn't matter, and it's nice that you can upload large files for download here. Once it's uploaded, it's going to appear in my existing files list, and the last step is to scroll down and click "Open in a New Window." I like almost all the links on my site to open in a new Window so users aren't sent outside of my website. Clicking outside of that mini pop-up, I come down here and select the styling of the button, whether it's going to be medium, large, aligned in the center of the page or the left or the right, etc. Now when I click "Apply" and I save my blog post, I see that clicking the button does exactly what we hoped for. The exact same steps can be used to add a link to text, doesn't just have to be a button, so here I just added this free download texts into the body text of the blog post, and I'll add a link. Go to files, existing file the abecedary of writing that I just uploaded open-ended Window, click right outside of that pop-up and hit "Save", and I'm all done. 4. Email Capture Downloadable: As you have just seen, giving away a downloadable on Squarespace is easy. But what's not easy is forcing visitors to complete a call to action in order to get that download. The most common of these calls to action is an email address capture, meaning having visitors sign up for your mailing list or newsletter in order to have access to your download. This is a great way to capture new followers. Here I am on a page of my own website. I want to give visitors a free wallpaper download if they sign up for my newsletter. There are two ways to go about this. The most basic and minimal option uses the newsletter widget and the slightly fancier option uses the form widget. I'll walk you through both right now. I'll start by editing my page and then adding a newsletter widget. I'm just going to put it right here at the very bottom of the page before the footer. Here, I'll customize my text. I'm going to choose to click Require Name Field because I want to capture my visitors' names as well, but that's optional. If you want to capture even more visitor details, you can also use a form widget instead of the newsletter widget, which is the technique I'll show you next. So coming over to the Advanced tab, I'm going to edit my Post-Submit Message, then I will link to the downloadable file the way we did in the previous video. I'll upload my wallpaper file now and click Open in New Window. Next I'll come to the Storage tab and connect my preferred method of email capture. Once I save, I can test this out right here on this screen after receiving the page. Great. Now I see this message pop up and I can click the link and get my free download. The slightly fancier version of this workaround uses the forms widget. So again, I'm going to edit my page and in the same place as before, I'll add a forms widget instead of a newsletter widget. I'm going to remove the subject field and the message field, leaving only the name and email address. Now, as before, you can also remove the name field and just capture an email address. You could also add even more fields for people to check. For example, you could force them to take a survey by adding Checkbox or Radio button questions or even a survey field itself. You can force them to put in their own website URL, anything like that, you can capture right now. I'm going to name this form Free Downloadable, although we can change that later if you want. Under Storage, ex out your e-mail address, which will be the default method of capturing the information after a visitor hits Submit. But we don't want to email you, we just want to capture their details. So again, I'm going to connect with my preferred email capture service. In the Advanced tab, repeat the steps from the newsletter widget, adding download link text in the Post-Submit Message box. Coming back up here, I'm going to decide I want my button alignment in the center of my form. I will change the text of the Submit button to say, let's see, Get My Free Wallpaper! Now the cool next step, and the way in which this is a fancier option, is that I'm going to scroll down here and click Enable Lightbox Mode. This turns your form into a button so that when people click it, a pop-up will prompt them to enter their details. So I'm going to enter the text of this button now and then click Apply. To test this out, as we saw in the previous video, you're going to have to save your page and then actually go to your real website, to your actual URL. Refresh the page that you had this on so that your new form will appear and then test it out by clicking the button. So cool, this form popped up. I'm going to put in my information and get my free wallpaper. Awesome. In my next video, I'm going to share some tips for styling this pop-up confirmation window, as well as how to get users to input their contact details in exchange for a coupon code. 5. Email Capture Coupon Code: Now you're all smart, capable people, so I'm sure you've probably already figured out how to reveal a coupon code to people in exchange for their contact details. But in this video, not only will I be showing you that, but I'll be covering how to add some stylistic and layout customization to the form pop-up window. For today's example, I am going to give people 25 percent off the rubber stamps in my shop if they provide me with their contact details and sign up for my newsletter. Because some Squarespace templates have different ways of creating discount codes and coupons, please use the link on my screen if you need help setting one up. I also have the live link to this in the about section of this class. I want to put a button for people to get this coupon code right here in my shop. So I'm going to edit my page and I think I'll put it right here with a little spacer above it. I'm going to put a form widget and just like before, delete the Subject, delete the Message. Now the form name is the title that'll appear on the first pop up. I think I'm going to call this, grab your coupon. Once I do that, I'll go to Storage, disconnect my email address, and connect to my email capture method. Now let's go to Advanced. I want to change the Submit button label to Get your coupon. In the Post-Submit Message, I want to get a little bit fancier than I did in my previous video. I want the coupon code itself to be really big. So I'm going to clear out the Post-Submit Message and then come down to Post- Submit HTML instead. The fact that we can use HTML to stylize this text is what's going to make it a little bit fancier. I'll type my message here. Now before I actually type the coupon code on this next line, I want to add a little bit of HTML styling. I think I want the code itself to be the large H1 or header text that I have on my website. That's quite simple. This is a really easy HTML tag. I'm going to put a left caret, H1, right caret. Squarespace is really great because it automatically adds the closing of your coding. All you have to do is type what goes in between the two tags. Currently, the way this will look is that this top message is going to be like the basic paragraph text you see here. It'll be left aligned and happy stamps also left aligned, will be on the next line. It'll just be large the way that my H1 headers look but I think I want all of this to be centered. Clicking Backup here at the very, very beginning of my text, I'm going to add some more super simple code. Now, I added a div here and Squarespace helpfully gave me the end tag for this div, but I don't want it there. I want it at the very, very end of my text. I'm going to cut it and paste it at the end of the text. Now of course, if you are familiar with HTML, you know that you can add so much more here, whether it's a change of font, color, size, what have you, there's a lot more that can be done here but teaching in in-depth HTML styling class is a slightly different thing. Next, I'll come down here and Enable Lightbox Mode. I see that the button appears on the left, so I'll come up here to the top and change the alignment to center. Then come down to Open button label and I think I'll put Get Your Coupon for 25% Off Rubber Stamps. Next I'll hit Apply and Save and remember that with a form, you need to go back to your original website. Click Refresh, and only then will your new and updated form appear. So I'll click it. Great, works well so far. Get my coupon. Great. Everything is centered and my coupon code is really big. 6. Landing Page Email Capture: The tricks I just shared with you to give away downloadables and coupon codes using forms can also easily be incorporated into Square spaces landing pages, or also known as cover pages. Here, I have a very basic landing page I made for this class with the default setup. Just a single button, which is the default which leads to the homepage of my site. Over here in my back end where I can edit my landing page and when it to come over to action where I can edit buttons, links, and forms. I can see here the default button which leads to the homepage. But to keep things simple for this demonstration, I'm going to delete the button and just replace it with the form. I'm going to label the button, download your free wallpaper. Of course, most websites that have a landing page aren't going to be just advertising free wallpaper. Maybe you want to give away a free e-book or something a bit more substantial. Nonetheless, this will show you how it's done. I'll click Edit Form now, and we've been through this, but the window looks a little bit different, I'll advise you that there's not going to be an option to make this into a light box because the default and the only way to do it on a landing page is to have the form itself be a popup window. Remember that the form name is the title of a confirmation screen. I'm simply going to title it, Enjoy. I'll delete subject and message fields. For the sake of something different, I'm just going to also add a website field, making sure that it's not required, but asking people to input their website. In storage, again, I will make sure, if you have your e-mail here as a default, disconnect it and do connect to a default email capture provider. Over and advanced, I will title this submit button, download my wallpaper and I'll fill in the message here with the download link. Remember in files, I still have this existing file over here. I'll go into existing file, select it, open it new window, and then I can hit Save. But just to remind you, right here, everything I showed you in the previous video about post submit HTML will work here. That includes styling the type like centering it and tagging it with an H1 or H2 tag. But it also includes what I showed you at the very beginning of this class, where you can redirect users to a new page on your website and for this purpose, that might actually be a great idea. You could redirect them to a page that you've made about your download. Let's say that you have a free e-book or a packet of samples for people to learn calligraphy. Well, you can redirect them through this form to that page where you show examples, you show them how to use it, you advertise the product but that site is only going to be accessible to the people who have gone through this initial step. Now, I have to hit Save here and if I expand the screen with this arrow, I can actually test the form on this page, unlike the case with many other pages. Great, I click it, all of this this comes up and I click download my wallpaper.