Keep an eye on your inbox!
Hmm, that didn't work. Try again?

Building a better contact experience

Find out how to use good design and easy navigation to convert visitors into users.

Mat Vogels
December 7, 2015
Web design

The contact experience is often the last thing on a designer's mind when creating a website — and this needs to change.

The contact page or section is (usually) one of the most important parts of your entire website. It embodies the connecting point between you and your website’s visitors.

If you’re a freelance designer, or work in any business that needs leads, this could be the start of a valuable partnership (and hold huge monetary value).

So why is this experience often left to the last thought? Shouldn’t we invest as many resources in it as we do our homepages?

To create an effective contact experience, you need to strike a balance between navigation and form design. Your navigation needs to make it easy to find your contact form or page. And the form needs to be easy to understand and ask the right questions.

With that in mind, here are a few unique methods of giving people access to your contact form, along with examples of the patterns in action.

Contact tab / panel

A contact tab or panel can be a really effective way to present your contact form. Not only does it make navigation easy (because it doesn’t take the user to a new page), but it also uses a hint of interactive design that separates it from your average contact page.

With FlyCMS, clicking Contact in the main nav pulls up the contact panel — no matter what page you're on.

FlyCMS template

This Webflow template does a great job of subtly introducing you to a rich contact section.

Wherever a person is on your site, they’re just a click away from a wealth of ways to get it touch. Instead of sending the user to a new page, the Fly CMS template gives people everything they need in a simple and elegant slide-up panel.

The Essential template keeps a contact button front and center (or rather, bottom) at all times.

Essential template

Another popular Webflow template, Essential offers an even more unique contact interaction by displaying a sticky Contact button at the bottom of each page. When someone clicks, they’re greeted with a nicely designed contact form and useful contact information.

The Mill template brings in the contact form and info from the right.

Mill template

You can also slide your contact form in from the side of the page. The Mill template uses a slide-out interaction to make getting in touch easy, without taking up too much screen real estate.

Full-screen contact overlays

I love the idea of using overlays. They not only bring contact info instantly into view, but also isolate the experience so the viewer can focus on one thing: contacting you.

You can easily repurpose a full-screen overlay menu as a contact form to keep people focused on reaching out.

Codrops overlay examples

The popular design blog Codrops has put together a fantastic demo for full-screen overlays. You can easily recreate any of Codrops’ examples in Webflow, and just replace its content with a form or your contact info. To get started, follow our pop-up modal tutorial, and just give your “modal” a position of fixed full. (It’ll take some more tweaking with our Interactions panel to achieve some of Codrops’ designs.)

Contact sections

Sometimes your design doesn’t call for interactions or fancy slide-out contact forms. This is where a simple anchored contact section might shine. Often used on one-page websites, you can also add a contact section as the final call to action on every page of a multi-page website. Then just add a Contact link in your main nav and anchor it to each page’s contact section (like FlyCMS).

The single-page Tabbed template uses an anchor link in the main nav to bring you to the contact section.

Instead of sending people to a new page, give them an easy-to-access form or contact experience at the bottom of the page instead. This way, they can read through the whole page before they reach out, or go straight to the contact section via the Contact link in your main nav.

How do you help people get in touch?

Does one of your websites feature a unique contact experience? We’d love to see it! Share it with us on Facebook or Twitter!

5. Zestful

Zestful helps companies book fun, unique, and local group activities available through their platform. You might expect a site like theirs to scream FUN! Well they don’t disappoint. Their upbeat vibe supports their mission to help teams socialize outside the office without the usual headache that comes with event planning.

6. Petal

Petal is a younger company, but they stand out because design pervades the focus and direction of their marketing. Even their product (a new, no-fees credit card) features a stunning and unique design. Their website follows suit — it’s a breath of fresh air — with beautiful colors, generous whitespace, and clear, concise copy.

‍Petal’s website supports their mission of providing easy credit access by making credit feel simple, approachable, and maybe a bit fun too.

7. BankMobile

BankMobile’s website makes banking look hip and modern, as hard as that might sound. With bold colors, clearly presented information and a consistent feel throughout the site, we especially appreciate the unique horizontal scrolling section they use to walk through the UI on their mobile app.

8. Bonsai

Freelancers are constantly on the lookout for new tools and products to make managing their business easier — Bonsai focuses on checking as many of those boxes as possible with tools that range from invoicing and payments to proposals and contracts. With so many features in their platform, their marketing site needs to effectively explain and differentiate how their products can help freelancers. A dedicated page for each one does just that.

‍Bonsai provides detailed product overviews with dedicated landing pages for all of their major features.

Bonsai gets bonus points for creating an impressive resource hub for freelancers. They share survey data about rates, best tools for freelancers, and the top places to find new work.

‍Bonus points for great, useful content for their freelance audience.

9. AltSchool

As an education partner, AltSchool has an important story and mission that underpins their work. Their website does a great job sharing their story with photography, copy, and a consistently communicated mission: to enable all children to reach their potential.

AltSchool uses photography and to bring their mission as educators to the fore.‍copy

Ready to build a business site of your own but not sure where to start? We’ve got you covered. Check out our full business site rebuild course on Webflow University.

Did we miss any standouts? Let us know in the comments!

Mat Vogels

Mat is a web creator and evangelist at Webflow. Follow me at @matvogels.

You might also like...

More

Join the conversation

Get free web design insights...

In your inbox, every other week. And unsubscribe in a click, if you want.

Keep an eye on your inbox!
Hmm, something went wrong. Try again?

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.