This Is Their Onboarding, Not Yours. Make It Count.

Email Marketing

TL;DR: Your new email subscriber onboarding experience is vital. If you’re moving to a new email marketing provider, make sure that what you think your onboarding does, is actually what it does!

In my infinite wisdom, I decided to move from ConvertKit to MailerLite. Let’s just say, the conversion hasn’t been the best. 95% sure it’s my fault, and I didn’t set things up properly.

OK, let’s rewind a bit!

I’ve been looking at promoting my newsletter for a while, if you’ve been following along on Twitter, you’ll know that I’ve been talking about showing it some love for months, and that still kinda hasn’t happened. A few friends of mine have recently moved/started talking about FloDesk, and while it’s expensive, they don’t charge you based on your subscriber count, which every-other-platform does. So that was a massive plus for me if I want to really focus on growing my list and getting shenanigans in your eyeballs once a week.

I was all set to buy it, moved money around, got the 50% discount for the first year, everything was set. Then I was in my weekly content co-working with Tasia, and she just happens to mention that the analytics in FloDesk are, let’s just say, less than stellar. Well, if I’m spending not a small amount of money, and ‘aggressively promoting my list’ as the wonderful Sara Loretta puts it, I want to be able to see decent analytics!

I also need something that works with Campsite, because that’s what I use for my link in bio. Remember that, we’ll come back to it later!

If you just want the step by step process of how to make ML work with Carrd and Campsite, scroll right to the bottom, past all my bitching about my day!

If you want to see what my onboarding looks like now (that doesn’t use Carrd, and uses 3 WordPress landing pages instead), head here:

MailerLite ticked all of the boxes for me.

It’s cheaper than ConvertKit, a LOT cheaper than FloDesk, and I can almost make my emails look as pretty as they do in FloDesk. Let’s be honest, FloDesk emails are simply stunning. If you’re getting emails from someone sent with FloDesk, you know what I’m talking about!

MailerLite has a far less steep pricing increase for increasing subscribers than many other platforms. On their top tier (which is still cheaper than FloDesk, but admittedly only for 1,000 people) you get the ability to have a subscriber preference center, with the added ability to self-segment based on their preferences. I was surprised how many other platforms don’t have this, they have ‘unsubscribe,’ and maybe you can update your email, and that’s it. Some, you can’t even change your email; you have to unsubscribe and resubscribe again. Well, that’s too much faff IMHO. Let’s not do that! Let’s just have a button to update preferences thankyousoverymuch.

It has campaigns (broadcasts in ConvertKit), it has automations (visual automations + sequences in ConvertKit), and all the things that I might need in the next 12 months.

It also links directly into Campsite, using an opt-in form module, exactly the same as ConvertKit. Just pop your API, add the fields in (first name and email etc.), and pick a list for everyone to be added to, and you’re golden…

Actually, though, MailerLite doesn’t work with Campsite…

It says it does – it bloody doesn’t.

Luckily, the wonderful subscriber who experienced this was utterly gorgeous and went through exactly what she did to sign up by sending me screenshots so that I could find out exactly what screwed up.

Don’t get me wrong, it added her details from the form in Campsite to my list in MailerLite…and that was it. No double opt-in email. No adding to the ‘subscriber’ group. No welcome email. Just tumbleweed from me to her. I wouldn’t have even known she’d subscribed if I hadn’t happened to nip into MailerLite to change a hex code, 6 bloody hours later.

She was amazing about it when I apologized profusely for her crap onboarding experience! But I expected more.

I went back through everything, and I’m 99% sure that I did everything that I should have done. I went through every step with multiple testing email accounts of my own, and it just-didn’t-work.

At this point, I created a brand new “embedded form” in MailerLite, just to practice with, so that it wouldn’t bugger any other workflows up if it didn’t work. (Spoiler, this is the one I’m using now because it works!).

Progress so far: Right now, I have a form, with a double opt-in & custom thank you page. A bog standard form, no color, no custom font or anything, same with the double opt-in email. Nothing has been changed at all. But I have a brand new form.

I already had a domain & website for my newsletter.

Luckily, I bought Carrd last year, and when I bought systemsandglitter.com I set up a website just for that, and it’s basically just sat there ever since.

