Email lists are all the rage these days, and with good reason. If Instagram, Pinterest, or Facebook went away today, and you don’t have a list, you’d have no way of contacting the people that have been following along in your journey.
Because of the popularity of email lists though, it’s not enough to just say Sign up for my list anymore. You’ll have to make your offer a little more exciting, and maybe even visually appealing, for that to actually work out.
I personally use MailerLite* (yes! That’s an affiliate link) for my email list, and I have been loving it. The only downside? There are only so many ways you can style your signup form to match the look and feel of your website. But don’t worry, this blog post will solve that problem!
In this post I’ll show you exactly how to set up a signup form that opens on the click of a photo in Squarespace!
Setting up your form
The first step in this process is setting up your signup form in MailerLite. You can either use an embedded form you already have, or create a new one for this. While it may seem logical to create the form in the pop-up option, you want to create it as an embedded form – I promise it will all make sense in a minute.
Adding the code injection to Squarespace
Step 1: Get your JavaScript Code
In the form settings on the form you just prepared, scroll down to the “Embed form into your website” section. Here, you’ll want to click on the “Show pop-up on click event” link to get the JavaScript code we need to set up this form in Squarespace.
Yep! JavaScript may sound scary, but it’s really not that bad! Just copy the entire code from the first box that starts with <!– MailerLite Universal –> and let’s head into Squarespace!
Step 2: Insert code in Squarespace
In Squarespace, click the gear icon (settings) for the page you want to use this feature for. In my case, this is the blog page, so I’ll click the gear icon for my blog in the page menu.
In the blog settings go to Advanced (in the top right corner), then scroll down to Page Header Code Injection. Paste the MailerLite JavaScript code snippet here, and let’s move on to the next step.
Design your photo
Next, we need the photo that we are going to use to create the pop-up on click for. You can create this image graphic in any program, like Photoshop, Illustrator, or Canva. Squarespace recommends that your images are between 1500px and 2500px wide, but other than that the design is really your choice.
I personally like adding something that looks like a button, even though clicking anywhere on the photo will cause the signup form to pop-up. I also like to create clear call to actions, to make things simpler for the visitors!
Upload your photo
Once your image is ready, go back to your Squarespace account. Under the Design tab, click the Custom CSS option.
Scroll all the way down and click on the Manage Custom Files, then select Add Images or Font. This is where you will upload the graphic you just created.
Once your graphic has been uploaded, place your cursor anywhere in the CSS editor, then click on the graphic. This will generate a link to the image that looks something like this: https://static1.squarespace.com/static…
I like to copy the link and save it in the notes on my laptop while I complete these next steps. Then you can select Cancel at the top, as we don’t need to save any of the changes made in the CSS editor!
Inserting the final code
The last step of this process is to head back to the blog (or wherever you entered your JavaScript code earlier) and insert a code block.
Go back to your MailerLite account and get the bottom code under the Show Popup on click event, starting with <a href=
Copy that piece of code and paste into your Code Block on your blog.
Then, replace Click here to show popup with the following code:
<img
src=”https://static1.squarespace.com/static URL goes here inside quotation marks”>
The final code for your code block should look something like this:
<a href=”javascript:;” onclick=”ml_account(‘webforms’, ‘0000000’, ‘xxxxxx’, ‘show’)”>
<img src=”https://static1.squarespace.com/static”>
</a>
Whew! That might seem like a lot. But I promise you, once you do it once it all seems a lot easier!
In this post I walked you through the step by step process for creating popup signup forms on the click of a button using MailerLite and Squarespace.
If you’re looking to work with a web designer to create a stunning & strategic website for your business, look no further! I help creative entrepreneurs in the wedding industry create beautiful websites that help you stand out from your competition and communicate your value.
Sound good? Stop by the services page, and let’s get started!
You may also like:
* this is an affiliate link, which means I may get some benefit at no extra cost to you!
