Create HTML5 CSS3 contact form with HTML5 validation

Error: You must enable a payment gateway to use Easy Digital Downloads

Error: No checkout page has been configured. Visit Settings to set one.

Error: No checkout page has been configured. Visit Settings to set one.

Today’s topic is,

Create HTML5 CSS3 contact form with HTML5 validation

This HTML5 tutorial is for Intermediates who have already learn’t the basics of HTML5. If you have no knowledge of HTML5 basics – please, visit this tutorial here ‘HTML5 for Beginners/Newbies‘.

 

HTML5 CSS3 contact form - pepfryAs an Intermediate HTML5 learner – you should be knowing that HTML5 is just not the new Tags/Elements that the Standard has put-forth. It is much more than that. It will be explained below. With HTML5, you can achieve loads like HTML5 games instead of Flash games, animations using HTML5 canvas, Geo locations, Local storage in place of cookies etc

Here , I’ll take you through an example HTML5 Page. Please see below for what I’ll be using in this tutorial:

  •  HTML4 and HTML5 Tags/Elements
  •  HTML5 Required  attribute to prompt user to fill in the data
  •  CSS2 and CSS3

The example I would be interested in taking you through will be – A HTML5 CSS3 contact form where in all the above listed Pointers again will be executed and Explained.

Step1: I’ll create a neat Markup using HTML4 & HTML5.

Markup used:

There are 2 <div> tags used to bring the form to the center of the Screen/Browser. Please see the styles below to see how it works or click here to learn how.

Then comes the Form Elements. I have used the newly introduced HTML5 Standard Form Elements like for example:

This is a self validating tag. Which will not allow you to submit if a valid format of Email Address is not typed into the provided space. But, you need to add required attribute.

This is another HTML5 Standard Tag which is used to allow users to enter their Telephone Numbers which can be further custom validated to accommodate either Land line Number or Mobile Number as required.

You can notice that there are few bold items in the input types listed above.

Where, HTML5 Standard has introduced new input types which are self explainable types.

type=”email” — Provides space for users to input a valid email address, if not a valid entry in entered it will highlight it as error then and there spontaneously.
type=”tel” — Provides space to enter users Telephone numbers.
Placeholder=”" — Provides space for the developer to enter prior any suggestion/content that can make user feel easy to fill out the Form OR Guide the user through the completion of the Form.
required  — Prompts, when user skips any required field and moves on. This HTML5 require attribute doesn’t allow user to submit form without entering the required data.

What if, the user doesn’t want to fill the fields and wants to submit the Contact form?

Then, the user will see a nice and sleek prompt asking to ‘Please fill out this field‘.  This is not a JavaScript validation. I’m not using any Script to validate though.

These are the major changes that HTML5 has brought with it. Self validating Form Elements – That which reduces Developers time as well as Page size.

Though the Prompt will be as shown in the below screenshots. There are two steps of Prompting users to enter the required data.

Before submitting – If the user enter non valid format.
For example in the Email field – If the user enters email_email.com instead of email@email.com. That moment itself the Input field will be highlighted with Red color, indicating that there is some mistake has happened.
After committing mistake while filing the field – If the user tries to submit the Form – It won’t process. It will prompt with a Tool tip asking the user to ‘Please fill out this field‘. Unless the user fills the correct data – Form doesn’t process.

So, here are the Screenshots for the above 2 cases.

Case1: Before Submission – nothing is entered

HTML5 CSS3 contact form - PepFry

HTML5 CSS3 contact form tutorial

Case2: Once the user clicks the email field

HTML5 CSS3 contact form PepFry

HTML5 CSS3 contact form tutorial

Case3: After submission and if the data entered is wrong

 

Step2: I’ll now need to create Styles using CSS2 & CSS3.

Major and useful Styles used:

1. There is Border-radius used to obtain Curved Borders all the sides.
2. To help users to locate on which input typed they are on – I have used the CSS property : focus.
3. I have applied Darker Border and Box-shadow – just to highlight the input type where the user is currently on.
4. I have used text-shadow to enhance Content’s look. Text’s will look embossed while text-shadow applied.

So, guys – you’re done!

You should now see a beautiful HTML5 CSS3 contact form as seen in the Screenshot below.

HTML5 CSS3 contact form tutorial - PepFry

HTML5 CSS3 contact form tutorial

Hope you enjoyed this tutorial “HTML5 CSS3 contact form tutorial“. Please go ahead and download full source code. Please click the below link.

 

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">