I decided that I needed to control a single path of entry for people to get onto my newsletter. One site, one form, nothing else, just that. Something that, if it breaks, I know exactly what’s going on because there are only so many points that could have gone wonky.

Before I changed #allthethings on the website and make it look suitably “Esme,” I wanted to make sure that the bloody form would work. I’m not going to put in hours of work setting the whole website up again, new colors, new background, new copy, new fonts, just for the bloody form to decide to not work. Kinda defeats the point of having a specific domain & website just to promote my newsletter, if NO ONE CAN SIGN UP TO IT!

I know that eventually, I’ll need more ways to entice people onto my list, but right now, I just need to be able to give the onboarding experience that I want to give people. So they know they’re valued and that I care.

It’s not much to ask, for things to work properly.

I know I’m new to MailerLite, and there are probably things that are finicky and that I need to learn, but surely adding someone to the right list is kinda the point of having a list?

As I previously had my ConvertKit API in the form already on the Carrd page, I swapped out the API details, and added the right list to the native Carrd form so that it would link through to the right MailerLite subscriber group.

OK, that wasn’t a total bust.

It worked. But it didn’t include a double opt-in, which I want.

It also gave me a ridiculously disgusting popup at the top of the page that said “Confirmed: thanks ;)” – and while this can be changed and tweaked in Carrd’s settings, it’s a bit rubbish.

Time to think of something else.

Maybe I could have a sub-domain and remove the Carrd form embed and grab the MailerLite one and create a custom onboarding from start to finish?

Progress so far: I still only have the form, double opt in email and thank you. Oh, and the original webpage. None of which are talking to each other. I’m still using the native Carrd form embed at this point.

Let’s set up a custom sub-domain, of course!

What if I could create another site with Carrd, as a custom redirect for the form being submitted, so that the little popup didn’t pop up?

Moreover, what if I could create a custom sub-domain of my original newsletter page, so that it looked virtually the same (as in, ‘on brand’) and put that URL as a custom redirect on the form submission?

This part, at least, was relatively easy.

I went back to my Carrd dashboard and duplicated the original website, went into the settings, and created a custom sub-domain. Then I popped into Google Domains and added the A records so that the website actually existed!

Set up a sub-domain as a thank-you page, first

Now, if you want to do this, and you want to use a sub-domain (like I have with mine), you’ll need to set up the ‘thank you’ website in Carrd, and register the subdomain with your provider FIRST, otherwise this won’t work when you need it to! It says that it needs about 24 hours to propagate through the interwebs, but I found that mine was ready in about 20 minutes.

Because I knew what I wanted mine to look like (basically a carbon copy of the original site, without the iframe), I duplicated systemsandglitter and edited the new one to be the page that I wanted, in my case, an on brand “thank you, here’s what’s coming next” page. This made sure that all the fonts, colors, headers, backgrounds, and layout was the same, without me having to fuck around setting everything up from scratch again!

I did this before I fucked around for millennia with the iframe… The reason I did this was that I wasn’t sure if the Carrd Pro Standard account that I have allows me to do what I wanted, mainly create a sub-domain of a domain that’s already on Carrd. Seriously, check out Carrd, for $19 a year for their Pro Standard, it’s a bloody steal, here, have an affiliate link!

Back to MailerLite

Then I nipped back into MailerLite, opened the form and on the very first page when you open the form, clicked ‘Settings’ and at the bottom there’s a URL redirect box. I popped the new sub-domain in there and saved the form.

This means, once the form is submitted, it’ll redirect to a site of my choosing (again, thanks Carrd), rather than the standard, unflattering, although fully functional, ML thank you page (which can be customized I will add).

Progress so far: We have 2 websites, and a form with double opt-in and thank you. Remembering that the ML form is NOT embedded in Carrd at this point.

Enter Java, HTML, iframes, and <head>.

We’ve established that I don’t like the native Carrd form embed, nor does it give me the double opt-in that I want, although it does add subscribers to the right list. I decided to investigate the possibility of embedding the ML form using HTML code in Carrd. This works perfectly on MailerLite sites and even on my Squarespace website.

What could go wrong?!

Well, ye saga continues (in the fine words of Sir Terry Pratchett).

