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 (if you’ve got Opt-In Confirmation enabled) 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 customise 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 customise 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:
Note: The button doesn’t look quite like this in some newer versions of Outlook, it looks like the below (but it’s better than before right?)
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.
As we now use multiple lists, saying “You signed up to join this mailing list” doesn’t sound correct, so I’ve adjusted the wording to make it read correctly whether they choose one or many lists to opt-in to.
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 Subscription”.
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.
To make it easy for you, you can copy our styling and made the necessary modifications to it like colors, fonts, and image header etc.
<!doctype html><html><head><meta charset="UTF-8"><title>Thanks for signing up</title></head><body bgcolor="#cbddda"> <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#cbddda"> <tr> <td> <table width="600" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff"> <tr> <td colspan="3"><a href="http://www.example.com"><img style="display:block;border:0;outline:none;-ms-interpolation-mode:bicubic;" src="http://lorempixel.com/600/60" width="600" height="60" alt="MailPoet" /></a></td> </tr> <tr> <td width="20"></td> <td style="font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#000001;"> <b>Hello!</b> Thanks for signing up to hear from us about [lists_to_confirm]. Please confirm your email address below to start receiving emails from us: [activation_link]<span style="display:inline-block;padding:10px 40px;color:#ffffff;background:#cd1049;font-family:Arial,sans-serif;font-size:14px;font-weight:bold;text-decoration:none;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 0px 5px 0px 0px rgba(151,12,54,1);-moz-box-shadow: 0px 5px 0px 0px rgba(151,12,54,1);box-shadow: 0px 5px 0px 0px rgba(151,12,54,1);">Confirm Subscription</span>[/activation_link] If you didn't sign up for this, just ignore this email. Best wishes, The MailPoet Team </td> <td width="20"></td> </tr> </table> </td> </tr> </table> </body></html>
Where you might want to change things:
red = the color of the background (needs changing in both places to make it work properly)
turquoise = the color of the newsletter body
black = the URL that the header clicks through to
dark blue = the header image URL, dimensions and the alt tag (if the image isn’t downloaded)
light green = font face, the first one is the most likely to be seen
dark green = the font size
orange = the font color
purple = the button background color
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!