Design Tips To Increase Email Signup Rates
This page may contain links from our sponsors. Here’s how we make money.
There’s still tremendous value in capturing emails and building a list. Email opt-in forms are found on most websites for this very purpose.
Everyone wants to increase their email list and you’d be surprised how a few small tweaks can help you do this. So in this post I’ll discuss a few basic design tweaks you can make to your email opt-in forms that’ll surely increase your total signup rates.
No matter why you’re collecting emails or how many signups you want per month, these design tips are sure to make a difference.
Homepage CTAs
The best place to grab attention is right at the top of the homepage. Most designers know this area grabs a lot of eyeballs so the header is a great place for CTA buttons.
But you can add your own email opt-in field to achieve similar results. It should look natural and blend into the layout but it doesn’t have to be a tiny form tucked away in the corner.
The header of Reedsy is a nice example where the signup field acts like an email capture form. The user enters their email address to join the Reedsy newsletter while also initiating the signup process.
It’s pretty common to see this technique on landing pages and startup homepages where the ultimate goal is to grab attention. But SaaS signups are also fantastic for these CTAs.
Here’s one more example of an online ecommerce system Volusion. When you reduce the barrier to entry by only asking for an email you make the signup process 10x easier.
And by just capturing an email at first you can always add users to your list even before they complete the signup process. This gives you a chance to reach out and connect with potential users who never finished the signup process.
Keep this technique in mind if you’re running a startup or online service/SaaS company. The homepage opt-in fields can work for blogs too, but they usually have to blend in a little better.
Catchy Lead Magnets
A lead magnet is a marketing term for anything you add onto a form to encourage someone to convert. This lead magnet is always free because it’s meant as a value exchange.
You give away something for free to the user and they hand over their email.
The key to a catchy lead magnet is using a well-designed form field and planning the lead around your content.
For example this Hubspot post shares tips on building resumes. At the very bottom of the post there’s a graphic linking to a signup page where the reader can download 10 free resume templates in exchange for their email.
Granted this type of lead magnet brings the user to another page rather than capturing their email right after the post.
I typically recommend adding the form field directly into the article because it’s one less step the user has to take for a conversion. But you can also run A/B tests and see which technique converts best.
I think this site uses a brilliant opt-in field with a strong lead magnet. It’s on the homepage so this isn’t directly related to an article, but the magnet is a 6-day mini course on working from home.
This relates closely to the audience so the free offer is likely to increase conversions.
The type of lead magnet you use should be relevant to your site. So if you run a web design blog or have a personal design email list you might try any of these as lead magnets:
- A free wireframing kit
- An ebook on great navigation tips
- Freebie iconset for web designers
- A free Sketch/Photoshop color swatch
Try to get creative and think of resources that your visitors might actually want.
The more appealing the lead magnet, the more likely you’ll get a conversion.
Restyle Buttons
There are tons of case studies discussing how color, copy, size, and placement of your button can radically affect conversions.
Many CRO experts loathe the idea of just changing a color and calling it done. But when you’re running a small blog or website then a color update is often the simplest first step for optimization.
Many conversion rate studies have found that red/orange buttons often convert higher than blue or green. However this is mostly because websites don’t use red as often so it jumps off the page.
You can see an example in this case study where the red color increased conversions by 21%.
The important thing to note from this study is how much color really affects conversions.
But you want to choose a color that stands out against the entire layout. If most of your homepage is red then maybe try a blue or yellow button. Find colors that contrast against the page.
Since a lot of startups & landing pages use softer colors it makes sense that red would pop against the usual blues/whites/greens.
I always use the example of Resume Baking because their CTA grabs so much attention and it’s clearly the strongest element above the fold.
But you might also try reworking your button copy which can have an equally huge effect.
Think about what’s going through the mind of your typical visitor when they see your form.
For example, if you run a web design blog offering a free iconset then you could try a few different styles for your button copy:
- Download Now
- Get Your Free Icons
- Sign Up
The last option is probably the worst even though it technically describes what the user is doing.
In my experience the best copy speaks directly to the visitor like the 2nd example in that list. For whatever reason this encourages higher CTRs and more conversions.
You can always run multiple A/B tests and see which types of copy convert better. There is no single “right” way to do this so you have to be willing to test a lot.
Just don’t rule out the significance of your button as it relates to email signups.
The text size, button placement, color scheme, and the copy all factor into your signup rates.
Adding Multiple Opt-In Forms
If you have a fairly spacious layout you should try adding opt-in fields to many areas on the page.
This increases the chances of someone seeing your field and ultimately converting. Try to design each form a little differently so they all feel unique and grab attention individually.
But in a fully optimized layout you could probably squeeze an email optin form into the header, the footer, another in the sidebar and maybe even another one in a modal window.
Take a look at the Rayfeed page and you’ll see an email opt-in for both the page header & footer.
These both look similar and blend naturally into the layout. I personally would’ve tried to restyle the opt-in field in the footer so it looks more novel against the page, yet I bet this still converts really well.
If you have the space for an opt-in field then I say add it. There’s no harm in adding an extra field and you’re more likely to see higher conversions from that.
The example above is from Jeff Bulla's blog where he keeps an opt-in form right in the sidebar. This stays fixed and it offers a clear lead magnet for his blogging mastery e-book.
Jeff knows his audience and he knows that most people visiting his site will be interested in that book. It’s why this lead magnet is featured everywhere including the modal opt-in window.
One other site that has a fantastic signup form is the web design blog WebDesigner Depot. This includes an opt-in form in the sidebar, the footer, and a very clear modal window capture.
Use these sites as examples to study and possibly clone on your own. There’s no reason to use all of these different variations but you should be willing to try a few and see how they work with your audience.
Maybe even setup a few different lists just to see which fields convert the best. This way you’ll know which forms are worth optimizing for higher conversions.
The Bottom Line
Your email list is a huge asset no matter what your site is about. Opt-in fields are the best tools for growing your list and I hope these design techniques can help you refine the style of your email opt-ins.
Follow these design techniques and see if you can improve them to increase your signups even further.
Every audience behaves differently so the best way to improve signup rates is to test a lot of ideas and see which ones work best for your site.