So, embedding the form into a code block using HTML broke my site completely. As in, I added it, refreshed and there was NOTHING there. Apparently, this is a known problem, so there’s a help page for it. I say help page, it says (and I’m paraphrasing here) “if you get a blank page, your HTML is wrong.” So there was no help there! I copied and pasted it directly from my form details in MailerLite (using the little copy button), so it wasn’t that I was missing anything off the start or the end. I know nothing about HTML, so how the hell am I supposed to know what’s wrong?

Back on the MailerLite page, there’s an option to insert code into the <head> element.

WTF is a <head> element and how the fuck do I access it on Carrd?

Why are there never walk-through guides for people who have zero clue what they’re doing, but know exactly what it NEEDS to do?

At this point, I started clicking shit and found that if I embed a code block (like I did for the original HMTL) into a new container, I can change it to <head> and paste the <head> code from MailerLite into there. That worked, at least I think it did, there’s nothing that says “woohoo, the <head> is working” so you have to take it on faith that you did the thing right! Under the <head> code in MailerLite, there’s more code to embed the form. So I grabbed that and put another container and block into Carrd for the form and pasted the code.

Didn’t work.

I tried Java, HTML and finally, I decided to just grab the bloody URL and try embedding it as an iframe in another code block!

We have lift off people!

It bloody worked!

Now, I can’t tell you if it was the <head> plus the iframe, or just the iframe. But what I can tell you, is that it’s working and I’m not touching it again!

Then I needed to go back into MailerLite and make the form ‘on brand’ and make sure that all the fields were the right ones, changed the font & colors, and made sure that the form looked how it was supposed to. Then I went back into the website (not the Carrd backend) and refreshed so that I could see what I needed to edit to get the form embed to work properly.

It looked awful. 100% out of alignment, nothing was where it should be, and you couldn’t even see the fields to fill in your name and email. Lots of fiddling with heights, widths, and ratios ensued. This took a while…

Progress so far: I have a single MailerLite form embedded on a Carrd website, that works (but I’m not sure how). The form embed looks how it should. Lots of time was then spent getting it to display correctly. See my pro tips at the bottom for how many times I did this (hint, it was more than 140). The new sub-domain is also now working, go team!

Finishing everything up, so it works!

On the MailerLite side, I went back in and made sure that the custom URL redirect at the form level was still there.

But the second website, the custom sub-domain hasn’t actually been edited, it’s still just a copy of the original. So I went into the Carrd backend and edited the shit out of the copy and contents. I added funky buttons and share icons, and basically got everything functioning as a custom thank you page with information on what to expect next and instructions.

What do we have now?

A custom sub-domain (totally rewritten and looking gorgeous), attached as a custom redirect at the form level.
A working form (that looks like it should in Carrd) and that has a double opt-in and thank you page.
And we have a 100% rewritten and reformatted S&G page!

Not going to make the same mistake again!

I went into the actual website, not the Carrd backend, and filled out the form a few times to make sure that not only did the custom redirect work, but that the double opt-in emails were sending as well.

Woohoo, everything is working like it should. It’s all sound and flows naturally one from the other.

Back to Campsite – you’d forgotten about that, hadn’t you?!

Where all the problems started! So, how did I make it work?

We know that the ‘embed a form’ doesn’t work, that’s how we started on this rabbit hole in the first place. But what the hell would work? I looked at the embed options for a bit and wondered if a ‘carousel’ module had to have more than one picture.

Only one way to find out.

I added the carousel module to Campsite with a single image, the Systems & Glitter header image, and added systemsandglitter.com to that image, with a little text note under it saying to click on the image to sign up. As my newsletter is set up as a blog feed on Squarespace, it also displays the last newsletter under it, using a ‘feed’ module.

It’s not perfect, people can’t fill out a form on links.esmecrutchley.com, they get redirected to S&G instead.

It’s not what I wanted, but really, when you look at it, what I wanted was to be able to collect people’s names and emails, add them to the right group in MailerLite, and give them an excellent onboarding experience. I can’t have a working form embed in Campsite, but I can redirect them to a fully working, fully branded website to sign up, which is just as good (some might even say better).

Progress so far: I have a single ML form, embedded and displaying correctly on a Carrd website, I have a custom sub-domain redirect on submission of the form, and a double opt-in and thank you based on the form. I also have a way for people to sign up for the newsletter on Campsite. We’re done!

