The 3 Commandments of Sign Up Form Design

Imagine this scenario for a moment: You just finished creating the perfect email sign up form. You’ve written compelling copy, offer a valuable lead magnet and display it on every page of your blog.

But as you sit at your computer waiting for the email subscribers to flow in, little happens. Your conversion rates are low, and you begin to wonder, “Where did I go wrong?”

Unfortunately in this scenario, there’s one item that was missing from the quality checklist: effective design.

Good design draws the eye of your website visitors, keeps them engaged and plays a big role in getting them to sign up for your email list. And when you apply that to your sign up form, it could turn into higher conversions, more email subscribers, and ultimately, more sales.

But how do you know what design changes will help you form conversion rate rather than hurt it?

A little guidance from the pros can help.

In this post, our Creative Director (and web form expert!) Chris Vasquez shares his top three web form design tips. Not sure if you’re ready to implement expert design advice? Not a worry – you don’t need to have any design expertise to apply them. They’re just simple guidelines to help you design forms that are more functional, beautiful and convert like crazy.

So let’s get started.

1. Your design decisions must always be based on context.

“The overarching principle that I keep in mind when I’m thinking about forms is context. The best forms always have context,” says Chris.

Context is huge. Before you begin building a form, consider the content of the page where you’ll be placing your form, the goal of your form, the overall look of your site and the messaging of your copy.

All of these factors are the context which surrounds the design of your form. When you design for the context, you’ll see higher conversions.

This form from Atlas Obscura is Chris’ “favorite form on the internet” (as of right now, anyway) and is an excellent example of designing with context in mind:

The natural color scheme fits the site, which is dedicated to finding and listing obscure and curious travel destinations. The winding lines in the background of the form are reminiscent of those on a topographical map (which ties to travel). It also abstractly relates to the idea of wandering (or wanderlust), which speaks to their target audience.

The form is a great example of choosing colors and images with context in mind. While a modern form with bright colors and straight lines would feel out of place on this site, the above form fits perfectly, as it feels more natural and organic.

2. Make your forms functional.

“Let people get to your form,” Chris advises. “Don’t use huge images that are going to take forever to load, and don’t use images that are going to push the content of the form out of people’s view. Make it easy for people to see the form as a whole thing. Your imagery should support your message.”

Images in forms attract people’s attention – and they work, too. According to Kissmetrics, content with relevant images gets 94 percent more views than content without images. Wow!

But when you do use images, make sure they don’t distract from your main goal, which is to get people to fill out your form.

If your images make the copy too difficult to read or slow down the load time of your form, they’re not contributing anything to help you grow your email list. All it does is frustrate your website visitors and keep them from signing up to your list.

For an example of brand that uses images well, check out the form below from Muzli, the ultimate inspiration center for designers:

The image is compelling and works with the content to convey the benefit of signing up. And by placing the image below the content and form fields, the image doesn’t distract from the message or make the copy difficult to read.

3. Use contrast when you choose colors.

“Set your form apart,” Chris states. “Try to establish some level of contrast so that people aren’t blind to it.”

To get more people to notice your form and sign up, it needs to stick out and capture your visitors’ attention. To make this happen, contrast is key.

In this sticky horizontal form (aka, one that follows you down the page as you scroll) below, Dadsigner uses a yellow background and gray button to create contrast for both the form and the call to action button. This contrast catches people’s attention on the predominately white background of the site:

Build your own functional, contrasting and contextual forms.

Now that you know the three guidelines to create well-designed sign up forms, it’s time to build a beautiful one yourself. To help you along the way, Chris created a form builder that you can use for free (as long as you have an AWeber account). It’s super easy to use, and provides just enough features to help you cover the basics and create a compelling form.

“I wanted to make a super simple solution for people to create forms that don’t suck,” Chris says. “I did a lot of looking into how our more successful customers were using forms on their sites and I listened to a lot of customer feedback. I took all of that research and boiled it down into something that would make it easy for people to create simple forms that would make them successful.”

And he’s right about the simplicity – check out this form I built in less than five minutes using his form builder (so pretty!):

(If you don’t have an AWeber account, you can test out this form builder when you sign up for a 30-day free trial of AWeber!)

Do you have sign up form design advice that’s worked on your own forms? Share it in the comments section below.

Source: B2C