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

You’ll be able to create an inline or a pop-up form for your website within minutes.

Let’s dive right in:

• Five tips to nail your contact form design
• 8 contact form examples from real websites
• How to create a contact form of your own

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 before we discuss what each contact form example brings to the table 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 the best practices.

1. Design your contact form with queries in mind

Many businesses use a single contact form to receive various types of messages. For example:

• Sales inquiries
• Customer support
• General queries
• Callback requests
• Feedback
• Etc.

There are two basic approaches to handling this scenario:

1. Dropdown menu. Create a simple, generic form with a dropdown list of query types to let visitors indicate what their message is about. The form fields will remain the same regardless of the query, but it will make it easier for you to sort through incoming messages.

2. Skip logic. Create a multistep form that will guide visitors to the corresponding form page, pre-designed for the type of query they selected:

The latter approach is a bit more complex because it requires you to use skip logic and branching. However, it also provides you with more flexibility when creating the form and lets you collect information with higher precision.

Regardless of the approach you choose, use your form labels and surrounding text to make the purpose of each contact form absolutely clear to your visitors.

2. Create a dedicated contact form for your social media

If you have a large volume of queries coming through your social media accounts – or if you don’t have a website yet – consider creating a dedicated online contact form instead of relying on DMs.

You can use online form builders, like Getform, to create such a form and then just link to it from your Bio or About page.

A dedicated online form has two benefits. First, it allows your followers or potential customers to send their query without leaving the platform. Second, it helps you better organize incoming queries and send an automated response to those who fill out the form.

3. Limit form length for more conversions (but don't sacrifice quality)

Data suggests that longer contact forms lead to 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:

Source

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

• 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 may 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.

However, 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.

4. 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 short explainer text that accompanies form fields to make them clearer. To get an idea, look at the Payments volume field below:

5. 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, it is worth experimenting with different displaying 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 as soon as they face an issue, without having them look around for your contact page:

6. Tell people the next steps and set expectations

Your contact form design does not end with the Submit button!

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.

💡 To describe the next steps, you can use a submission success message (on the second page of the form) or a submission confirmation email (we’ll show you how to set it up at the end of the article).

Eight great contact form examples from real websites

Now that you know the best practices, let's take a look at some real-world contact form designs to inspire your own.

1. Stripe

We’ve already mentioned Stripe’s sales contact form earlier in this article, but we have something to add about it. It 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).

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 very clear that this form is just for sales inquiries. This ensures that people won't use it for support or other non-sales purposes.

2. Public Goods

At first glance, Public Goods uses a simple, minimalist contact form design. While it resides on a dedicated Contact page, this form could easily be embedded sitewide as well.

What sets this form apart is the skip logic feature we discussed earlier. If you toggle between the options in the dropdown menu, you’ll notice how the form adapts by displaying additional fields or renaming them based on the selected query.

Furthermore, Public Goods also does a great job of setting expectations about the average response time.

3. 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 included a Contact us link in the footer 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!).

Overall, the Getsitecontrol contact form is simple and easy to fill out.

4. 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 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 too many 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”.

5. 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.

But let’s talk about why sometimes that's ok, and why this is still 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 who are likely to become customers.

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

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.

To help route those submissions to the right place, 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 microcopy in the placeholder box to ask 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 environment (which Focus Lab is), creating a whimsical contact form design like this can show that you're able to think outside the box.

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.

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 pop-up contact form where visitors can submit their messages.

With just three fields, CAMICB keeps its form short and to the point. Also, the pop-up 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:

How to create your own contact form

After browsing through those eight contact form examples, you've probably got a bunch of ideas, and you are wondering how you can apply these principles to the design of your own contact form.

If you want to get started, Getsitecontrol can have you up and running in no time. Unlike most contact form solutions, Getsitecontrol offers dozens of ready-to-use templates and lets you customize their design and position on the page.

You’ll be able to create a contact form within 20 minutes, even if you have zero experience. Here is how 👇

Step 1. Select a template

Open the template gallery on the Getsitecontrol website and pick a form. There are several options, including pop-up forms, panels, and slide-ins; but for this tutorial, we’ll use an inline form template.

An inline form is embedded into a webpage, and you can choose to display it sitewide or on selected pages only:

Click on the template and add it to the dashboard. If you haven’t created an account by this point, you’ll be prompted to sign up using your email.

Worry not: no commitment or credit card is required, and there is a free plan available.

Step 2. Adjust text and design

Once you have the form opened in editing mode, you can change the default title, description, and field names. You can also remove unnecessary fields or add new fields, dropdown menus, radio buttons, checkboxes, and microcopy:

On the second page, you can add a brief text to confirm the form submission and place helpful links, such as your social media handles, new collections, or relevant blog posts.

Finally, if you’ve selected a template with an image, you can remove it or replace it with something that better aligns with your brand. Feel free to upload an image from your computer or select something from the built-in stock gallery:

To see how your contact form will look on mobile devices, switch to the mobile preview mode. Note that you can remove the image from the mobile version of your form and fine-tune sizing:

At this point, your contact form design and content are ready. Click Next → in the top right corner twice to open the Integrations tab and set up submission notifications.

Step 3. Set up submission notifications

You can receive real-time notifications about new form submissions via email. You’ll also be able to respond directly from your inbox. To set this up, simply add your email address in the Notifications section and type the subject line:

If you have a large volume of submissions though, you might prefer integrating the form with 3^rd-party software your team uses. You can choose among built-in integrations or connect hundreds of apps via Zapier.

Now, off to the last step! 🥳

Step 4. Embed the form into your website

Once you’re done designing your form, hit Save & close in the top right corner. Then follow the prompt to activate the form and copy its embedding code.

From there, you can embed the form wherever you want on your website. Here are the step-by-step instructions:

• for WordPress websites,
• for Shopify 2.0 websites,
• for websites on other platforms.

Your contact form will go live as soon as you complete these steps.

Step 5. Create a follow-up email automation (optional, premium feature)

If you want to go the extra mile, we recommend setting a follow-up automation and sending an email to those who fill out the form. It’s a good practice, and this feature is already built-in within Getsitecontrol.

You can use follow-ups to confirm form submission, explain what happens next, and share helpful information.

To create a follow-up email, select Follow-up on the form card:

On the next screen, add a new action and select Send email:

Proceed to create a follow-up email from scratch and type your message:

Before closing the editor, send a test email to yourself and open it from your desktop and mobile devices, to make sure it looks good on both. Then save the email and close the follow-up automation settings screen.

And that’s it!

If you’ve created a form but you’re struggling to connect Getsitecontrol to your website, head over to the step-by-step instructions.

If you’d like to create a different type of contact form, here are the guides to help you:

• Create a floating contact button
• Add a WhatsApp button to your website
• Create a pre-order form

Sign up with Getsitecontrol today and you’ll have a working contact form with a beautiful design in just a few minutes.