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

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

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

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.

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

Benefits of Contact Forms

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

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.

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.

How to Create a Contact Form

  1. Log into your HubSpot account or create a free account.
  2. Click on “Marketing” and then “Forms” in the drop-down menu.
  3. Open the “Forms” landing page and click “Create a free form.
  4. Select your preferred form type.
  5. Choose the “Contact us” form template and then “Start”.
  6. Pick the contact elements you want to incorporate.
  7. Click “Publish”.

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 on Your Site (+ 7 Free Templates) (4)

(Video) Contact Form 7 Tutorial

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.

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

How to Create a Contact Form on Your Site (+ 7 Free Templates) (6)
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 on Your Site (+ 7 Free Templates) (7)

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 on Your Site (+ 7 Free Templates) (8)

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 on Your Site (+ 7 Free Templates) (9)

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

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

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.

(Video) Html Template for Contact Form 7

How to Create a Contact Page

  1. Log into your HubSpot account and select “Standalone page”.
  2. Select multiple contact properties and/or create new fields.
  3. Click “Follow-up” and then “Create follow up email”.
  4. Choose “Options” at the top of the screen.
  5. Choose the “Contact us” form template and then “Start”.
  6. Click “Style & Preview” at the top of the page.
  7. “Publish” to get your sharable link and embeddable code.

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 Form on Your Site (+ 7 Free Templates) (11)

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 Form on Your Site (+ 7 Free Templates) (12)

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 Form on Your Site (+ 7 Free Templates) (13)

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 Form on Your Site (+ 7 Free Templates) (14)

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.

(Video) How to create contact form in wordpress 2023

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 Form on Your Site (+ 7 Free Templates) (15)

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 Form on Your Site (+ 7 Free Templates) (16)

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

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

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

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

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.

(Video) How to Create a Contact Form in WordPress

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

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

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

How to Create a Contact Form on Your Site (+ 7 Free Templates) (20)
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

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

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

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

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

How to Create a Contact Form on Your Site (+ 7 Free Templates) (23)
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.

Topics: Form Templates Free Online Form Builder

(Video) Build a Contact us page template with Elementor and Contact form 7 Style 2

FAQs

How do I create a contact form on my website? ›

The easiest way to create a website contact form is to use an online form builder. There are dozens of websites and plug-ins (if you use WordPress) that can build forms in just a few clicks — no coding required. Most online form builders have templates, so you don't have to start from scratch.

How do I create a contact form in HTML? ›

  1. Text field in action. Enter your name:
  2. Textarea field in action. Message:
  3. Radio button group in action. Red. ...
  4. Checkboxes in action. Apples. ...
  5. File input type (file upload) in action. Select a file to upload:
  6. Password field in action. Enter your password:
  7. HTML Drop-down select field in action. ...
  8. Submit button field in action.

How do I create a free contact form in WordPress? ›

Go to WPForms » Add New in your WordPress admin area. It'll open form setup page. Enter your form name and select the Simple Contact Form. This will open WPForms drag and drop form builder, and there you'll see a ready-to-use simple contact form.

How do you make a good contact form? ›

Here are some simple ways to build contact forms that encourage people to approach your business.
  1. Add context to the contact. ...
  2. But keep it brief. ...
  3. Hide extra fields with conditional logic. ...
  4. Use the right type of form fields. ...
  5. Embed your form. ...
  6. Make sure your form is mobile friendly. ...
  7. Anticipate common questions.
Jan 27, 2021

How do I set up contact form 7? ›

Log in to the WordPress Admin Dashboard, go to Plugins → Add New and then type “Contact Form 7” in the search box. Once find, install and activate the plugin by clicking on Install → Activate. To display a form, open Contact → Contact Forms at your WordPress dashboard. You can manage multiple forms from this location.

What is a contact form on a website? ›

A contact form is a short web-based form published on a website. Any visitor can fill out the form and submit it to send a message to the site owner. Behind the scenes, your contact form triggers an email message to be generated and sent to your email inbox.

How do I add a contact form 7 in HTML? ›