I now have 1 form, 2 websites, 1 image, and a double opt-in!

With all this set up, what does it actually look like?

So, it doesn’t matter where someone comes into the “hey, I’m Esme, follow me maybe” flow, the only place they can get onto my newsletter is through that single MailerLite form. That form has the double opt-in on it, and has the custom redirect. So even if somehow, someone accessed the form without going to systemsandglitter.com, they’d still get redirected to the custom sub-domain, they’d still get the double opt-in, and they’d still be added to the correct group, because it’s all set up on the form level.

Setting everything up on the form level means that if something goes wrong, there are only 2 places that could have ballsed up – the form, or the form code embed on Carrd. There’s nowhere else it could have hit a snafu.

To be clear – this form ONLY EXISTS on this page, it’s not embedded anywhere else, the URL isn’t shared anywhere else. People can only find (and fill out) this form on systemsandglitter.com. This means that I have 100% oversight on my onboarding experience and what gets sent to subscribers and when, what they see and how, and generally making sure that I know what’s going on!

So, what have we learned from this?

Test. Test. Test. And then test again. Oh, and do another test.

If you want to provide an amazing onboarding experience (or any kind of half-decent experience really), you need to make sure that what you think something is going to do is actually what it does. Especially if you’re new to something, what you think it’s going to do, might not actually be what you set it up to do!

People are trusting you with their email address and direct access to their inbox, you’d better be on point with your onboarding.

This is possibly the first experience people are having of you. Make it worth their while. People don’t expect a massive parade with sparklers when they sign up for your list, but they do expect something, crickets are not good.

Have a single form embedded in a single place. Don’t get fancy! Get the basics set up and it’ll be flawless. Spend the time on getting a pukka onboarding set up, and people will stay with you.

When you swap things around, or switch things in or out, make sure you use your testing emails, or ask your spouse/partner/parents/dogs to use theirs, so you can see from start to finish what your subscribers are going to experience. If you don’t like it, neither will they.

Think outside the box and go with it!

You know what you want, explore all the ways you can get it.

There’s no way, yesterday morning when I set about changing my ConvertKit embed in Campsite to MailerLite, did I expect to have to set up a custom sub-domain, and create the kind of onboarding workflow that happened. But hey!

Did I need a custom sub-domain as a thank-you page that doesn’t really do much else? Nope!

Was I happy with the standard Carrd confirmation pop-up at the top of the screen? Nope again.

But, the whole onboarding process is seamless now. If you want to experience it for yourself, head to systemsandglitter.com and sign up! By all means, email me with feedback if something goes wonky, it shouldn’t, but you never know!

This is their onboarding experience, not yours.

If you want to go all out, like I did yesterday, bloody do it!

If you want custom sub-domains, double op-ins, custom code, and you know how – bloody do it!

People may not remember a fantastic onboarding experience, but they’ll definitely remember a shitty one.

GDPR, when signing up for just an email newsletter, doesn’t need a checkbox.

I know, I was as surprised as you! I thought I had to have a bazillion different checkboxes, but it turns out you don’t, if you’re only asking people to do one thing, in this case, signing up for my newsletter. The fact that they fill out their details, and click submit, then I have the double opt-in, means that I don’t have to have any checkboxes. Consent hasn’t been implied by me at any point, someone fills out the form, clicks the button, and then confirms their subscription in the opt-in email. Consent has been given by the subscriber multiple times. Thus, this workflow fully complies with GDPR.

If you’re going to go down this route though, make sure that you link to your privacy policy on your sign-up page.

If you go through my onboarding, you’ll notice that my privacy policy is linked in multiple places. I also say that you can unsubscribe at any time and tell you how. I also make it clear that, until you click the link in the double opt-in email that gets automatically sent to you, you’re not subscribed.

I found this article equally helpful and unhelpful, but you’ll get the gist.

If you want a blow-by-blow of how I eventually got this to work!

Here’s the step-by-step, without the cock-ups along the way:

Create the form in MailerLite + double opt-in + thank you page – leave them standard for now, it’ll make it easier to see where they are in Carrd
Optional – If you want to have a custom thank you page, on a sub-domain, set that up early! Pro tip – set one domain/website up and get it how you like it, then duplicate it. Set up the sub-domain routing with your service provider (adding A records that Carrd gives you) and wait!
Grab the <head> code on the Form Overview page in MailerLite
In Carrd (in the OG website), add a new container & in that container, put a code block
Change the code block to <head> – it’ll probably ping it to the bottom (after – – – #done- – -), which threw me because it’s a <head>, but I think I was thinking too literally! Paste the copied info from ML in that code block, and remember to name it! I called it something super obvious; “MailerLite Head” so I knew what the hell it was!
Insert another container and another code block in that container, change to iframe
Drag and drop that container around, until it’s in the right place on the page (you can do this as many times as you like, and believe me, you will!)
Back in MailerLite, on the right-hand side of the form in the overview, there’ll be a “share url” (under when it was created and whether there’s a double opt-in). Copy that share URL and put that in the iframe box in the code block in Carrd
Save the bloody thing in Carrd!
Nip back into MailerLite and change the page background and the form background to something obvious. Personally, I make my page background pink, and my form background light blue in ML, so that I know exactly where my background and form are fitting and then I can adjust knowing exactly what’s going to show.
At this point, you also want to make sure that all the wording on the form is right and the font is correct. There’s no point spending hours (yup) getting the form to embed right in Carrd only to then have to change the copy and buttons around and have to do it all over again. There’s no point
Pro tip – open the page, the proper one (not the backend of Carrd), on your phone, as well as your computer, and see what the form embed looks like. It might (probably will) look wrong. Keep fiddling with the settings, saving, and refreshing the page on your phone and computer. It needs to look good on both, there shouldn’t be any scrolling needed. It should perfectly fit on all screens and show all information front and center.
- It might take a few attempts. I created the form on Saturday afternoon, and finished the website and associated workflow in the evening. I know the visits on the form are all from today, I clocked up 146 visits to get the form 100% right…no, I’m not kidding, I took a screenshot!
Once you have the form embed perfect (it’s exactly where it should be and the whole form can be seen on BOTH desktop and mobile), you can go back into MailerLite and change the page and form background to your preference, so that it fits with the branding on the page. See point 16 for pro tips on backgrounds
Then fart around with the copy and formatting on the rest of the original Carrd website and the custom sub-domain website and make sure they look how you want them to.
Optional – Go back into ML and add the custom sub-domain to the ‘submit’ redirect if you’ve not done it already. Open the form to edit it, and before you press anything, on the right-hand side, there’s the settings panel. It usually defaults to open on “Design,” swap to “Settings,” and the last option at the bottom of the list allows you to add a redirect URL. Pop the new webpage (the URL of the sub-domain) in there – the one you want people to go to when they’ve filled out the form.
Now – open the OG Carrd website (as a website, not Carrd) in an incognito window and go through the WHOLE process (including the double opt-in) with multiple testing email accounts. You want to make sure (at least 3 or 4 times) that everything is working as it should.
- Then, go back into MailerLite and remove those extra email addresses.
- Head into the form analytics and take a screenshot if they’re impressive. This will tell you how many times it took to make it work (in my case 146) and then
- You can then scrub them and you’ll know that anything you have after that point is actual subscribers and not you fiddling!
Pro tip – if you use a gradient background in Carrd – good luck getting that to match with the background of the ML form. Helpfully (not), you can’t have a form in ML with a transparent background. There is a super simple workaround for this, create a big gap somewhere on your Carrd site, roughly where the form is going to be sitting, then take a screenshot as big as you can, remove the massive gap, head back into ML and set the page background and the form background to the screenshot you took. It’s not perfect, but it’s close! I added a text box above the form embed and did a load of “\n” in it, to make clear lines until it filled the page, and took a screenshot of that, then removed the whole block. Even more pro tip – pick the largest size font you have on the page, then you’ll only need about half a dozen \n then enter then \n then enter to create a massive empty block. Take the screenshot, then click undo until that text block disappears, I had to click it twice, which meant that there wasn’t a bubble on the ‘save’ icon anymore because I’d put it back exactly as it was before.

You’ve read a lot!

Leave a Reply Cancel reply

Found this article useful? Share it around!