Customers want to connect — according to data from Sprout Social, 64% of consumers want brands to connect with them and build better relationships. 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. 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. 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.
Benefits of Contact Forms
How to Create a Contact Form
1. Log into your HubSpot account or create a free account.
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.
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".
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.
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".
Click on the "Contact us" form template to "Start" the form customization process.
6. Pick the contact elements you want to incorporate.
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".
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.
How to Create a Contact Page
- Log into your HubSpot account and select “Standalone page”.
- Select multiple contact properties and/or create new fields.
- Click “Follow-up” and then “Create follow up email”.
- Choose “Options” at the top of the screen.
- Choose the “Contact us” form template and then “Start”.
- Click “Style & Preview” at the top of the page.
- “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".
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.
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”.
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.
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.
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.
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'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 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 — 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
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 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
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 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
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? ›- Text field in action. Enter your name:
- Textarea field in action. Message:
- Radio button group in action. Red. ...
- Checkboxes in action. Apples. ...
- File input type (file upload) in action. Select a file to upload:
- Password field in action. Enter your password:
- HTML Drop-down select field in action. ...
- Submit button field in action.
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? ›- Add context to the contact. ...
- But keep it brief. ...
- Hide extra fields with conditional logic. ...
- Use the right type of form fields. ...
- Embed your form. ...
- Make sure your form is mobile friendly. ...
- Anticipate common questions.
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? ›- Go to your Contact >> Contact Forms >> Form.
- Scroll down to the Skins section.
- From the FIELDS (CF7 SKINS ITEMS) section, drag and drop a new HTML element to the desired position in the form.
- Click the Edit icon of the HTML element.
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 a <h2> tag for the title and add a <div> element with a class "container".
- Create a <form> element and add an action attribute with a "/form/submit" url.
- Create four <label> elements with the following id attributes: "fname", "lname", "mail", and "country" and "message".
- Add the contact form HTML. ...
- Sanitize the contact form data. ...
- Validate the contact form data. ...
- Display the validation messages. ...
- Send an email to the WordPress administrator. ...
- Wrap up the code in a shortcode callback. ...
- Add a dedicated JavaScript file. ...
- Validate the contact form.
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? ›- Choose a WordPress form plugin.
- Install the plugin on your WordPress website.
- Create a new form.
- Add form fields to your form.
- Embed the form into a page or post on your website.
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? ›- Choose an HTML editor. (Image Source: Paperform) ...
- Create a new file with the. HTML extension. ...
- Create a new file with the. PHP extension. ...
- Generate the PHP code to capture form data. Your forms are connected. ...
- Create your HTML contact form. ...
- Add additional fields.
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? ›- <input>
- <label>
- <select>
- <textarea>
- <button>
- <fieldset>
- <legend>
- <datalist>
- 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. ...
- Step 2: Make the Multistep Form Functional Using JavaScript. ...
- Step 3: Design the Form and the Step Elements Using CSS.
- Access your HTML editor. ...
- Enter this standard link tag wherever you'd like the click-to-call button to be placed: <a href=""></a>
- Enter your business's phone number(excluding dashes) in-between the quotation marks: <a href="8665562570"></a>
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.
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? ›- Log into WordPress and open the Dashboard.
- Click Plugins > Add New. ...
- Search for "Constant Contact."
- On the Constant Contact Forms option, click Install Now.
- Click Activate.
- Click Connect your account and enter your Constant Contact login information.
- WPForms. WPForms is the best contact form plugin for WordPress. ...
- Formidable Forms. Formidable Forms is another contact form plugin that comes with a drag-and-drop form builder. ...
- Forminator. ...
- Ninja Forms. ...
- Gravity Forms. ...
- Jetpack Forms. ...
- Contact Form 7.
Which is the best contact form for WordPress? ›
- 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.
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? ›- 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.
- Customize your forms. ...
- Automate email responses. ...
- Download and share.
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!
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.
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.
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.
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.
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.
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.
- Choose an option: ...
- From the Docs, Sheets, Slides, Forms, or Sites home screen, at the top, click Template gallery. ...
- Click Submit template. ...
- Click Select a document and choose the template file you created.
- Click Open.
- (Optional) To submit a copy of the file instead of the original, check the box.
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? ›
- 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.
Open Contacts and click. Create contact. Enter the contact's name and add any contact information.