Creating Simple HTML5 Contact Form with HTML5 Validation

Simple HTML5 Contact Form

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

Why this contact form? It’s SIMPLE and works well with HTML5 Validation. It’s styled with CSS3 and designed to fit your website. It’s easy to customize.

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

You can customize it very easy as you want it to be and can add more fields into form by simply copy & paste the few lines of HTML code.

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

The HTML5 form validation little restricted to browser support, and it didn’t support old browser version especially IE.

But the good thing, it is a responsive contact form and looking good on all type of screen resolution.

How to Create Simple HTML5 Contact Form

Before I get started, I would like you to show the great list of Top 20 Free Contact Form Templates 2019 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>

Adding Font Icon

As you can see in above code 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";
}

HTML5 Validation

Now it’s time to take a look at 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>

Styling Rest of 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 the 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 form, hope you like it. leave comments below to let us know how you customize it to make it look better for your website.

Code ExamplesYou May Also Like