Designing Magnetic Email Opt-In Forms That Encourage Signups

How can I encourage people to subscribe to my email list?

  • Your signup form should be above the fold and in plain view
  • Incorporate a lead magnet
  • Brand your signup forms
  • Keep UX in mind when using modal windows
  • Apply A/B Testing to evaluate issues

Email lists are the biggest feature of any large website. They allow webmasters to connect directly with their audience and share information about new posts, products, and pretty much anything.

You can radically increase email signups through A/B testing or even conversion tools or plugins for WordPress.

But a solid redesign and relocation of your opt-in field can also do wonders. In this guide, I’ll share some design tips that will not only help to increase conversions, but these tips will also help you create a more attractive email signup form.

Above The Fold Capture

If you really want to bring in new subscribers, then your signup form should be above the fold and in plain view.

The goal should be to grab attention without being annoying. This works better on a homepage rather than a blog post or inner page. If enough people visit the homepage, you’ll have a much wider audience placing eyeballs on your signup field.

daily positive signup

On the homepage of The Daily Positive, you’ll see the signup form is built right into the layout. It has a little block on the right-hand side that’s easy to access, right above the fold.

The copy is also attractive by offering tips for a more positive life. With just one input field, it’s also much easier to capture emails.

Below is another example from Lewis Howes’ website. The signup field is slightly larger and placed right under the header.

It’s also specific enough to grab attention, and it spans the entire width of the page.

lewis howes website

This is the best way to add a signup form. It’s unobtrusive but it also draws attention.

I really like the example on Gary Vaynerchuk’s site, which includes his Snapchat username. It even brands the email list as “the daily hustle,” which is sure to turn some heads from the people in his crowd.

gary vaynerchuk website

If you add a form above the fold, you should try to sell what the newsletter is for and why it’s valuable.

Copy is the determining factor, but first you need to get your signup form in front of people who might sign up.

Sweeten The Deal With Bonuses

The best way to increase signups is with a lead magnet. This can be anything from a free ebook to a free video or a list of tips.

The goal is to encourage more signups by offering something for free. If you can create something that’s valuable to your audience, then it’s a surefire way to increase conversions.

by regina signup form

On the homepage of by Regina, you’ll notice a small ebook icon next to the signup field.

This field promotes an 80-page guide made to help your brand stand out. The written copy is great but the ebook icon is also a big factor here.

If you can offer something of value, it’s good to include some type of visual near the signup field. Users notice graphics more than words, and once they know there’s a freebie involved, they’ll be more likely to hand over that email address.

You can see a very similar effect on Elembee which offers a free plugins guide with signup.

elembee signup form

The signup form is clean and uses a lot of friendly language. However, the graphic isn’t as enticing because it blends right into the layout.

In many cases, this can actually be a good thing. It’s a visual signal, indicating to the user that this form is part of the website and a natural field to interact with.

But the friendly copy and the “yes, please!” button really do help sell the signup.

When you create a lead magnet for your opt-in form, make sure it’s clear and legible. What good is a freebie if nobody can see that it’s there?

Be concise with your words and graphics. Be terse but approachable. Over time you’ll see improvements and you can always adjust with minor tweaks over time.

Branded Form Design

A website’s branding is one of the most important aspects for trust and authority. Users want to know that your site is a reputable place with good information.

The more you can brand your signup forms, the more trustworthy your email list will seem.

One of the best examples is on Smashing Magazine, where they refer to their newsletter as the “Smashing Newsletter”.

smashing email box

They use icons, a branded name, and related colors that mesh nicely with the website. It all portrays a level of trust and confidence, which makes the signup form really feel valuable to the audience.

You don’t always need an icon or vector graphic near the form to grab attention. Just a little branding with relevant colors and iconography can go a long way.

webdesigner depot optin

Your primary goal should be adding value and building trust with your audience.

Let visitors know your newsletter is worth subscribing to and that it contains great information. You can do this in many ways, but branded icons & colors are a step in the right direction.

Go Light With Modal Windows

Almost everyone would agree that modal opt-in fields are just plain annoying. They appear on top of the page content, block out everything, and you have to manually close them to keep reading.

So if this is true, then why do websites use them? Because they work.

But you really have to be smart about how you add them into your site. Some modals appear after a certain amount of time while others work on exit intent when the user’s mouse leaves the page.

You can make a decent user experience if you write a clear message that sells without being too pushy. The example on TOMS is fantastic.

toms modal optin

It has a very clear X button in the top-right corner, and the signup button text just reads “join the movement”. Nothing annoying or salesy about this copy.

One thing I despise is poor taste in modal design. Avoid using guilt to encourage signups. And make sure the “close” text isn’t in 9px font at the very bottom.

You want people to signup to your newsletter of their own volition, not through modal window extortion.

As much as I greatly respect Brian Dean from Backlinko, I absolutely loathe his modal window opt-in box.

backlinko poor ux modal

Let’s count the number of usability issues here:

  • It takes up the entire screen
  • Uses a video background to completely block out the page
  • No “X” close button anywhere
  • The only way to close is with a tiny link at the very bottom
  • This link reads “No thanks, I do not want higher rankings” (guilt much?)
  • Worst of all that link is inaccessible in some mobile browsers

I get it. Brian knows marketing and he’s probably tested this like crazy. It probably converts well.

But usability should never take a backseat to marketing unless you’re only interested in maximizing profit. In which case, this article is not for you.

There’s no denying that modal window opt-ins work great. But you need to be judicious with their design and implementation.

tnw conference modal

Small, clean, and simple is the best way to go. And make double sure that every visitor can close the window without a struggle.

If your modal isn’t too pushy and is easy enough to close, then you’ll annoy far fewer visitors while still increasing your email signups.

Over To You!

Email forms can only be repositioned so much before they need some A/B testing. The colors and copy you use can actually make a huge difference.

Just keep testing ideas to see which ones work. Over time you’ll learn lots about conversion rate optimization and you can apply this knowledge to other sites you make.

And if you’re looking for newsletter design tips for your email list, be sure to skim through our related posts:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.