Integrating HTML5, CSS and PHP to Create a Very Basic Contact Form

Sep 26, 2011
CSS HTML
120 Shares
By

HTML5 has made her presence felt around the Internet since its launch.

HTML5 has been helping webmasters to clean up their code by utilising newly introduced features of the same. It won’t be possible for me to touch base with every HTML5 feature, but I will be listing down some of those during the course of this tutorial.

Forms are an integral part of any website that wants its visitors to get in touch with the owner of that website. They bridge the gap virtually between the webmaster and the website visitor.

Here, we will implement a very basic combination of HTML5 with CSS and PHP in order to create a contact form. You might have created a lot of contact forms but our purpose here is to do the same using the appreciable features of HTML5. Let’s do it!

Note: The code below will work with most of the Internet browsers that are being widely used as of today.

Our Goal

For starters, you must have an idea of what we are going to create. It will be a simple contact form as shown below:

Catching up with HTML5

Without further discussions, let’s create our first index.php file. Please be aware that you will require a web server to test index.php file. Explaining the setup of same is out of the scope of this tutorial.

The very initial index.php will look like this:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Contact Form</title>
</head>
<body>
    <header class="main">
        <h1>My Contact Form</h1>
    </header>
    <section class="main">
        [Form code goes here]
    </section>
</body>
</html>

See any differences from your regular html code?

Well, there are few. Let me explain each of them:

  • The cleanest ever DOCTYPE -In case you haven’t noticed, the above HTML5 code boasts of a very clean DOCTYPE tag. If you have worked with earlier versions of HTML5 then you will understand what I mean and why am I emphasizing on it. If you haven’t seen the DOCTYPE tag before then ignore this and move on.
  • The <header> and <section> tags – Ever used these tags in earlier versions of HTML? Well, now you can and avoid the usage of div tags. Both the tags have been assigned a class “main” so that I am comfortable styling them as I want using my style.css. HTML5 also has a <footer> tag which will be used (obviously) for footer of your webpage.

The Form:

Now, lets talk about the code that will shape our form (the very purpose of this tutorial). The below code will be placed in our section tag (unless you are planning to push your form to the header or footer section of your webpage.)

<form>
       <label>Your Name:</label>
       <input name="name" placeholder="Goes Here">
       <label>Your Email:</label>
       <input name="email" type="email" placeholder="Goes Here">
       <label>Your Message:</label>
       <textarea name="message" placeholder="Goes Here"></textarea>
       <input id="submit" name="submit" type="submit" value="Submit">
</form>

Again, you will notice differences between the above HTML5 code and our old versions. Let me throw some light:

  • <input> tag need not be closed - Older versions of HTML wanted <input/> while HTML5 is satisfied with <input>. Quiet clean, right?
  • type = “email” enhances iPhone experience - Although browsers that do not understand type=”email” in above code will assume it to be type=”text” yet iPhone makes your life a bit easier. It adds a @ symbol button in its keypad when the type=”email” field is active. Cute?
  • placeholder makes life easy - If you noticed the image of our upcoming form above, then you will see the text “Goes Here” in every field. I remember spending hours with JavaScript so as to make this possible. HTML5 makes this a cakewalk!

Now, our very own CSS

That was it! Our HTML5 tutorial is over and we move on to CSS to style our HTML5 form. For starters, place the below code just above your <body> tag so as to tell your index.php that someone out their is ready to make her beautiful.

<link type="text/css" rel="stylesheet" href="style.css">

Now create a style.css in the same folder and paste the below code into it.

label {
    display:block;
    margin-top:50px;
    letter-spacing:1px;
}

/* This section centers our complete page */
.main {
    display:block;
    margin:0 auto;
    width:500px;
}

/* This section centers the form inside our web page*/
form {
    margin:0 auto;
    width:420px;
}

/* Applying styles to our text boxes */
input, textarea {
	width:400px;
	height:27px;
	background:#666666;
	border:2px solid #f6f6f6;
	padding:10px;
	margin-top:10px;
	font-size:0.7em;
	color:#ffffff;
}

textarea {
	height:200px;
	font-family:Arial;
}

#submit {
    width:85px;
    height:35px;
    background:url(submit.png);
    text-indent:-9999px;
    border:none;
    margin-top:20px;
    cursor:pointer;
}

