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 = 'salman@mywebsite.com';
$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
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 = 'salman@mywebsite.com';
$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
Hery Purnama 081.223344.506 , IT trainer , Excel / access VBA Macro, MS Project, Primavera,
PHP Ajax Jquery, Google Map API, Google Sketchup3D, Ubuntu, Sencha ExtJS, YII, Code Igniter,
Oracle, SQL Server,
Bandung, Jakarta, Bali, Medan, Surabaya, Yogya, Indonesia
No comments:
Post a Comment