Simple HTML Contact Form

Last Updated on January 22, 2023 by Roshan Parihar

A simple HTML contact form should contain form fields like Name, Email, and Message. You can also add a phone field to collect the phone number of your users.

To make proper communication with your audience, you need to add a contact form to your website. You need a simple HTML contact form design to make it simple for users to fill it out.

Simple HTML Contact Form

Add a simple HTML structure and some CSS to make it look beautiful to your audience. So, let’s create one for your website with the step-by-step process below.

How to Create Simple HTML Form (Step-by-step)

Here is the step-by-step process for creating a simple HTML contact form:-

Step 1: Create HTML Structure of the Contact Form

To create a simple form structure, you need to wrap every form element inside the <form> tag. There are different input type elements you have to use for the Name, Email, and Message fields. Let’s learn each field and the input type required to create the correct form.

Add Name Field Using <input type="text">

It is the most common field in Forms to create a field that takes text. However, you can also enter numbers and symbols in this field.

Add Email Field Using <input type="email">

To take valid emails from your users, you can use this input type.The default HTML input type for email data can also validate the email address format. Always use this field in forms when you want to collect the email address of your audience.

Add Message Field Using <textarea rows="5"email"><textarea> Multiline Field

If you want to collect longer text contact from your users, you can use this field. You can specify the rows and columns to increase the textarea size. It is multiple fields that take any size of text content in forms.

Add CTA Button Field Using <input type="submit">

To allow users to enter data and submit the form, you will have to add CTA(Click to add) button. It should be of this type required for the submission of the form. Add this field to the end of the form before the </form> closing tag.

Final HTML Structure of Contact Form

Now, the final structure of your contact form is given below. It is the combination of all the above fields and the <label> included to specify the labels of these fields. See the code below to get the idea of using form fields in the structure.

When you run the above code on your browser, you will get the first look at the form as shown in the image below. It looks very simple and is not attractive to add to your website. No spacing, no color, and no look-n-feel in the result.


This is because you have not added CSS yet. Let’s move further to add some CSS and make your form beautiful to attract users to your website.

Step 2: Add CSS to Beautify Simple HTML Contact Form

below is the simple CSS code which changes the appearance of input type text, email, and submits button. It also changes the appearance of the textarea. You can change the color of your button according to to match your brand color.

After you include the above CSS code in your simple HTML contact form, the appearance will change as shown in the image below. It contains accurate spacing among the form elements. Give some background to the form to show the covered area on a web page.


I have added a blue-like color to the button. However, you can change it to your color by modifying the above CSS code.

Step 3: Complete Code

Below is the complete code of the simple HTML contact form. I have added CSS code inside the <head> tag just before its closing tag. Added the structure code of the form inside the <body> tag. You can add the below code to your website contact us page.

Furthermore, if you want to send emails using the above form or insert its submission data into the database. You can read the post whose link is given below.

However, if you want to create the above form without the requirement of coding, you can read the post given below.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.