How to Integrate Mailblue in Squarespace Using Code
The Newsletter block in Squarespace automatically connects with Squarespace Email Campaigns and Mailchimp. But what if you're using Mailblue or Active Campaign for your email marketing? How do you get that opt-in form onto your website then?
You've got two options:
You can pop the Mailblue opt-in onto your website using some code.
You can link Mailblue and Squarespace together with Zapier.
This article focuses on the first option. If you want to know how to connect with Zapier, you can check it out here.
Here's what to do in Mailblue:
First off, get your Mailblue account all set up. Create a template for your newsletter and, if you like, set up an automation.
Once that's done, here's what's next:
In Mailblue, just click on Website in the menu on the left.
Then click Forms (and in the pop-up, hit 'create a Form').
Give your Form a Name, like 'Homepage Newsletter' for instance.
Inline form should already be picked, and that's totally fine.
Under Action, choose 'Subscribe to a list'.
For Option, pick the list you want.
After that, just click Create.
Now you'll be in the Editor, where you can tweak how your opt-in looks.
As you can probably tell, this design looks quite different from Squarespace's Newsletter block (I'd even say it's a bit ugly ;-)). So, the goal is to make it blend in with your site's style as much as you can.
What goes into your opt-in:
In the grey column on the right, you'll see you're on the Fields tab.
Get rid of the top two text fields (that's 'Subscribe to email updates' & 'Add a descriptive message...'). If you want to add any text to your opt-in, it's usually better to do it right in Squarespace using a Text Block.
Click on the Full Name field. On the right, you can change 'Full Name' to 'First and Last Name' if that feels better for you.
Alternatively, you can just remove the 'Full Name' field and drag the First Name field from the grey column on the right into your form. Do the same for the Last Name field.
You can clear out the default text in the fields (like 'Type your first name') and also decide if a field should be mandatory or not.
How your opt-in looks:
In the grey column on the right, click on the Style tab.
Under Layout, choose if you want your fields stacked or side-by-side.
Under Form Style and Button, you can pop in your brand colors, change the button's shape, and pick the background color for your opt-in. For the background, transparent is probably your best bet, so the opt-in 'blends' seamlessly into your site.
At the very bottom, turn off AC branding. (Unless you actually want to promote Active Campaign/Mailblue, of course! 😉)
What happens after someone signs up:
In the gray column, click on the Options tab.
Under On Submit, you can choose 'Show Thank You' (this is usually selected by default). Here, you can change the thank you message that new subscribers will see.
Even better, create a separate thank you page in Squarespace. Then click the dropdown arrow next to 'Show Thank You' and select Open URL. Enter the URL of your thank you page here.
Under Subscribe to a list, the correct list should already be selected, but you can change this if needed.
Click on the gear icon. Here, you can turn on or off whether someone gets a confirmation email after signing up (this is called a double opt-in).
Under Participation email, you can customize the design of this confirmation email so it matches your brand's look as much as possible.
Your address is needed to send out emails, so make sure it's filled in. (If you can't select anything here, add an address through the main menu on the left: Settings (the gear icon) > Addresses.)
Now you can add the opt-in to your website
In the top right, click the blue Integrate button.
What you need now is the 'Simple Embed' code. Copy this code.
Now, go to the page on your Squarespace website where you want to put the opt-in. Add a Code Block in the spot you want it.
Delete the entire 'Hello World' code and paste the code you just copied from Mailblue here.
Save the changes on the page.
Your opt-in might not show up right away. This often happens on the backend of your site when you're using a Code Block. Try viewing the page from the front end (when you're logged out). Or sometimes just refreshing the page helps, even if you stay logged in.
Making your opt-in look even better with CSS
Now, you might not be super thrilled with how your opt-in looks on your site. That's because Mailblue's default design isn't always the prettiest. You can change the colors, but ideally, you'll want the font to match your site better too.
You can tweak this by adding some CSS in Mailblue.
You do this on the Style tab under Custom CSS.
Heads up: working with code needs to be super precise. Even a tiny dot, comma, or space can make your whole code stop working. So, be really careful!
Click the 'Inspector' button. It will turn green.
Hover your mouse over the text above the first field (where it says 'First Name' in the image below)
A blue code will appear, followed by the text 'label'. Click on it.
A code will now show up in the CSS field.
Just pop the code below on the blank line between the two brackets:
font-size: 16px;
font-weight: 200;
font-family: arial;
Now do the same thing with the text above the second (email) field and pop this code on the blank line:
font-size: 16px;
font-weight: 200;
font-family: arial;
And last but not least, do this with the button and then add this code:
font-size: 14px;
font-weight: 400;
letter-spacing: 0.1em;
line-height: 1.2em;
text-transform: uppercase;
font-family: arial;
Your CSS field will then look like this:
._x06037035 label {
font-size: 16px;
font-weight: 200;
font-family: arial;
}
._x30465724 label {
font-size: 16px;
font-weight: 200;
font-family: arial;
}
._submit {
font-size: 14px;
font-weight: 400;
letter-spacing: 0.1em;
line-height: 1.2em;
text-transform: uppercase;
font-family: arial;
}
Feel free to play around with the values now.
Font-weight always goes up in steps of 100 (like 100, 200, 300, all the way to 800). But remember, this really depends on the font you're using. Some fonts might only have options like 100, 400, and 800, while others might just have 100 and 500. So, have fun experimenting with it!
Letter spacing is all about the space between your letters. If you want no space at all (meaning 0), you can just delete this whole line.
The same goes for text-transform. Instead of 'uppercase', you can totally use 'lowercase' here, or just remove the line if you don't need it.
For font family, just type in the font you're using in Squarespace. It doesn't have to be the same for your text fields and your button, by the way! If your font name has two words, make sure to use a hyphen (like proxima-nova).
If a line of code isn't working, you can always try adding the important tag (!important) to see if that fixes it. Like this:
font-family: arial!important;
Just a heads-up: always make sure to end with a semicolon. So, don't put the important tag *after* the semicolon, it goes before it!
Since you used the simple embed code, all your CSS changes will automatically show up on your site. Pretty neat, right?
That’s it! :-)
