Creating Simple HTML5 Contact Form

Author
In CSS Tutorial, HTML Forms Feb 22, 2014
Simple HTML5 Contact Form

Today we’d like to share a Simple HTML5 Contact Form but professional. It is clean and fresh modern design contact form with validation which makes your website outstanding.

The fields included in this form are full name, email, subject, phone, and message. All the form fields have the icon which makes sense of the input fields.

You can customize it very easily as you need and can add more fields into form.

We also build another HTML5 Form that sticks at footer and popup when clicking on the button. You can find HTML5 Popup Contact Form here to learn more about it.

Our HTML5 comes with many impressive features. One of the features is form validation without using any JavaScript or jquery.

I have used this feature in my Form but HTML5 form validation little restricted to browser support, and it didn’t support old browser version especially IE. Another good thing, it is responsive contact form and looking good on all type of screen resolution.

Simple HTML5 Contact Form Creation

Before I get started, I would like you to show the great list of Top 16 Free Contact Form Templates 2016 which also included our form and I am very thankful to colorlib.com for adding my contact form.

Let’s have a look HTML code of form, I have included a complete set of code into wrapper the class of the div. Each field of form inside the div class name cfield-prepend.

Takes a look how each field of the HTML Form will look like

<div class="wrapper"> <div class="ccfield-prepend"> <span class="ccform-addon"><i class="fa fa-user fa-2x fa-spin"></i></span> <input class="ccformfield" type="text" placeholder="Full Name" aria-describedby="name-format" required> </div> </div>

As you can see in above code also have an icon and the icon code wrap inside the span tag. The span tag used to style the icon color and another basic styling. Let’s see an example code.

.ccform-addon{ color:#f8ae45; float:left; padding:8px; width:8%; background:#FFFFFF; text-align:center; } 

Now, what about the icons ? Actually, I have used font icons which provided by Font Awesome and I am using their five icons which simple code snippet code is below.

.fa-envelope:before { content: "\f0e0"; } .fa-mobile-phone:before, .fa-mobile:before { content: "\f10b"; } .fa-user:before { content: "\f007"; } .fa-comment:before { content: "\f075"; } .fa-info:before { content: "\f129"; } 

Now it’s time to take a look about form validation. The form validation is the critical aspect of getting the right information about the user.

To add validation you need to add require HTML5 attribute. The require built-in attribute of HTML5 which can be added to multiple form fields.

It triggers the behavior in the browser instead of using javascript alert or Jquery validation error.

<input class="ccformfield" type="text" placeholder="Full Name" required> <input class="ccformfield" type="text" placeholder="Email" required> <input class="ccformfield" type="text" placeholder="Phone"> <input class="ccformfield" type="text" placeholder="Subject" required> <textarea class="ccformfield" name="comments" rows="8" placeholder="Message" required></textarea> 

Build Styling of Contact Form

Each input field is using the same class name ccformfield which makes sure it will not conflict with your CSS file.

To use the same class name for all fields means to reduce the CSS size of CSS field and it is best practices.

Because all fields have the same style, that’s why we used same classes and CSS for each field.

.ccformfield { color:#000000; background:#FFFFFF; border:none; padding:15.5px; width:91.9%; display:block; font-family: 'Lato',Arial,sans-serif; font-size:14px; } 

The button of the form is different than the form field, so I have separately used class .ccbtn and the on-hover button background will be changed.

.ccbtn{ display:block; border:none; background:#f8ae45; float:right; color:#FFFFFF; padding:10px; cursor:pointer; text-decoration:none; font-weight:bold; } .ccbtn:hover{ background:#d8850e; } 

I try to use minimal CSS to create this simple HTML5 contact form, hope you like it. leave comments below to let us know how you customize it to make it look better for your website.

Feedbacks 3

  1. This is a great tutorial. Many thanks. One question though: this wouldn’t suffice though to actually send an email and get it into a specific inbox, right? I would still need “server-side” code or some php code? If so, is there anything as simple and sleek as your front-end that you would recommend?
    Thank You! Ali

Leave a Reply

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