How to make a Contact Form in HTML - MightyForms (2023)

Launching a new business is challenging but it’s not the hardest part. Getting some traction for growing and scaling any business though, now that’s the tough stage.

Cue in contact forms.

Even if you’re not selling any goods or services, if you’re launching a project or promoting a cause, contact forms are the basic method for building an audience.

But your contact form doesn’t have to be basic.

Contact forms are a must-have for any website and every business for sure and with MightyForms, you can easily customize the colors and fields however you like.

Furthermore, our form builder offers powerful features and functionalities to take your simple Contact Us form to the next level.

Ditch those static, unreliable, and questionable downloadable contact us form templates.

You can even try your hand at creating your contact form in HTML. But MightyForms requires no coding knowledge for you to build a fully responsive contact us form to be easily embedded into your website on WordPress or Shopify, for instance.

Here’s the ultimate guide to advanced Contact Forms!

What is a Contact Us form?

Let’s face it, if it’s not online, your business doesn’t exist. You’ll need a website to introduce yourself to the world.

This communication shouldn’t be one-way only. You need to provide a channel for visitors to talk back, to reach out in case they want more information about your business.

Divulging a phone number is not ideal since it won’t always have someone available to pick it up. Providing an email address requires visitors to copy and paste it to their email app and might discourage contact. Besides being bait for spammers.

A Contact Us Form is just the most efficient channel for both the visitors and the business.

Just like a smiling host greeting visitors and prompting help, contact us forms offer a proper communication path.

By definition, a contact form is a short web-based form with fillable fields published on a website (usually found on the Contact Us page). It allows visitors to start interaction with a business by inputting their name, email address, maybe a phone number, and their message.

For visitors, a contact us form is conveniently available 24/7 from any device.

For businesses, contact forms ensure security, accuracy, and engagement. Not to mention a golden opportunity to increase your mailing list with qualified leads, building your audience.

What does a Contact Us form do?

(Video) How to Create a Contact Form for ANY Website

Simply put, a contact us form collects contact information and contact reasons from visitors. And it does so in a standardized format.

Instead of calling or sending email messages with incomplete information, a contact us form lets visitors know what information is really needed.

With that in mind, a contact us form should be composed of at least three essential fields: name, email address, and message.

How to make a Contact Form in HTML - MightyForms (1)

However, depending on your business model, you might need more fields. Maybe you need visitors to specify the reason for contacting you from a dropdown menu or provide detailed information about a product, for instance. So it’s very helpful when you get to customize your contact forms.

As you can see, a contact us form not only collects data but can also help you screen inquiries. You’ll be able to act fast on a potential sale or quickly address an issue.

At the same time, contact us forms allows you to build your audience. By collecting valid email address from visitors, you can nurture them into leads and hopefully, loyal customers.

A robust mailing list of qualified leads is just a valuable by-product of contact us forms on your website. Your sales and marketing teams will thank you.

How to create a Contact Us form

The early paperless forms required a lot of patience to build a contact form on any word processor. One key clicked wrong and the whole thing would collapse. Downloadable contact us form templates seemed a gift from heaven until you got a computer virus.

Then brave people came in and built contact forms from scratch, using HTML language. Those people walked so we could run today with form builders.

So, before we go over creating your contact us form template with the best no-code tool and be inspired by some contact us form examples ahead, let us appreciate the grind.

In case you know some computer language and would like to write your own contact form, here’s a quick tutorial on how to generate the HTML code for a contact form:

Create contact forms in HTML: step by step

An optimized contact form is an excellent tool to capture leads and receive messages from your visitors. However, writing the HTML code from scratch can be quite time-consuming.

In this step-by-step, you’ll be using HTML markups and CSS, and sometimes JavaScript to make sure the form’s appearance is top-notch. Making sure that the data is submitted and properly stored, then delivering a notification are backend processes.

1. Design your HTML contact form

Before you start coding your contact form, it’s best to decide what you want the end result to look like. Try drawing it out or using a storyboard so you have a visual example to guide you.

