10 highly effective trends in newsletter signup form design

Behind every great email newsletter, there is a strongly designed signup form.

Email newsletters are a powerful tool for communicating with your consumers, which is why there are so many of them out there. So, with all of that competition, how do you encourage consumers to sign up to your newsletter instead of the thousands of others out there?

The answer is through a strongly designed signup form. With a clever concept, a punchy design and a thoughtful approach, you can create an irresistible signup form that will encourage just about anyone to sign up to your newsletter.

So, to help you get on your way, let’s have a look at 10 popular ways that websites design their newsletter signup forms to get maximum subscriptions, and discuss how you can do the very same.

01. Make a free giveaway prominent in your design

People encounter a lot of email newsletter signup forms when browsing the internet, so try to ask yourself ‘what is something unique that I have to offer?’

Can you offer a generous discount on their first purchase if they sign up with you, or perhaps a free ebook download full of interesting information? Whatever it may be, design your newsletter signup form to promote that offer in an enticing way.

This signup design from By Regina offers a very professional looking ebook in return for signing up to the newsletter. This offer is made extremely enticing thanks to the brief glimpse of the ebook in question alongside the signup form, reinforcing the idea that this professional-looking guide is just a click away.

This design from J.Crew Factory really grabs attention, not only thanks to the bold typography and vibrant yellow bulb illustration but by using these design devices to offer a discount on their online store.

Discounts are a fantastic way to encourage people to opt into your email subscription as you’re targeting people who are already showing the intention of purchasing from your site – talk about giving the people what they want!

It’s hard to miss this powerful offer from TOMS thanks to the big, bold title and clean design. This generous offer of philanthropy is eye-catching, memorable, and very in-brand with TOMS as a whole. So, if you’re offering up a powerful message, pair it with a powerful design.

02. Go minimal

Minimalism is a big trend in the current design, and that includes sign up pages. Minimalism isn’t defined as a bare, empty, design but rather a design that has just the right amount of elements in it to keep it functional and beautiful.

So, when designing your signup form, give minimalism a go. Try to limit your amount of fonts, colors, and graphics to one or two, and put the focus on the function of your design like this following example does.

For example, this sign up page by Cocorrina goes simple but stylish by using straightforward, unembellished type and shapes and an overall design that just makes signing up for the newsletter a quick and easy endeavor.

Consider drawing back your design a few notches and embracing minimalism. Not only can it make for a beautiful looking signup form but it can help to refocus and prevent your design from looking overwhelming.

Create your own email newsletters in Canva like the Green Photo Employee Newsletter template.

03. Design your page in a way that gives prominence to your form

It’s true in real estate and it’s true in design – three of the most important factors in your design are location, location, location.

When designing your web page, take the time and care to select a prime location for your signup form. Try to find a spot where the eye naturally falls, is very easy to locate, and will work with your design.

For a handy guide to some top placement positions for your newsletter signup form, check out this diagram from Rafal Tomal below.

As you can see, some commonly successful areas to place your form are toward the very top of your page, toward the very bottom, and within your sidebar.

Let’s look at an example that uses two out of three of these placement suggestions in a successful way.

As you can see from this example, Penguin Books Australia positions one simple link to their newsletter signup at the very top of their page, right under the main logo. When clicked, you’re taken to the footer of the page where the full form is positioned.

The positioning of these two signup form sections fits in naturally with the page design, but still manages to attract attention by using the bold, eye-catching Penguin orange color.

Try these minimalist newsletter designs on Canva: Brown Minimalist Fashion Email Newsletter and Light Green Fashion Email Newsletter

04. Boost your design with images and graphics

Now, you can go entirely typographical with your design, but another very viable, very effective option is to introduce a graphic or image in some way to enhance your design and bring a unique visual flair to your signup form design.

There are a lot of ways to introduce graphics or images into your signup form, so let’s have a look at three different approaches to get the wheels in motion.

This design for Buscemi introduces a graphic in a very simple way. By simply using their colorful logo as a focal point, the otherwise sharp, simple signup design is broken up and the eye gets immediately drawn in towards the main body of type. Consider using a simple graphics (or even your logo) to help pull in attention and add a little color into your design.

Are you selling a product? Consider using a photograph of that product in use to give consumers a glimpse at what to expect from your newsletter. In the case of this signup design by M.Gemi, the use of a sophisticated, vibrant image paired with the promise of “a new kind of luxury” reinforces this brand’s tone of class and elegance, and hints at what users can expect when they click ‘sign up’.

Not a fan of sacrificing space for a graphic or photo? Consider using an image in your background just as Boast have done here. In this example, Boast help their signup form to stand out even more by using a vintage-inspired textured pattern as the background instead of a flat color.

Create your own email newsletter templates on Canva. Customize these designs: Pink and Light Blue Bordered Email Newsletter and Beige Minimalist Fashion Photo Email Newsletter

05. Design a visually powerful call to action

Just like the name suggests, a call to action is a piece of text that is meant to incite movement, action and encourage clicks. So, naturally, calls to action are very useful when it comes to encouraging newsletter sign-ups.

So, take some time to design yourself a punchy, powerful, and striking call to action that will garner attention and encourage people to enter their email details right away.

These designs from Marie Forleo’s site are a perfect example of two powerful calls to action – right from the bold phrasing of “Get anything you want” and “Create a life you love”, right down to the striking uses of color and type.

Remember, a bold call to action deserves a bold design, so make sure it stands out by using vibrant colors, a strong degree of contrast and eye-catching typefaces.

This newsletter design by Elembee uses four tiers of call to action – one in the header image, above the main body copy, above the signup form itself, and the final being the ‘start now’ button. Each of these calls to action are simple, punchy statements, are positioned carefully, and are designed strikingly and cohesively to encourage clicks.

Keep in mind that there’s no limit to the amount of calls to action you use as long as you ensure that they’re all logically placed and cohesively designed. Use vibrant, unexpected colors or use bold, contrasting type styles, whatever method you choose, just make sure that it leaps off of the page and invokes action.

06. Make the most out of visually appealing overlays

If you’re using a popup window to promote your newsletter signup form, something you should also consider is overlays.

Overlays are simply when the surrounding area of a website behind a popup is darkened or obscured in some way. Overlays help to put the focus on the popup and prevent any loss of legibility due to a busier background.

Plus, thanks to their ability to refocus the eye on the main message of your popup window, by using an overlay you can reportedly increase your email opt-ins by 400% according to Econsultancy. So, with that figure in mind, let’s look at two different approaches to using overlay effects.

This first example from Bonobos uses a dark overlay. This simple darkening of the screen behind the popup window helps to bump up the contrast between the sharp white box, and it puts the focus onto the popup contents.

Note how the overlay is not totally opaque, you can still easily make out the website underneath and see the content that you came to the site to consume.

Another frequently used alternative to the dark overlay is a lighter colored overlay, like this one from AYR. By using an opaque white overlay, the background content is still obscured enough to ensure that the popup is the focal point, but the lighter color scheme of the page is maintained.

Get the look with this template: Brown Breakfast Email Newsletter

07. Use text and imagery to visually depict what your emails offer

Generally speaking, people like to know what they’re getting themselves into, so try to design your newsletter in a way that will provide visual cues about what they can expect if they enter their email.

This example by Elle & Co. uses a clean, sharp design and simple visuals to help communicate to audiences exactly what they can expect from her newsletter.

The header image immediately introduces the newsletter topic in a simple, direct way. The body copy also breaks it down a little more, bringing attention to the frequency of emails and topics of some newsletters by bolding and highlighting the important pieces of type.

This example also uses reviews from people who have previously signed up. Each review is coupled with a photograph of that person and a link to their website to add another degree of authenticity to the reviews.

When designing your signup forms, try to use visual ways of communicating what your newsletter offers. Use striking header images, highlight portions of type, use visualized reviews to add some authenticity, just make sure it grabs attention visually and communicates strongly.

Create your own email newsletter templates on Canva. Customize these designs: Black Yellow Photo Email Newsletter and Black and White Vintage Email Newsletter

08. Blend sharp copy with flawless design

Just as much as it’s encouraged to get experimental with your design, get experimental with your copy. Don’t feel the need to settle for “Sign up now” as a title and “Submit” as the button type, get creative!

Try to tailor your copy’s tone to both your audience and your website’s overall tone. Are you very formal and eloquent, or more witty and colloquial?

These examples from xoSarah’s site use copy that is punchy, colloquial, and excited, and the design of the signup form reflects this perfectly. Since the copy is so bold and energetic, the type and colors complement this by being vibrant, bold and eye-catching.

This design by Devan Danielle takes a bit of a more sophisticated approach. By using the term ‘letters’ instead of ‘newsletters’ and using a much simpler, drawn back approach to the design, this signup page creates an elegant, minimal, and professional tone, while still being inviting and enticing.

Make sure that your copy style and design style complement each other. Going for a more sophisticated tone of voice? Consider using lighter, more muted colors, and cleaner typefaces. Using a cheerful, witty tone? Consider reaching for the bright colors and bold type!

09. Design for user options (but not too many)

A good tactic to give your audience some control with their email opt-ins is to allow them to choose what content from you they receive, and what they don’t.

So, consider integrating a little choice into your design in some visual way. For some inspiration, let’s look at a couple of designs that do that well.

By incorporating a simple tick box option into your design like American Eagle does in this example, you can give your users a degree of flexibility and control over their subscription.

Notice how this design as a whole is very simple and to the point, you don’t want to take up too much of your consumers time by making them make a huge succession of choices. Keep it simple, keep it quick.

Another effective method when giving your consumers choice is to visualize that choice in some way. Check out this example from Stella McCartney that provides an image above each clickable option to give users a hint at what content they will receive if they click that option.

10. Make your form leap off the page

Websites often have a lot of competing elements on them, so in order to draw attention to your signup form, you need to design it so that it really grabs attention and focuses the eye toward your form.

This design from Kate Spade immediately grabs attention by using a popup window, but it manages to hold that attention by subverting the rhythm of the page. The rest of the Kate Spade website is fairly linear, with strong horizontal and vertical lines, but by using a circular frame and bright yellow color this website design is broken up, and the focus goes to the popup.

This design for Bonobos uses bold type and a striking color palette to ensure that this design leaps off of the page. By using large type, a unique title and an enticing offer of 20% off, this design couples a lot of the previously discussed in a way that visually captures attention and directs the eye toward the signup form.

Over to you: Design your own newsletter sign up form today

Signup forms don’t sound like the most exciting of things to design but trust me, they can be. With some thought, time and care you can turn your signup form from boring to brilliant.

When designing your newsletter signup form, it’s a good idea to have a look through your inbox. What newsletters are you signed up to? Do you remember what it was that enticed you to sign up in the first place? Find what works, what doesn’t, what you have to offer, and find a unique way to visualize that concept.

Whether it’s a striking palette, a bold, witty typographical heading, a beautiful image of your product, or a mix of all of these things, work with your design until it feels equal parts eye-catching, effective and suited to your website.