8 Beautiful Contact Form Examples + How to Add Them to Your Website

8 Beautiful Contact Form Examples + How to Add Them to Your Website
Colin Newcomer
Colin Newcomer Mar 18, 2020 — 8 min read
💥 Join 5K subscribers

The humble contact form – in some form or another, is the workhorse of nearly every website on the Internet. But while every website has a contact form, not all contact form designs are created equal.

To help you create a contact form that will achieve your business goals, we've collected eight contact form examples from real websites. For each example, we'll tell you exactly what it does well so that you know what to include in your form.

Then, to make this post nice and actionable, we’ll show how to create your own flexible contact form without needing any special knowledge.

Five tips to nail your contact form design

Before we get into the real contact form examples, let's take a quick detour and talk about what makes a great contact form. This detour will set the stage as we discuss what each contact form example does well in the next section.

You most likely have a contact form because you want people to fill it out. So how do you get more people to use it? Here are some best practices…

1. Clearly communicate what your form is for

If you have a busy business or website, you might have multiple contact forms for different uses. For example, it can be:

There are two basic approaches to handle this and you'll see both in the real-life contact form examples below:

  1. Separate forms. Create separate forms for each use case and add text that makes it clear exactly what each form does.

  2. A drop-down field. Add a drop-down field at the top of your form that lists the different use cases and automatically routes your contact form to the right spot.

Either way, use your form labels and surrounding text to make the purpose of each contact form absolutely clear to your visitors.