Let me deconstruct the important parts of above code:

  • The display:block property for label converts the <label> tags into block level elements. This pushes them to next line henceforth cleaning up the HTML5 form and pushing every thing to a new line.
  • The text-indent:-9999px; property for #submit hides the actual “Submit” text so as to make room for the Submit Button (which I quickly created using Cool Text).
  • I am assuming that rest of the code is self explanatory even if you are least familiar with CSS. Leave comments in case of confusions and I will be more than happy to get back to you.

PHP Integration

First, we edit the <form> tag in your code to what you see below:

<form method="post" action="index.php">

Now, insert the below code just above your <form> tag:

    <?php
       $name = $_POST['name'];
       $email = $_POST['email'];
       $message = $_POST['message'];
       $from = 'From: My Contact Form';
       $to = '[email protected]';
       $subject = 'Wassup?';

       $body = "From: $name\n E-Mail: $email\n Message:\n $message";

       if ($_POST['submit']) {
           if (mail ($to, $subject, $body, $from)) {
           echo '<p>Message Sent Successfully!</p>';
           } else {
           echo '<p>Ah! Try again, please?</p>';
           }
       }
    ?>

Once you save the above changes then your contact form should work as expected. It will send emails to your email address ([email protected] in our case.)

Conclusion

This was a very basic tutorial on how to use HTML5 with CSS and PHP to create a HTML5 contact form. I am sure that many out their have done a lot more than this. Leave your work in comments below and I will include them in my upcoming article.

Author: Salman Siddiqui
Salman Siddiqui is a technology analyst, web design expert and seasoned WordPress critic. You can meet him on Twitter.
  • http://www.outsourcing-partners.com/php-developer.html PHP Developer

    thanks for briefing on, I’m going to implementing this on my site.

    • Anonymous

      Please let us know how it works. We’d love to see our tutorials in action.

  • Anonymous

    Nice catch Robert. Thanks for sharing that with the readers.

  • Facinet Touré

    Nice tutorial, but we could spam proof this by inserting a small input text only viewable by the screen reader and the spam server will try to fill out and then Bam.
    http://selectiveform.com

    • Anonymous

      Nice addition Facinet!

  • http://twitter.com/calliope8muse Calliope Georgousi

    nice and clean tutorial…I have a question…might be daft but when I made a separate index.php file in my directory it would not load the page at all for me, and respectively when I renamed it to form.php > then on submit click of the button it would show the client my php form document!!

    Please help me with this!!

  • http://twitter.com/calliope8muse Calliope Georgousi

    a question as an extension of my previous question… does .htaccess play a certain role on that php code you are suggesting? and if so please let me know what should be written in it if you can.

    thanks in advance

  • Invalid

    You are not even validating the data? mmm… what a poor stuff!

  • http://www.bybe.net/ Web Design Bournemouth

    Really useful code, thanks a lot you saved me lots of time :P

  • disqus_QCE8P3EMEr

    Tried it and it doesn’t work. If i send with no text entered i get the success message however no email arrives. if i enter text into text fields i go to a page not found.

  • Dillon

    Thanks for the tutorial, I have a problem, that I don’t know how to fix, that hinders my ability to use the code. When I put the code onto my server that hosts my site, this is what I get that shows up on the page: “The system cannot find the path specified.”
    The thing is, the preview of the code shows up in dreamweaver, so I don’t know what the problem is.
    Thanks, hopefully you can help!

  • http://twitter.com/AdamBrownUK Adam Brown

    Excellent tutorial I’m going to put it to practise. Just one question. What is the *action* tag doing in form if the page is already index.php? Does it just make the script run? Could it equally redirect be a page that says ‘thank you for contacting us’ ? or just .

  • http://www.facebook.com/CheckeredMichael Michael Brooks

    You forgot to mention that if you use the type=”email” it will automatically ensure the email is actually a valid email address and not missing an @ or .com or something which means you don’t have to write out the Javascript or PHP to find it yourself unless you need a fallback for older browsers.

    • http://www.facebook.com/CheckeredMichael Michael Brooks

      Also, good tutorial. :)

    • Guest

      thats where php code should go.

  • Cay Livin

    The COOL TEXT info on submit button takes you to an empty page.

  • Andres

    Thanks mate! !

  • Leo Jackson

    Doesn’t work for me, I just get the “Try again” statement from the “else” ??? Tried both on my local environment and on my server