Protip: To create a responsive contact form, draw a mockup representation of what you want your form to look like, both on desktop and on mobile. This way your contact page will adhere to the mobile-first indexing of most search engines.

Be sure to outline as much as possible. How many fields do you want to include in your form? Are you creating a traditional form or a conversational form? Do you want to add a success message after the submission? You need to answer all these questions before you start coding.

(Video) How to Create a Form using MightyForms Form Builder

2. Create the HTML markup & CSS

Collect user input with a simple contact form with ‘Name’, ‘Email’, and ‘Message’ fields. You can later add more fields, with specific coding like a Single Choice field and Dropdown field.

How to make a Contact Form in HTML - MightyForms (3)

So under the <header> element of your page, add the HTML markup for the form’s header. Then </header>create a CSS file with the coding for your form’s style, such as the background color, font family, font size, and so on.

3. Add the Text Input Fields to the HTML code

Finally, you’ll be adding the input fields. It’s important to include what type of data the field should receive since it also helps the browser identify how it can help the user submit the form.

For example, using <input type="”email”"> on your code and depending on the browser support, the email submitted can be automatically validated. You can also add some styling to the Input fields using CSS.

Examples of Contact Us Forms in HTML

So now that you know how to create a simple contact form in HTML, here are some pretty creative examples to inspire your design. But don’t panic if you’re not familiar with HTML. We’ll also show you some incredible code-free contact form templates afterward that you can easily customize with the form builder.

Elegant Contact Form – by Mark Murray

How to make a Contact Form in HTML - MightyForms (4)

Clean Contact Form – by nick haskell

How to make a Contact Form in HTML - MightyForms (5)

HTML5 Contact Form by ssbalakumar

How to make a Contact Form in HTML - MightyForms (6)

7 Best Tips to create a Contact Us Form

Contact us forms are a must-have on any website. It makes your business approachable and it drives traffic as well since contact pages usually get more page views than any other section.

Whether you decide to write your contact form in HTML or let a form builder do the heavy lifting, there are best practices you should follow.

Consider these seven best tips to create a traffic-magnet contact us form:

How to make a Contact Form in HTML - MightyForms (7)

1.Compelling Design

Contact Us forms are in a sense your business card. It must represent your brand and blend in with your website’s overall style yet stand out elegantly. Tacky generic contact forms clashing with the rest of the page repels visitors.

2.Short and Essential Fields

Refrain from the temptation of extracting as much information you can get from a contact form. The average number of fields for contact forms is five. Form length is the second reason why people abandon a form (followed by security reasons). So keep it lean at first, only asking for the very essential. Otherwise, at least try to break it down as a multi-step contact form.

3. Optional Phone Number Field

I know it must feel natural to ask for a phone number on a contact us form but a required phone number field reduces form conversion by 5%. But don’t scratch off that field so soon. Another study shows that when you actually state and label this field as optional, it can DOUBLE the conversion rate. Some mind tricks work, I guess.

(Video) Build Your Business with MightyForms

4. Ensure Clarity

Filling out a contact form must be intuitive and hassle-free. Be clear of what input is expected by placing field labels and examples of answers as placeholders. Steer away from complex fields requiring special values or characters. Add a tooltip text to pop up explaining any field. Do not make visitors have to second-guess your contact form.

5.Location, Location, Location

Don’t play hard to get with your contact us form. Visitors will most likely fill out a contact form located above the fold on a page. Keep the introduction short, leave FAQs to the side, and display your contact us form at the top so you emphasize how much your business appreciates customer contact.

6.Engaging CTA

The call to action button is the key element on your contact us form. You don’t want to look desperate but it has to encourage visitors to click on it. “Click here” and “Go” are the most successful CTA copy while orange or red are the most enticing button colors.

7.Frictionless Submission

Visitors filling out a contact form are potential customers. You must provide a reliable and responsive contact us form that delivers from any device without a glitch. If visitors get an error or unresponsive submit button, they might begin to distrust your business.

The Best Tool To Create a Contact Us Form

If you’re thinking that a downloadable contact us form template or a contact form in HTML will do, hear me out. Yes, you’ll get to collect contact information but nothing beyond that.

Now let’s say you want to protect your contact form from bots and add more automation, like a reCaptcha, and a personalized success message, or an automatic email notification. That requires the more complex backend coding we’d mentioned before, which is why using a no-code form builder, like MightyForms, can be such a satisfying time-saver.

Once you sign up to MightyForms form builder, you can create multiple online forms that are responsive by default and have built-in functionalities and integrations that will help you capture more leads and streamline the workflow, while you track submissions.

MightyForms is the best tool to create a contact us form since it enables you to fully customize your form: resize and reposition any field, define style and color scheme, add a background image, or even add your own logo for brand presence.

Full design control is just the beginning. Once your contact us form is designed and published you can supercharge it with the following MightyForms features:

Logic Rules

Set up your contact us forms using conditional logic to make them user-friendly. The next question will only be triggered according to the previous answer, so only relevant fields are shown. Also, you can screen contact reasons and set up the next steps for each.

Field Justification

Not all fields are obvious to everyone. Ensure clarity by adding a tooltip text for each field on your contact form. When visitors hover over a field, the tooltip will show up explaining what and why specific information is needed.

Translated Contact Forms

How to make a Contact Form in HTML - MightyForms (8)

Even if your business is not global, your audience might be international. Keep in mind that 65% of shoppers prefer website content in their language. Contact us forms by MightyForms have easy integration with Weglot, for auto translating embedded forms.

Success Messages

As mentioned before, a contact us form is a channel of communication and MightyForms keeps the conversation going on. After visitors fill out and submit your contact form, you can set up an automatic confirming message to let them know it was well-received and how long they can expect a reply back.


Remember when I said contact forms by MightyForms are more than static contact us form templates? You can set up automatic notifications to be sent via email or SMS to you after each new submission. Combine it with Logic Rules to screen your submissions and channel each contact reason to the appropriate team.

Form Tracking

Every visitor counts and you never know who might become that one customer that turns struggling business around. MightyForms lets you track in real-time every contact form being filled out, even abandoned ones. Easily recover lost leads or learn more about your visitors with form analytics.

Form Embedding

Contact forms by MightyForms are easy to build and even easier to share and connect to other platforms. You can embed your contact us form on your WordPress or Webflow website without a hitch. If you’re running an eCommerce, complement your online store page on Shopify or BigCommerce with a contact us form.

(Video) Create contact forms in HTML: step by step | How To Create Contact Form in html with css


How to make a Contact Form in HTML - MightyForms (9)

Your contact us forms can be connected to other native integrations, so you can leverage the collected data even further, any way you want it. Export data to Google Drive or Google Sheets for extra backup and management, or enter new leads into your Mailchimp marketing campaigns. Advanced contact forms can easily be automated through Zapier as well.

Check out all the time-saving features our form builder offers and the step-by-step guide to create your first contact us form.

Contact Us Form Templates

Another perk you get when you create a contact form with MightyForms worth highlighting is a headstart with contact us form templates.

You can create your contact form from scratch, but we have readily available templates to speed up the process.

Just choose one that suits your needs, customize it and empower it with features to leave your contact us form on autopilot, so you don’t even need to worry about it:

Simple Contact Form – For General Needs

How to make a Contact Form in HTML - MightyForms (10)

This template is a perfect contact us form example that covers all business needs. It’s short enough to avoid form abandonment, but it has got all the essentials down. Simple, to the point, yet not so basic: this advanced contact us form template has a convenient location widget so visitors are reassured of your address. Customize this template now!

Detailed Contact Form – For Specific Needs

How to make a Contact Form in HTML - MightyForms (11)

As I’ve mentioned before, some business models require more information from visitors in order to follow up with precise answers. This contact us form example eliminates the need of exchanging many back and forth emails since it already provides fields for detailed info. Bonus: a field that allows visitors to upload files (documents, images, etc.) for specific requests. Set up this template for your business now!

Request Contact Form – For Additional Info

How to make a Contact Form in HTML - MightyForms (12)

A version of the simple contact form but aimed at service providers. This contact us form template prompts visitors to clear any doubt that is causing them to hesitate to make business with you. The call-to-action is very straightforward with clear instructions. Provide this template to your audience now!

Website Contact Form – For Personal Requests

How to make a Contact Form in HTML - MightyForms (13)

Maybe you’re promoting a seminar or a book and visitors would like to contact you. This contact us form example will act as your secretary writing down their message. Visitors can easily leave their contact info, anticipate the subject, and tell you how urgent a reply is expected. Employ this template now!

As a sign-off, I leave you with a real and active Contact Us Form, so you can see for yourself MightyForms in action. Go ahead, fill it out so you can reach out to our support team to help you build your own advanced contact form in no time. Build an audience faster with automated custom contact us forms!

(Video) How to Connect Form Data to Google Sheets


How do I create a contact form in HTML? ›

How to create an HTML contact form in six steps
  1. Choose an HTML editor. To create HTML code, you need a place to write it. ...
  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. ...
  5. Create your HTML contact form. ...
  6. Add additional fields.
Oct 31, 2022

What is an HTML form builder that helps you to create contact forms? › Best Quick Email Form Builder allows you to quickly create a form in its drag-and-drop interface. Then, you can embed the form on your site using an HTML embed code. You'll receive an alert or notification, and you can then manage responses in the tool's backend. It's free for 10 users.

How do I add a contact form in website builder? ›

In the Website Builder editor, go to the section of your site where you want to place the contact form. Click Contact in the component menu on the left side of your editor. Click and drag the Contact form component onto your workspace and place it where you want the form to be.

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 you insert a contact form? ›

So, create a new page or open to edit an existing page where you want to add the contact form. If you're using the Classic editor, in your post or page editor, go to the Add Form button and click it. A popup box will appear. Select the contact form you want to add and click the Add Form button.

How do I create a fillable form? ›

How to create fillable PDF files:
  1. Open Acrobat: Click on the “Tools” tab and select “Prepare Form.”
  2. Select a file or scan a document: Acrobat will automatically analyze your document and add form fields.
  3. Add new form fields: Use the top toolbar and adjust the layout using tools in the right pane.
  4. Save your fillable PDF:

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

To get the code to embed your contact form on your website, go to Settings > Communications > Contact Forms and click the "Embed Code" button in the options on your Contact Form. Choose one of the three embed code options, above, and copy-and-paste that code onto your website.

How do I link a contact form to an email in HTML? ›

To send an email using HTML forms, you need to add the email id to the action attribute of the form. In that, add email proceeding with mailto: i.e.

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 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 you add contact me link in HTML? ›

Start your code with <a href=“”></a> Make a note of where the quotation marks are, because you'll now enter your business phone number between the quotes. Make sure to enter it without dashes and enter “tel:” before you start typing your number. For example: <a href= “tel:+YOURNUMBERHERE”

How do I add a contact icon in HTML? ›

How To Add Icons. To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)

How do I create a simple HTML form? ›

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to create the registration form. Step 2: Now, we have to place the cursor at that point where we want to create a form between the starting and closing of <body> tag in the Html document.

Which HTML code is used to generate a form? ›

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

How do I create a form in HTML using notepad? ›

How to Create an Inspection Form in HTML using Notepad
  1. Step 1: Choose the Right HTML Editor. Keep in mind that hundreds of HTML editors are available on the market. ...
  2. Step 2: Create Your HTML File. ...
  3. Step 3: Add Text Fields and Create Your Form. ...
  4. Step 4: Add Placeholders.
Dec 29, 2021

How to add 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 with HTML and CSS? ›

How to Create a Registration Form in HTML
  1. Choose an HTML editor.
  2. Create your HTML file.
  3. Add basic text fields.
  4. Add additional fields.
  5. Add placeholders.
  6. Why is my HTML form so ugly?
  7. Customise your HTML form with CSS.
Oct 26, 2022

Should I put a contact form on my website? ›

Contact Forms Offer The Best User Experience

Having a contact form on your website can optimize user experience in a multitude of ways. Contact forms are an efficient way to encourage users to interact with your site, offering the most streamlined means of communication.

How do you add an address to a form in HTML? ›