2. Limit form length for more conversions (but don't forget about quality)

All things being equal, the data seems to suggest that longer contact forms mean fewer submissions.

For example, HubSpot analyzed over 40,000 landing pages and noticed a clear correlation between conversion rates and the number of form fields.

The peak conversion rate is around three fields. The conversion rate steadily drops until eight form fields, before flattening out:

Contact form conversion rates based on the number of form fieldsSource

On a more anecdotal note, Marketo tested three forms with similar results to HubSpot:

  • 5 fields — 13.4% conversion rate

  • 7 fields — 12.0% conversion rate

  • 9 fields — 10.0% conversion rate

Of course, simply getting more contact form submissions might not be your real goal, so it's not quite as simple as just slashing the number of fields on your forms to the bare minimum.

For example, while you might get more submissions by reducing fields, those submissions might not be as high-quality because the barrier to entry is so low.

Overall, a good rule of thumb is to eliminate all unnecessary fields, but don't eliminate fields that collect important information just for the sake of shortening your form, especially if that information serves to qualify your leads.

3. Use smart microcopy to explain fields

If your contact form has more than just the standard “name, email, message” fields, you run the risk of confusing visitors.

For example, if you have a “budget” field, it might be unclear what that budget is for. Is it for the entire project? Is it for just a specific part?

To avoid such confusion, you can add “microcopy” to your contact form.

Microcopy is basically small explainer text that accompanies form fields to make them clearer. For example, look at the Payments volume field below (you'll see this example later on, too):

The use of microcopy in a contact form

4. Experiment with different formats

When most people think of a contact form, they picture the same basic embedded form that you see on most websites. But if you want to make it easy for people to get in touch with you, sometimes it pays to experiment with different display methods, like a popup or notification bar.

For example, having a floating contact button on the side of your site can be great for a support contact form. It makes it super easy for users to contact you right as soon as they hit an issue, without requiring them to search around for your contact page:

5. Tell people the next steps and set expectations

Your contact form design is not finished once people hit Submit!

To offer a better user experience, you want to tell people exactly what will happen next and how long it will take. For example…

  • Do you respond to all inquiries or only some?

  • How long will it take you to respond?

  • Will you respond via email or another method?

If you set clear expectations, your visitors won't wonder what's going on and if your form is even working.

Eight great contact form examples from real websites

Now that you know the best practices, let's look at some real-world contact form designs to inspire your own and show you these best practices in action.

1. Stripe

Stripe's sales contact form is a great example of how sometimes collecting a little extra information can make your contact forms generate more qualified leads (even if it might lower the baseline conversion rate a little bit).

Contact form example from the Stripe’s website

In addition to standard information fields, Stripe adds a Payments volume field so they can better understand the potential quality of each lead.

Beyond that, there are some other nice design choices including:

  • Social proof — those logos on the side add social proof by displaying all the successful businesses that use Stripe.

  • Microcopy — the term “Payments volume” might be a little confusing, so Stripe adds some helpful microcopy explaining how to fill out the field.

  • Purpose — Stripe makes it super clear that this form is just for sales inquiries. This makes sure they don't get people trying to use it for support or other non-sales uses.

2. Getsitecontrol

Here at Getsitecontrol, we handle our contact form design a little differently.

Rather than creating a dedicated “Contact us” page that visitors have to navigate to, we simply include a Contact us link that opens a popup right there and then – no page reloads required.

This is really convenient for people because they can…

  • access our contact form from any page on the site,

  • send a message without interrupting whatever else they were doing (like reading this blog post!).

The Getsitecontrol contact form is simple and easy to fill out. Plus, it clearly communicates the next steps after people submit the form, along with a CTA to check out the Getsitecontrol blog.

3. Kinsta

Kinsta has a single “Contact Us” page that automatically guides users towards the proper contact form without requiring them to reload the page.

Kinsta form example

Kinsta lists the five most popular contact requests:

  1. Pricing or plans

  2. Features or technical information

  3. Request a migration or any related question

  4. Guest post, sponsored post, or backlink request

  5. Anything else

When users select their goal, Kinsta either displays a personalized contact form or a message.

This allows Kinsta to collect exactly the information that they need, without burdening visitors with extraneous fields.

For example, on the Pricing or plans contact form, Kinsta adds extra fields to understand how many websites and visitors the person is looking to host, but those fields don't appear on the “Anything else” form.

Kinsta also sets clear expectations at the top – “We will be in touch within one business day”.

4. Choice Screening

Choice Screening has a long contact form. At first glance, you might think that will kill the form's conversion rates. And that is kind of true — Choice Screening will undoubtedly receive fewer form submissions than they would with a shorter form.

Choice Screening contact form example - long version

But let’s talk about why sometimes that's ok, and why this is a great contact form example.

Choice Screening operates in a very specialized, business-to-business space. They're trying to get qualified leads who are going to turn into long-time customers, not just contact form submissions.

With its detailed services list and many checkboxes, the form will weed out people who aren't sure what they want yet and only let through qualified leads that have a great chance of turning into customers.

You could say that Choice Screening is screening their potential customers with this contact form!

5. Joel Klettke / Business Casual Copywriting

Joel is a professional copywriter, so you can bet his contact form design and copy are going to be on point.

Lead gen form example for a business copywriter

Joel's form itself is simple, with the standard fields plus some extra qualifying fields for a person's budget. It's everything going on next to the form that makes this such a good contact form example, though.

In that text, Joel does a great job of setting expectations and qualifying his leads. He also purposefully drives away low-budget clients by discussing his minimum rates. While Joel could remove these mentions to get a higher upfront conversion rate, doing so would actually lead to a lower percentage of qualified leads and just end up wasting Joel's time.

6. Neil Patel

Neil Patel runs one of the most popular digital marketing websites in the world, so you can be fairly sure he gets a lot of contact form submissions.

Neil Patel’s brief contact form example

To help route those submissions to the right spot, Neil includes an “I'd like to chat about” drop-down where people can choose from a pre-set range of options. He also uses some microcopy in the placeholder box to implore people to keep their messages short and to the point.

This one is simple – but sometimes simple is all you need in your contact form design.

7. Focus Lab

Ok, this one is fun, whimsical, and definitely won't work for every business. But if you're in a creative space (which Focus Lab is), creating a whimsical contact form design like this can show that you're able to think outside the box.

Focus Lab creative contact form design

Rather than creating a traditional form, Focus Lab uses more of a Mad Libs-style approach where visitors enter their information in an existing paragraph. By using this approach, Focus Lab is also able to collect more information (like goals and budget) without the imposing look that a more traditional contact form design might have.

8. CAMICB

CAMICB, short for Community Association Managers International Certification Board, offers certification for community associations in the USA.

CAMICB contact form popup created in Getsitecontrol

The notable thing about the CAMICB contact form is that it uses a hybrid popup/“Contact Us” page approach. When users land on the Contact Us page, the CAMICB website instantly opens a simple popup contact form where visitors can submit their messages.

With just three fields, CAMICB keeps its form short and to the point. Then, the popup approach creates a nice distraction-free interface where the focus is entirely on the form.

This makes submitting an inquiry about as frictionless as possible.

And to make things even easier, CAMICB also displays a slide-up contact form that users can access in its footer:

Expandable contact us tab placed at the bottom of a webpage

How to create your own customizable contact form design

After browsing through those eight contact form examples, you've probably got a bunch of ideas bouncing around of how you can apply these principles to your own contact form designs.

If you want to get started, [Getsitecontrol](/website-contact-form/ can have you up and running in no time.

Unlike most contact form solutions, Getsitecontrol lets you choose from four flexible positions and dozens of templates for your form. You can create a traditional popup like the one you saw with CAMICB and the Getsitecontrol website. Or, you can shake things up with slide-ins, notification bars, buttons, and more.

You'll be able to add as many (or as few) fields as you need to get qualified submissions, and you can also insert microcopy to help visitors fill out your form.

Sign up with Getsitecontrol today and you can have a working contact form in just a few minutes.

Colin Newcomer is a freelance writer with a background in SEO and affiliate marketing. He helps clients grow their web visibility by writing primarily about WordPress and digital marketing.

Main illustration by Icons8

Tips for your marketing strategy