Contact Form Design: 15 Best Contact Page Examples of 2020

Disclosure: We sometimes use affiliate links which means that, at zero cost to you, we may earn a commission if you buy something through our links.

The average contact page converts a measly 1% of visitors – by far the worst-performing type of web form online businesses use. That’s a pretty uninspiring statistic that tells us one of two things: either contact forms suck or the majority brands are failing miserably to design contact forms that get results.

As an agency that’s drastically increased the conversion rates of contact forms for a collection of brands, we can safely say the latter is true. Contact forms don’t get the attention they deserve and this puts a serious dent in a brand’s ability to generate qualified leads.

#1: The multi-step approach

General best practices say you should keep your contact forms as short as possible and you’ll find countless test results saying contact forms with four fields or less perform most effectively. But what happens when you really do need more than four fields on your forms?

Well, in these cases, you might be better off going with a multi-step form:

The animation above is purely an example of a multi-step contact form design (courtesy of Mary Lou over at Codrops) to show how they can work. Instead of presenting users with six fields, multi-step forms create the illusion of only needing to fill in one, making that initial effort seem less demanding.

We can tell you from experience that multi-step forms really do work – and not just for contact forms either. In fact, we’ve seen as much as 300% conversion rate increases from implementing multi-step contact forms in place of traditional designs.

#2: The classic-but-minimal approach

In contrast to the multi-step design in our first example, the classic-but-minimal approach is generally the way to go when you only need a name, email address and a message from users.

The example above is the contact form on Leadformly – a tool that helps you create forms designed to convert. The rest of Leadformly’s website has forms optimised to generate leads (including multi-step forms), but when it comes to the contact page Leadformly goes for the absolute minimum.

#3: Hootsuite

Like many brands in the SaaS game, Hootsuite has a problem on its hands when it comes to contact page design. Hootsuite provides a wide range of marketing solutions for companies, which means customers could be getting in touch for any number technical issues with various products – in addition to the general inquiries you would expect from any contact form.

The question is, how do you create a single contact page to handle all of this? Well, Hootsuite starts by dividing it into two distinct sections:

So there’s no single contact form that does it all here – and there’s no rule saying there should be. Hootsuite chooses to start by guiding users to the relevant department/area of the site. First of all, this tells people what kind of tasks they can expect help with and it also reassures them that they’ll be speaking to the right people, rather than asking technical questions to sales staff, for example.

Once users choose which team they want to speak to they’re auto-scrolled down to the relevant part of the page with more options.

So still no contact form in sight but, once you click on the Contact Sales button, the suspense is finaly over. And the contact form itself? Well, here it is:

Okay, so not the most inviting of contact forms perhaps, but users are already invested in the idea of getting in touch by this point, meaning form length becomes less of an issue. Does this mean the form couldn’t be improved? Well, no, but the point we want to make with this example is that one form on your contact page might not be enough to handle everything.

#4: Scribd

Proof that Hootsuite’s approach can be made a little prettier is easy to find over at Scribd. The online publishing company calls out to six different types of inquiry, allowing it to send users to the relevant contact form or page of the site.

Click I need help! and this handy box pops up, providing access to general support information and a contact button.

Click on one of the other boxes and you might be taken to a different contact form or your email client might boot up for you to send an email directly. Scribd has built multiple functionalities into a single contact page that doesn’t look overcrowded with options – a great achievement.

#5: Zendesk

Zendesk goes for conventions ahead of creativity with its own contact page, opting for the classic contact form with a drop-down list of options. This is the easy HTML solution to creating a single contact form for all types of inquiry and – guess what – Zendesk proves it can work rather nicely.

This allows Zendesk to maintain a simple, sleek contact page that also provides a dedicated section for product support, without any of the clutter you find on some pages that try to cram too much in.

So remember, sometimes the simplest solutions are the best when it comes to conversion optimisation. Don’t make things unnecessarily complicated.

#6: WP Engine

As one of our top recommendations for WordPress hosting we’re glad to see WP Engine provide a contact form worthy of this list.

Once again, it’s a case of simplicity coming out on top in this design. The real standout feature on this contact page, though, is that bold 24/7 support panel, which is so important to any hosting provider. WP Engine has got its priorities in perfect order here, giving its customers the quickest possible access to technical support for any issues they might experience. The lesson here is to know what’s most important to the people landing on your contact page.

#7: Infusionsoft

Infusionsoft takes the WP Engine concept even further by dropping its form below the fold for the contact page. Instead, the emphasis is all on live chat although there are various other contact options accessible further down the page, including the usual form.

