In this series, we’re going to show you how to improve your email signup process and make it 100% more awesome. Want to know how to hack your MailPoet signup confirmation? We’ll show you how in Part 1…
Why should I change the look of my signup process?
In MailPoet, the first email your subscribers receive is the signup email. It’s the first point of contact they have, so you need to make an impact, and get as many people clicking through to confirm their email address as possible.
MailPoet lets you customize the subject line and content of that confirmation email, but did you know you can also hack it to add HTML? For instance, you might want to customize the font or make the confirmation link a bit more attractive by turning it into a button. It’s pretty simple!
Here’s how our signup confirmation email started out:
And here’s how it ended up:
How to edit this email
If you aren’t confident with code, then we’d advise you not to play with HTML in these emails!
You’ll find the editing box in MailPoet->Settings->Sign Up Confirmation (tab).
Writing first, design second
It’s a good idea to think about the copy first, before you add any styling. The key to a good confirmation email is to keep it direct, and ensure that the recipient does what you want them to do: click the subscribe link.
I just switched ours up a bit with a couple of minor tweaks to the copy and got rid of the link to our team page below our signoff (which isn’t necessary here) – it just detracts attention from the key objective.
I also decided to reinforce that they won’t receive any newsletters until they’ve confirmed, since I think the less tech-savvy people might not realise this!
Finally I added a message to ignore the email if they’ve received it but didn’t sign up. Part of the reason for double opt-in is to confirm that the email address given was handed over in good faith (i.e. not signed up maliciously by someone). Having this additional step ensures that the emails we send are wanted.
Button = action
I wrote a while back about how to get people clicking on your links, so I’ve made the subscription link commanding, short and easy-to-read. A text link, “Click here to confirm your subscription”, now becomes a button “Confirm your Subscription”.
Design
I’ve kept the design of our email quite simple, adding a heading, some font styling and of course, the button appearance to that subscribe link.
Here’s the code we pasted into the ‘Email Content’ box found in the Sign-up Confirmation tab:
You can find a copy and paste-able version of this in Gist so that you can copy our styling and made the necessary modifications to it like colors, fonts, and image header etc.
And here’s where you might want to change things:
In order of appearance, here’s what we changed:
- red = the color of the background (needs changing in both places to make it work properly)
- light blue = the color of the newsletter body
- black = the URL that the header clicks through to
- orange = the header image URL, dimensions and the alt tag (if the image isn’t downloaded)
- pink = the font color
- purple = font face, the first one is the most likely to be seen
- green = the font size
- grey = the font color used in the button
- yellow = the button background color
- lime green = font face used in the button
- dark blue = font size used in the button
Need to get some colors for your email? Try this color picker.
Want to do your own thing? Sure, here’s some things you need to know:
- Since the [activation_link] contains the anchor tag, the only way to style the link without editing the plugin is to add a span tag inside it.
- If you line break your code, it will automatically add <br> tags for you, which isn’t acceptable between <head> and <body> tags for example, so you’ll need to put all of these on one line as shown above. You’ll also need to consider this when adding your own line break tags.
- Don’t forget that if you want to add a header image, it’ll need to be in your media library or hosted online and you’ll need to get the URL.
It’s a good idea to check it by signing up to your own form!
In Part 2 we’ll discuss the signup confirmation page, and in Part 3 we take a look at the signup confirmation welcome email.