How to Create a Contact Form on Your Site (+ 7 Free Templates)

Get started with HubSpot Forms free
Kristen Baker
Kristen Baker

Published:

Customers want to connect — according to data from Sprout Social, 64% of consumers want brands to connect with them and build better relationships.

contact forms

The result? More than half of customers will increase their spending and three-quarters will increase their loyalty.

What does this mean for your business? That it’s critical to create multiple pathways for consumer connection. While new solutions such as chat bots provide instant response and traditional channels like email keep customers at a distance, there’s critical middle ground: Contact forms.

Here’s what you need to know about why contact forms matter, how to create forms (and pages) that make it easy for customers to connect, and the best ways to build out your contact forms for maximum impact.Grow Your Business With HubSpot's Tools for WordPress Websites

Let’s get started by talking about why contact forms are so important.

Benefits of Contact Forms

contact-form_0

Brands don’t exist in isolation. In a mobile-first, social-driven world, businesses are part of a larger societal narrative that speaks to the need for connection at scale and on-demand.

Companies capable of demonstrating relatability, humor and self-reflection in online customer interactions stand out from the crowd — and often forge connections that help drive long-term ROI.

Social media represents the fast-moving forefront of this connective current; sites like Facebook and Twitter empower real-time responses to consumer questions. Email inquires take longer and are less certain — customers are often unsure if corporate addresses listed on brand sites are there for general inquiries or specific questions.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

50 Free Coding Templates

Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.

  • Navigation Menus & Breadcrumbs Templates
  • Button Transition Templates
  • CSS Effects Templates
  • And more!
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more

The right contact forms and pages, meanwhile, help streamline customer queries and provide a sense of substantive connection: Forms promise recognition, review and response to customer concerns.

So, let's start by reviewing how to create a contact form. We're doing to cover the steps to do this within HubSpot — whatever software or tool you use, the steps should be somewhat similar.

Contact forms aren’t complicated — and they’re not meant to be.The goal of any contact form is to quickly collect customer information, identify key concerns and ensure this information gets to the right person in your organization. In many cases, contact forms are linked with automatic emails to ensure customers and staff receive confirmation of submission.

While there’s no single way to create a contact form, here’s a step-by-step guide to building a form with HubSpot's Forms Tool.

1. Log into your HubSpot account or create a free account.

how to create a contact form in HubSpot

To begin, log into your HubSpot account or create a free account if you don’t have one.

2. Click on "Marketing" and then "Forms" in the drop-down menu.

how to create a contact form in HubSpot

Next, head to "Marketing" and then, in the drop-down menu, click "Forms".

3. Open the "Forms" landing page and click "Create a free form".

how to create a contact form in HubSpot
Now, open the landing page for "Forms" to "Create a free form" — this is how you'll be able to customize your contact form.

4. Select your preferred form type.

how to create a contact form in HubSpot

Choose the type of form you want to create. In this example, we’ll use the the embedded form. Then, click “next” and you’ll see this page.

5. Choose the "Contact us" form template and then "Start".

how to create a contact form in HubSpot

Click on the "Contact us" form template to "Start" the form customization process.

6. Pick the contact elements you want to incorporate.

how to create a contact form in HubSpot

Next, choose the contact form elements you want to incorporate. You'll notice the form comes prebuilt with "Email", "First name", "Last name", and "Message" fields.

You can add other elements like "Address", "Phone Number", and even GDPR-related options as needed. You can also activate automatic ticketing or Captcha.

 

8. Click "Publish".

Screen Shot 2020-03-16 at 11.40.34 PM

And that's it! Click "Publish" and you're good to go. From here, you’ll be able to both share form links or copy and embed code directly into your website.

While embedded forms make it easy for visitors to quickly reach out and get in touch, they can also get overwhelmed by other elements on your site. Let’s dig into another contact option: The standalone page.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

50 Free Coding Templates

Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.

  • Navigation Menus & Breadcrumbs Templates
  • Button Transition Templates
  • CSS Effects Templates
  • And more!
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more

For the sake of consistency, we'll review the steps in creating a contact page in HubSpot in this section as well.

1. Log into your HubSpot account and select "Standalone page".

How to Create a Contact Page in HubSpot

Start by logging into your HubSpot account. Click on “Marketing” and then “Forms”. Then select “Standalone page”.