As we’re seeing in a lot of our examples today, contact forms aren’t always in the first view of the page anymore. However, Infusionsoft is the first example to push its form down the page in favour of a different messaging format.

#8: TopTal

If people really hate filling out your forms, why not give them another option? TopTal puts a column of important contact details alongside its form and they’re all clickable. So users can click to call from their smartphone or tap to open up a new email draft.

It may not be anything groundbreaking visually but, in terms of functionality, it’s offering users a lot. This is a solid approach that could easily be given a makeover to give it more visual punch and make a contact page designed to convert.

#9: Pixpa

Pixpa goes for the unintimidating three-field contact form and, aside from using the default Submit button, there’s not much wrong with that. What really sets this contact page apart, though, is the use of calls-to-action above and below the form itself.

Before users can fill out a single field they’re reminded about why they should be signing up for a free trial instead. That’s not just any call-to-action sitting above the contact there either, it’s a damn good one – and the one waiting just below it is arguably even better.

After all, who wants emails when you could be getting sales instead?

#10: Yummygum

Dutch design studio Yummygum opts for a two-step process to its contact form, which pops up as soon as users click the Contact button located in the site’s header.

Notice how the copy is very friendly, quite literally inviting people to get in touch with its team. You might not be comfortable with such a casual tone for your own brand (birds and bees anyone?) but you can see the benefit of choosing welcoming language on your contact page.

Hitting the Meeting for a coffee option brings up a nice and short general enquiry form while the Your great project selection returns a more in-depth form.

We won’t tell you what the Birds and bees option comes up with.

#11: Mary Lou’s fullscreen design

Our first example today was a multi-step concept by designer Mary Lou and we’re back with another piece of work by the talented woman. This time we’re looking at a fullscreen, multi-step offering that would make a fine alternative to the traditional contact page.

This concept would be perfect for the kind of no-contact-page approach used by Yummygum, where the form pops up as soon as users click on your contact button.

By guiding users through each stage of your form, you’re able to get more information from them without those lengthily forms that put so many people off.

#12: Active Campaign

Active Campaign brings us back to design concepts for contact pages that need to offer multiple options for users. We’re not talking about the most exciting design either, but it really gets the job done in a simple, effective way.

Each option is made perfectly clear to users and Active Campaign is able to provide the relevant form (or another resource) depending on their answer. Few of the examples we’ve looked at today provide visitors with six distinct options in such a concise way.

#13: Envato

Envato runs a full suite of online services across multiple sites, making its customer service demands pretty epic. So the company’s contact page first needs to direct users to the most relevant site for their needs.

The contact page itself looks more like a homepage/landing page design than anything else, but it helps users narrow down on what they’re looking for. People can then click the Envato site/service they need and they’ll be directed to the relevant panel.

It’s an interesting design approach and one we think could be useful if you also have multiple services spread across different sites. That said, Envato could have done a lot more with this implementation to create a better contact page.

Clicking any of the links provided simply takes users to one of Envato’s other sites. There are no options for contacting the relevant teams – in fact, there’s no way to contact anyone from Envato’s “contact” page. So, while we like the filter system the company has gone for, we recommend you don’t forget the actual purpose of a contact page if you take inspiration from it.

#14: The footer form

One approach we don’t see too often is footer form designs, but they can be highly effective. In addition to having a contact page, this approach puts a contact form in your website’s footer, essentially turning every page into a contact page.

In the case of Creative Design Architects, they’ve gone for footer forms instead of a dedicated contact page. However, we always recommend having a contact page as users tend to expect them and they’re also important for local SEO.

Getting back to the footer form, these can be a great way to get people involved with your brand once they reach the bottom of your page. Which is why you’ll see a lot of calls-to-action towards the bottom of important pages – and there’s no reason you can’t have both.

#15: The no-form approach

This may sound odd coming from an article looking at contact forms but Pagelanes comes up with an interesting no-form alternative for its contact page. Here the emphasis is on connecting via social media and users can also click to start an instant chat with the company’s support team – two modern alternatives to the classic contact form.

We still think it would be a good idea to have a form of some kind on the page, even if it was secondary to the social and chat integrations. That said, we always appreciate some alternative thinking and if this works for Pagelanes, we’re all for it.

Wrapping up

All of the examples we’ve looked at today have their own merits but none of them are perfect. Creating the ultimate contact page is an ongoing process that takes time, experimentation and plenty of testing. But each of the forms and contact pages in this list will provide you with some useful inspiration for tackling some of the biggest challenges in designing a contact page that converts.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover how we grew 3x websites from zero to 1M+ visitors