Adding HTML links to your Contact Form 7 forms (with Visual...
  1. Go to your Contact >> Contact Forms >> Form.
  2. Scroll down to the Skins section.
  3. From the FIELDS (CF7 SKINS ITEMS) section, drag and drop a new HTML element to the desired position in the form.
  4. Click the Edit icon of the HTML element.
Nov 18, 2018

How to create a form in HTML with example? ›

To create an HTML form, we will use the HTML <form> element. It starts with the <form> tag and ends with the </form> tag. We can add the input elements within the form tags for taking user input. form elements, such as text box, textarea, etc.

How do I create a contact page in HTML and CSS? ›

Create HTML
  1. Create a <h2> tag for the title and add a <div> element with a class "container".
  2. Create a <form> element and add an action attribute with a "/form/submit" url.
  3. Create four <label> elements with the following id attributes: "fname", "lname", "mail", and "country" and "message".

How do I create a contact us form in WordPress without plugins? ›

Create a Contact Form in WordPress Without a Plugin
  1. Add the contact form HTML. ...
  2. Sanitize the contact form data. ...
  3. Validate the contact form data. ...
  4. Display the validation messages. ...
  5. Send an email to the WordPress administrator. ...
  6. Wrap up the code in a shortcode callback. ...
  7. Add a dedicated JavaScript file. ...
  8. Validate the contact form.
Dec 23, 2021

Does WordPress have a built in contact form? ›

By default, WordPress does not come with a built-in contact form, but there is an easy way to add contact forms to your site. In this article, we'll show you how to easily create a contact form in WordPress without touching a single line of code.

How do I create a fillable form in WordPress? ›

How to Create a Form in WordPress
  1. Choose a WordPress form plugin.
  2. Install the plugin on your WordPress website.
  3. Create a new form.
  4. Add form fields to your form.
  5. Embed the form into a page or post on your website.
Oct 11, 2021

How should a contact form look like? ›

Typically, contact forms always ask for the customer's name and email address. Forms usually have a space where the person can write and submit a message. In some cases, you might have more than one contact form on your website.

Is Contact Forms 7 free? ›

Price. Both Contact Form 7 and WPForms Lite are free forever. And, like we mentioned earlier, their feature sets are comparable, though ease of use is not. You can upgrade to the paid version of WPForms to access tons more features and powerful addons.

How do I create a Contact Form 7 PDF? ›

Generate PDF using Contact Form 7 plugin provides an easier way to download PDF documents, open the PDF document file after the successful form submission. Here, a user can set the document file (PDF) from the 'Form Setting' Page of each Contact form.

How do I make a simple contact form? ›

How to create an HTML contact form in six steps
  1. Choose an HTML editor. (Image Source: Paperform) ...
  2. Create a new file with the. HTML extension. ...
  3. Create a new file with the. PHP extension. ...
  4. Generate the PHP code to capture form data. Your forms are connected. ...
  5. Create your HTML contact form. ...
  6. Add additional fields.
Oct 31, 2022

What is contact form 7? ›

Contact Form 7 is a free WordPress plugin to create contact forms simply and quickly. Flexible thanks to the presence of many customizable fields, it also helps fight against spam. It is one of the most popular plugins in the official directory.

Do people use contact forms on websites? ›

That's where contact form comes into the stage. It's a great and easy way for letting people know that you are reachable directly through the contact us form that you use on your website. Another advantage of contact forms is to give the impression that you're always there to get their message.

Do I have to have a contact form on my website? ›

No contact form required. While that may be the case for some users, disregarding the importance of including a contact form on your website is considered to be bad UI and UX practice, and precludes your business from benefiting from the many marketing, SEO and online security advantages that a contact form can offer.

Which is the default HTML tag of Contact Form 7? ›

The default Contact Form 7 form uses paragraph elements (<p>Paragraph Content</p>) as the basis for the form.

Which HTML code is used to generate a form? ›

The <form> tag is used to create an HTML form for user input.

Can you create a form in HTML? ›

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. All the different form elements are covered in this chapter: HTML Form Elements.

What are the different types of forms in HTML? ›

The HTML <form> element can contain one or more of the following form elements:
  • <input>
  • <label>
  • <select>
  • <textarea>
  • <button>
  • <fieldset>
  • <legend>
  • <datalist>

How to create a form using HTML CSS and JavaScript? ›

Design the Form and the Step Elements Using CSS.
  1. Step 1: Create the Layout of the Form and Step Elements Using HTML. Let's set up a basic HTML form before we will implement the navigator for form steps. ...
  2. Step 2: Make the Multistep Form Functional Using JavaScript. ...
  3. Step 3: Design the Form and the Step Elements Using CSS.
Jun 10, 2022

How do I add a contact button in HTML? ›

How do you add a click-to-call button on a website with HTML?
  1. Access your HTML editor. ...
  2. Enter this standard link tag wherever you'd like the click-to-call button to be placed: <a href=""></a>
  3. Enter your business's phone number(excluding dashes) in-between the quotation marks: <a href="8665562570"></a>
Nov 19, 2020

How do I create a responsive contact form in HTML and CSS? ›

Responsive Contact us Form [Source Codes]

First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index. html and paste the given codes in your HTML file.

How do I customize a contact form in WordPress? ›

In the left-hand admin panel, click on Appearance and select the Customize option. Click the “Publish” button to apply the custom CSS. You can now view your form on your website to see the changes. Custom CSS is a very powerful tool when it comes to WordPress site design.

How do I create a popup contact form in WordPress? ›

Head to your WordPress dashboard and go to Popup Maker » Add Popup, and you'll see the popup editing screen appear. On this screen, you'll want to enter a name for your popup. Plus, you can also enter an optional display title as we did in this example. Your visitors will be able to see this optional display title.

How do I create a constant contact pop up form in WordPress? ›

Here's how to get started:
  1. Log into WordPress and open the Dashboard.
  2. Click Plugins > Add New. ...
  3. Search for "Constant Contact."
  4. On the Constant Contact Forms option, click Install Now.
  5. Click Activate.
  6. Click Connect your account and enter your Constant Contact login information.
Aug 15, 2022

What is the best free contact form for WordPress? ›

  1. WPForms. WPForms is the best contact form plugin for WordPress. ...
  2. Formidable Forms. Formidable Forms is another contact form plugin that comes with a drag-and-drop form builder. ...
  3. Forminator. ...
  4. Ninja Forms. ...
  5. Gravity Forms. ...
  6. Jetpack Forms. ...
  7. Contact Form 7.
Mar 30, 2022

Which is the best contact form for WordPress? ›

11 Best Contact Form Plugins for WordPress in 2023
  • WPForms. WPForms is a powerful WordPress contact form designed for even the most novice of website owners. ...
  • Gravity Forms. ...
  • Contact Form 7. ...
  • Simple Basic Contact Form. ...
  • Formidable Forms. ...
  • Contact Form by BestWebSoft. ...
  • Jetpack Forms. ...
  • Ninja Kick Sidebar Contact Form Plugin.

Are WordPress forms free? ›

Is WPForms Free? WPForms is the best form builder plugin for WordPress. The free version, WPForms Lite, is 100% free forever. It lets you build different types of WordPress forms quickly and easily using a drag-and-drop interface.

How do I create a free fillable form? ›

How to make a PDF fillable:
  1. Open Jotform. Create a free Jotform account and build your fillable PDF form from scratch — or upload an existing PDF form to convert it into a fillable PDF in a single click.
  2. Customize your forms. ...
  3. Automate email responses. ...
  4. Download and share.

Are contact forms outdated? ›

Because there's a common misconception that contact forms are an outdated method of communication, that nobody ever really uses them anymore, and that it's virtually impossible to screw up a simple form design anyway. All of these statements are myths.

Why do people use contact forms? ›

A contact form is a form in which your potential client can quickly get answers to all their questions. It's like a call center right on the site. A person writes their question, and your operator answers them. Sometimes it takes a while to get a response, but all communication occurs in the present moment.

How many fields should a contact form have? ›

Limit the number of fields to no more than 5, and make sure you have the correct tab order. You should also consider building a form conversation that guides your users through the survey one question at a time. This reduces distractions and keeps the form fields to one per page so users don't feel overwhelmed.

Is contact@ a good email address? ›

Email Address Tips

Do not use info@. That is an email address that spammers target. Instead, think of something more creative: hello@, contact@, letstalk@. Anything but info@, which will increase your spam levels exponentially!

What makes a good contact page? ›

A good contact page is clear

Besides an inviting look and feel, it is also important that your content section is usable. This means your visitors should be able to quickly understand what contact options there are and how it works. Also, forms and links should work as people expect to avoid frustration.

What is basic contact? ›

Examples of Basic Contact Information in a sentence

Provide your Company Basic Contact Information, which includes; Your company name Your company email address Your company phone number Your login password On successful completion, a verification link is sent shortly to the Contact Email Address provided.

Where should contact info be on a website? ›

Your name, street address, phone number and email address should be in an easy-to-find place on every page of your website. That's because many visitors will be arriving via the search engines through internal pages. Place those important details at the top or bottom of the page, or along one of the margins.

Should I put a contact form on my website? ›

The main benefit you get from a contact form is automating responses to questions from site visitors and looking professional. In addition, the contact form shows the potential customers that they are essential to you and that you are open to questions. It shows that you are a true professional and you can do business.

Do people use contact Forms on websites? ›

That's where contact form comes into the stage. It's a great and easy way for letting people know that you are reachable directly through the contact us form that you use on your website. Another advantage of contact forms is to give the impression that you're always there to get their message.

How do I create a Google contact form? ›

Create a new form

Choose an option: From forms.google.com, click Blank or choose a template. From drive.google.com, click New.

How do I create a contact form without plugins? ›

To add a contact form without a plug-in, you'll need to embed the form into your WordPress site. This involves copying an auto-generated string of code and pasting it into the text editor for your WordPress web page.

How should a contact page look like? ›

A well-designed contact page should include several elements, such as a phone number, email address, and social media links. In addition, a Contact Us page must be easily visible on your navigation bar. It can be frustrating for a consumer to hunt through a website to find out how to contact a company.

Can I use Google Forms for a contact form? ›

Creating Your Contact Form in Google Forms

Google actually offers a pre-made "Contact Information" form in the templates gallery when you first log into your Google Forms account.

What is the most important form to have on site? ›

Contact Form

The contact form is absolutely critical. Ignoring it could be the gravest mistake you ever make because it could result in you missing out on certain opportunities, like job offers or press passes to events.

Does Google Forms have a template? ›

Choose a form template

From any Google product, click on the grid icon in the upper right and then select the Google Forms icon in the apps library. Select Template gallery in Google Forms. Browse through the list of Work, Education, and Personal forms to click on a template you like.

How do I create a Google form template? ›

Create your own template
  1. Choose an option: ...
  2. From the Docs, Sheets, Slides, Forms, or Sites home screen, at the top, click Template gallery. ...
  3. Click Submit template. ...
  4. Click Select a document and choose the template file you created.
  5. Click Open.
  6. (Optional) To submit a copy of the file instead of the original, check the box.

How do I customize a contact form 7 plugin? ›

In the left-hand admin panel, click Contact Style and select the Add New option. The Contact Form 7 Style plugin page has a very detailed demo video on how to style a form. You can change the margins, background color, border color, button color, text box color, and much more.

Which plugin is best for contact form? ›

Best WordPress Contact Form Plugins in 2023
  • Gravity Forms – Starting at $59 per year.
  • Ninja Forms – Free (Memberships Start at $99 per year)
  • Everest Forms — Free (Premium Start at $49 per year)
  • Metform – Free (Premium starting at $39 per year)
  • HappyForms – Free.
  • Contact Form 7 – Free.
  • HubSpot All-In-One Marketing.
Dec 9, 2022

How do I make my own contact? ›

Open Contacts and click. Create contact. Enter the contact's name and add any contact information.

Videos

1. How to Create a Contact Form in WordPress - Using WPForms - EASY
(Nayyar Shaikh)
2. How to Add a Contact Form to a WordPress Site for Free (5 Easy Steps)
(WPBeginner - WordPress Tutorials)
3. How to Create a Contact Form in WordPress | For FREE!
(Create a Pro Website)
4. Creating A Contact Form Using Contact Form 7 WordPress Plugin | Contact Form 7 Tuts Part 1
(WordPress Tutorials - WPLearningLab)
5. How To Send Email from HTML Contact Form Without Any Backend Language
(EGATOR)
6. HOW TO ADD A CUSTOM CONTACT FORM 7 IN ELEMENTOR (Elementor Contact Form 7 Tutorial)
(GO TECH UG)
Top Articles
Latest Posts
Article information

Author: Sen. Ignacio Ratke

Last Updated: 06/28/2023

Views: 5890

Rating: 4.6 / 5 (76 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Sen. Ignacio Ratke

Birthday: 1999-05-27

Address: Apt. 171 8116 Bailey Via, Roberthaven, GA 58289

Phone: +2585395768220

Job: Lead Liaison

Hobby: Lockpicking, LARPing, Lego building, Lapidary, Macrame, Book restoration, Bodybuilding

Introduction: My name is Sen. Ignacio Ratke, I am a adventurous, zealous, outstanding, agreeable, precious, excited, gifted person who loves writing and wants to share my knowledge and understanding with you.