2. Select multiple contact properties and/or create new fields.

How to Create a Contact Page in HubSpot

Now select the multiple contact properties you want and/or create new fields for your form.

3. Click “Follow-up” and then “Create follow up email”.

How to Create a Contact Page in HubSpot

At the top of the screen, click “Follow-up” to land on the “Create follow up email” page.

Once here, you can create and save an email template that’s automatically sent to users after they submit your contact form.

This is a great way to make sure you acknowledge receipt of the contact form and give customers an idea of your typical response time.

4. Choose “Options” at the top of the screen.

How to Create a Contact Page in HubSpot

By choosing "Options" at the top of the screen, you can determine what happens after users submit your contact form — you have the option to display a "thank you" message or redirect them to another page.

You can also direct submissions to a specific email address and add links to reset the form after completion.

5. Click “Style & Preview” at the top of the page.

How to Create a Contact Page in HubSpot

When you click "Style & Preview", you can decide on the style of your input fields — default boxes, linear, round or sharp — in addition to your fonts and colors.

There's also an option to preview what your form will look like on desktops, tablets, and mobile phones prior to officially sending it out.

7. “Publish” to get your sharable link and embeddable code.

How to Create a Contact Page in HubSpot

Hit "Publish" to get your shareable link and embedded code, and you're done!

Now let's review some popular free contact form templates to help you through the processes we just covered.

Free Contact Form Templates

Looking for inspiration for your next contact form, or prefer plugins that work with your existing WordPress site? We’ve got you covered with these form templates.

1. HubSpot Forms Template

HubSpot Forms Template and Tool

HubSpot's Forms Tool for WordPress operates much like the web-based version of the software, but saves you a step if you're a WordPress user by integrating directly with your site.

The free plug-in lets you quickly build contact forms and pages with powerful customization, drag-and-drop email building, and live chatbot deployments. Plus, all website forms automatically sync with the HubSpot CRM.

2. WPForms Contact Form Template

WPForms Contact Form Template

WPForms is one of the most popular drag and drop form builders for WordPress. It comes with over 300+ ready-made form templates that can be customized to your exact needs. 

Choose from templates like contact forms, booking forms, registration forms, payment forms, and much more. WPForms also comes with powerful features such as smart conditional logic, instant notifications, spam protection, and entry management.

 

3. Colorlib Contact Form Template

Colorlib Contact Form Template

Colorlib — Choose from hundreds of free contact forms. Find one you like, click on it, then download the CSS3/HTML5 file to modify it in a way that suits your needs.

4. JotForm Contact Form Template

JotForm Contact Form Template
With more than 350 free forms available, there’s something for everyone with
JotForm. Click “Use Template” when you’re ready to get started with your contact form — then get a sharable link or embed form code in your website.

Note: Jotform integrates with HubSpot.

5. Gravity Forms WordPress Plugin Contact Form Template

Gravity Forms WordPress Plugin Contact Form Template

Gravity Forms lets you easily select form fields, customize form different elements, and embed your forms with time-saving tools, all from your WordPress site.

Note: Gravity Forms integrates with HubSpot.

6. Forminator WordPress Plugin Contact Form Template

Forminator WordPress Plugin Contact Form Template

The Forminator WordPress plugin is free and provides more than just form templates — you also get access to quizzes, surveys, polls and payment options.

A drag-and-drop visual editor makes it easy to create contact forms that align with your brand so customers can efficiently connect.

 

7. Metform Plugin Contact Form Template

Metform contact form template
Metform is a contact form plugin offering complete-drag and-drop functionality. You can build any contact forms, in just minutes, easily collect leads directly on your website, and send them to the HubSpot CRM. MetForm allows you to create any type of forms you want, including contact forms.

Begin Creating Contact Forms

The right contact form makes all the difference on your website. While business email addresses provide the option for customers to get in touch, they often make this process arm’s-length and seemingly obtuse.

Well-built contact forms and pages streamline customer connections and let your business quickly respond to queries and concerns to help build the consumer relationships that ultimately drive ROI.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Topics: Form Templates

Related Articles

Capture, organize, and engage web visitors with free forms, live chat, CRM, analytics, and more.

DOWNLOAD THE FREE PLUGIN

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO