Imagine this scenario for a moment: You finished creating the perfect email sign up form. You have written compelling copy, offer a valuable lead magnet & display it on each page of your blog.
The good design draws the eye of your website visitors, keeps them engaged & plays a big role in getting them to sign up for the email list. When you apply that to your sign up form, it can turn into higher conversions, more email subscribers, ultimately, more sales.
How do you know what design changes could help you form conversion rate rather than hurt it?
A little guidance from the pros could help.
In this post, our Creative Director (web form expert!) Chris Vasquez shares his top 3 web form design tips. Not sure if you are ready to implement expert design advice? Not a worry – you do not need to have any design expertise to apply them. They are just simple guidelines to help you design forms that are more functional, beautiful & convert like crazy.
Your design decisions must be based on context.
Chrissays“The overarching principle that I keep in mind when I am thinking about forms is context. The best forms have context,”
Context is huge. Before you start building a form, consider the content of the page where you will be placing your form, the goal of your form, the overall look of your site & the messaging of your copy.
These factors are the context which surrounds the design of your form. When you design for the context, you will see higher conversions.
This form from Atlas Obscura is Chris’ “favorite form on the internet” and is an excellent example of designing with the context in mind.
The natural color scheme fits the site, which is dedicated to finding & listing obscure & curious travel destinations. The winding lines in the background of the form are reminiscent of those on a topographical map. It also abstractly relates to the idea of wandering, which speaks to their target audiences.
The form is a good example of choosing colors and images with the context in mind. While a modern form of bright colors & straight lines would feel out of place on this site, the above form fits perfectly, as it feels more natural & organic.
Make your forms functional.
“Let people get to your form,” Chris advises. “Do not use huge images that are going to take forever to load, and do not use images that are going to push the content of the form out of people’s view. Make it easy for everyone to see the form as a whole thing. Your imagery should improve your message.”
According to Kissmetrics, content with relevant images gets 94% more views than content without images. Wow!
But when you do use images, make sure they do not distract from your main goal, which is to get people to fill out the form.
If your images make the copy too difficult to read/slow down the load time of your form, they are not contributing anything to help you grow your email list. All it does is frustrate your website visitors & keep them from signing up to your list.
For an instance of a brand that uses images well, check out the form from Muzli, the ultimate inspiration center for designers.
The image is compelling & works with the content to convey the benefit of signing up. And by placing the image below the content & form fields, the image does not distract from the message/make the copy difficult to read.
Use contrast when you select colors.
“Set your form apart,” Chris states. “Try to establish some level of contrast so that people are not blind to it.”
To get more people to notice your form & sign up, it needs to stick out & capture your audiences’ attention. To make this happen, contrast is key.
In this sticky horizontal form, Designer uses a yellow background & gray button to create contrast for both the form & the call to action button. This contrast catches everyone’s attention on the predominately white background of the site
Build your own functional, contrasting & contextual forms.
Now that you know the 3 guidelines to create a well-designed sign up forms, it is time to build a good one yourself. To help you along the way, Chris created a form builder that you could use for free (as long as you have an AWeber account). It is super easy to use and provides just enough features to help you cover the basics & create a compelling form.
“I wanted to make a super simple method for people to create forms that do not suck,” Chris says. “I did looking into how our more successful customers were using forms on their sites & I listened to a lot of customer feedback. I took all of that research & boiled it down into something that would make it easy for people to create forms that would make them successful.”