The <address> tag in HTML is used to write contact information of a person or an organization. If <address> tag is used inside the <body> tag then it represents the contact information of the document and if the <address> tag is used inside the <article> tag, then it represents the contact information of the article.

How do I create a contact form in 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 to add CSS in HTML form? ›

CSS can be added to HTML documents in 3 ways:
  1. Inline - by using the style attribute inside HTML elements.
  2. Internal - by using a <style> element in the <head> section.
  3. External - by using a <link> element to link to an external CSS file.

What should be included in contact form? ›

What Fields Should You Include on Your Contact Form?
  1. First and Last Name. Obviously, getting the contact's name is the most important field to include on a contact form. ...
  2. Email Address. Yet another obvious, essential element to collect in a contact form. ...
  3. Company Name. ...
  4. Reason for Reaching Out.
Jul 23, 2020

How to style contact form 7 fields? ›

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.

What should a contact form contain? ›

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.

What is the best free program to create a fillable form? ›

Adobe Fillable Form Creator

Adobe Acrobat allows users to turn their old forms and paper documents into digital, fillable PDFs with ease. Whether it is a simple Word or Excel form, this program will let you make it smarter with digital fields.

How do we create a form? ›

Create a new form
  1. Choose an option: From, click Blank or choose a template. ...
  2. Name your form: In the top-left corner, click Untitled form or the template form name and enter a new name.
  3. (Optional) Do any of the following actions: Add a description: Under the form name, add your text.

How do I turn a fillable PDF into a fillable form? ›

Create a fillable PDF in Word with these steps.
  1. Within the Word program, select File > New Document.
  2. Create the form. Type out the necessary details of your form. ...
  3. Save as PDF. Once you're happy with your Word document, you'll need to save it as a PDF. ...
  4. Open PDF with Acrobat Reader. ...
  5. Prepare the form. ...
  6. Save your form.

How do I add an email address to a HTML form? ›

The <input type="email"> defines a field for an e-mail address. The input value is automatically validated to ensure it is a properly formatted e-mail address. To define an e-mail field that allows multiple e-mail addresses, add the "multiple" attribute. Tip: Always add the <label> tag for best accessibility practices!

How do you add a phone number in HTML? ›

The <input type="tel"> defines a field for entering a telephone number.

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 you add an email to a form? ›

Here's how you set it up:
  1. Log into your Google account.
  2. Open a new form.
  3. Click on the three vertical dots (the More option) in the upper right-hand corner.
  4. Choose Preferences from the dropdown menu.
  5. Click the box next to Collect email addresses.
Jan 26, 2023

How do I send HTML content in an email body? ›

How to Send HTML Email in Gmail?
  1. Copy HTML Email Text. Start by copying the HTML's body text, including <body and /<body> tags.
  2. Open Google Chrome. ...
  3. Open Gmail and Compose. ...
  4. Add Recipients and Subject Line. ...
  5. Placeholder Text. ...
  6. Inspect Window. ...
  7. Select Placeholder Text. ...
  8. Paste HTML.
May 2, 2022


1. Losing leads? Create Smarter web forms
2. Mobile First Responsive Contact Form Featuring Grid CSS
(Traversy Media)
3. How to Create a Schedule Form with MightyForms
4. New Online Form Builder MightyForms
5. How To Set Up Mailing List How To Build Email List Fast 2021 Video
6. Managing Forms or Surveys? Try MightyForms
Top Articles
Latest Posts
Article information

Author: Geoffrey Lueilwitz

Last Updated: 04/26/2023

Views: 5973

Rating: 5 / 5 (60 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Geoffrey Lueilwitz

Birthday: 1997-03-23

Address: 74183 Thomas Course, Port Micheal, OK 55446-1529

Phone: +13408645881558

Job: Global Representative

Hobby: Sailing, Vehicle restoration, Rowing, Ghost hunting, Scrapbooking, Rugby, Board sports

Introduction: My name is Geoffrey Lueilwitz, I am a zealous, encouraging, sparkling, enchanting, graceful, faithful, nice person who loves writing and wants to share my knowledge and understanding with you.