Home » HTML5 » HTML5 Contact Form Example

About Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

HTML5 Contact Form Example

In this example we will go through a simple clean contact form.

Contact forms are sections within a webpage that you add with a set of input fields for users to have the possibility to contact the website admins.

Normally, you can choose how many fields you want the contact form to have, like name, e-mail, subject and message, or more if you need.

You can also choose different types of field align like inline or block, according to the layout of your website and space available.

This is how our final contact form is going to look like:

Final View of the Contact Form

Final View of the Contact Form

1. Basic Setup

Go ahead and create a new html file with the basic syntax inside like below:

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Contact Form</title>
	<link rel="stylesheet" href="css/font-awesome.min.css">  <!-- link FontAwesome -->
</head>
<body>

	<!-- STYLE SECTION -->

	<style type="text/css">

  	</style>


	<!-- HTML SECTION -->

</body>
</html>

Add these two FontAwesome folders inside your project folder (we’ll need font icons):

Inside your Project Folder

Inside your Project Folder

Notice that I have already linked FontAwesome css file in the head section of the basic html.

2. Step by Step – Contact Form

Now let’s code the contact form step by step and see how we can make it better and better.

2.1 Coding the HTML

In the html code section we will have the following components:

1. A form tag – this will wrap all input/textarea fields. Give it a class of form, a method and an action.

2. Three div tags – these divs will wrap inputs and fonticons, each div is going to have a class of wrapper.

    2.1 – Inputs with a class, type, name and placeholder. The class is going to be input-group for all of them.

    2.2 – Icons inside i tags and with respective classes according to the fonticon being used.

3. A textarea element – it will be needed for the message section. It will have a class of textarea and a placeholder.

4. A button element – it will send/post the data to the destination. It will have a class of send-btn and a href.

<!-- HTML SECTION -->

<form class="form" action="/post" method="post">

<h2>Contact Form</h2>   <!-- just a title -->

	  <div class="wrapper">
   <i class="fa fa-user"></i> 		 <!-- user icon for name field -->
   <input class="input-group" type="password" name="name" placeholder="Name (required)"></div>
       <div class="wrapper">
   <i class="fa fa-envelope-o"></i>	<!-- envelope icon for email field -->
   <input class="input-group" type="text" name='email' placeholder="E-Mail (required)"></div>
	   <div class="wrapper">
   <i class="fa fa-file-text-o"></i>	<!-- file text icon for subject field -->
   <input class="input-group" type="text" name='subject' placeholder="Subject (optional)"></div>

	<textarea class="textarea" placeholder="Write your message here..." ></textarea>

   <button href="#" class="send-btn">Send</button>
</form>

For now, because only the html section has been coded, you will get a really creepy view of the form like this:

HTML Form Coding

HTML Form Coding

2.2 Styling with CSS

This is where the form gets a makeup and becomes in a final state for the website.

First, we are going to refer to the .input-group class to style the input fields.

Look at the code below:

.input-group {
	width: 15em;
	height: 2.5em;
	margin-bottom: 1.8em;            /* some space below other field */
	margin-right: 1.7em;             /* some space from the next field */
	padding-left: 2.5em;             /* space from left to accommodate icons */
	border: 0.1em solid #ccc;        /* light gray border applied */
	border-radius: 0.3em;            /* small border radius */
	background-color: #ffffea;       /* light yellow field background color */
	}

Up until now, the three input fields we have styled will look like this:

Input Fields Styling

Input Fields Styling

Now lets work with the .wrapper and .wrapper .fa classes to make icons sit inside the fields.

By giving these classes relative and absolute positioning in the page, we will be able to stick the fonticons inside the inputs.
This is very tricky and hard to achieve in forms, so look carefully at the code below:

.wrapper {
	position: relative;
	display: inline;       /* displays the three input fields in the same row */
}

.wrapper .fa {
	position: absolute;
	padding: 0.4em;      /* sat the icons with a right spacing referring to the border */
	font-size: 1.2em;   /* chose a suitable font size according to the size of the field */
	color: #ccc;       /* gave icons a light gray color */
}

Done this kind of icon positioning and styling, we’d get the following vieW:

Styling the Wrapper and Icons

Styling the Wrapper and Icons

Now you understand better why we needed all that left padding when styling the input fields.

It’s time to style the textarea element. This element will sit below the input fields.

.textarea {
	width: 54em;          /* initial width */
	max-width: 54em;      /* maximum width */
	height: 10em;         /* initial height */
	display: block;       /* show below input fields */
	padding: 1.5em;       /* sit text/placeholder with some edges padding */
	border: 0.1em solid #ccc;  /* same border style as the input fields */
	border-radius: 0.3em;      /* same border radius as the input fields */
	background-color: #ffffea; /* same background color as the input fields */
}

The textarea will be resizable by height but not by width as that looked better to me.

I have also given these fields simple hover and active states like below:

.input-group:hover {
	border-color: #3399FF;
	box-shadow: 0em 0em 0.2em #3399FF;
}

.input-group:active {
	border-color: #006699;
}

.textarea:hover {
	border-color: #3399FF;
	box-shadow: 0em 0em 0.2em #3399FF;
}

.textarea:active {
	border-color: #006699;
}

In the image below, the message field is in hover state:

Contact Form - All Elements Styled

Contact Form – All Elements Styled

The last element we need to style is the button:

.send-btn {
	padding: 0.5em 4em;
	font-size: 1em;
	margin-top: 2em;
	background-color: #319cd5;
	color: white;
	border: none;
	border-radius: 0.3em;
	margin-left: 37em;   /* this value depends from page to page */
}

And the final view of the form would be:

Final Form View

Final Form View

3. Conclusion

To conclude, we can say that there are a lot of ways you can code a contact form and it is pretty simple.

However, do consider design elements like spacing, colors and icons when creating a form to make them more usable.

Feel free to create forms both from scratch or using css frameworks to help you get through this.

This was just a nice example of how you can do it yourseld in minutes.

4. Download

Download
You can download the full source code of this example here: HTML5 Contact Form Example

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

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

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Bruce Evans
Bruce Evans
6 years ago

How do you tell this form which email address you would like it to go to?

Bruce Evans
Bruce Evans
6 years ago

When I try to send a message, I get this error. Where and how do I put the email address to send the message to?

Hmm, we can’t reach this page.

Try this
•Make sure that you’ve got the right web address: ms-appx-web://microsoft.microsoftedge/assets/errorpages/dnserror.html#file:///C:/post?email=bruce.evans%40grapevine.com.au&subject=Test