PHP Contact Form with jQuery Validation
This is your online education in how to markup a contact form. I hope you find it easy to follow and informative and it will help you create the perfect contact form. Never again will you have to worry about people finding it hard to contact your business, they will be able to do so in a fast and convenient manner. See your business grow with something as simple as this contact form.
Step One: Contact Form Markup
First, let’s create the markup for our contact form. Create a new page called contact.php (or whatever name you want as long as it has a PHP extension). Having a PHP file affords us the luxury of only having a single page to display and at the same time process our form. We also used a PHP constant for the action value of our contact form. That constant is the filename of the current file, relative to the document root. This is to ensure us that our form will go to the same page after sending our form.
<code><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>PHP Contact Form with JQuery Validation</title>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script>
<style type=”text/css”>
</style>
</head>
<body>
<div id=”contact-wrapper”>
<form method=”post” action=”<?php echo $_SERVER['PHP_SELF']; ?>” id=”contactform”>
<div>
<label for=”name”><strong>Name:</strong></label>
<input type=”text” size=”50″ name=”contactname” id=”contactname” value=”" />
</div>
<div>
<label for=”email”><strong>Email:</strong></label>
<input type=”text” size=”50″ name=”email” id=”email” value=”" />
</div>
<div>
<label for=”subject”><strong>Subject:</strong></label>
<input type=”text” size=”50″ name=”subject” id=”subject” value=”" />
</div>
<div>
<label for=”message”><strong>Message:</strong></label>
<textarea rows=”5″ cols=”50″ name=”message” id=”message”></textarea>
</div>
<input type=”submit” value=”Send Message” name=”submit” />
</form>
</div>
</body>
</html></code>
Step Two: Give it some style
We’re going to apply some styling to our form using CSS to make it somewhat appealing. For the purposes of this tutorial we’re going to embed our CSS right inside contact.php inside the head section and in between the style tags.
body {
font-family:Arial, Tahoma, sans-serif;
}
#contact-wrapper {
width:430px;
border:1px solid #e2e2e2;
background:#f1f1f1;
padding:20px;
}
#contact-wrapper div {
clear:both;
margin:1em 0;
}
#contact-wrapper label {
display:block;
float:none;
font-size:16px;
width:auto;
}
form#contactform input {
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
padding:5px;
font-size:16px;
color:#333;
}
form#contactform textarea {
font-family:Arial, Tahoma, Helvetica, sans-serif;
font-size:100%;
padding:0.6em 0.5em 0.7em;
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
}
Step Three: Validate using JQuery
We already loaded JQuery in case you haven’t noticed in our initial contact form markup:
Loading JQuery alone only gets half of the job done. We still need a JQuery plugin called Validation to help us with the validation. After you’ve downloaded and extracted the plugin, look for jquery.validate.pack.js file and save it where your contact.php is saved and reference it from the file just like what you did with JQuery.
Now we need to initialize the JQuery:Validation plugin in order to use it. Take note that #contactform is the id value of the form.
After that, we now need to add a class attribute to our input fields. If you just need a required field you just add class=”required” to the input tag and when you need to require and validate an email so that the format is correct then you need to add class=”required email”. Here’s the updated markup for our form with the classes already added.
<form method=”post” action=”<?php echo $_SERVER['PHP_SELF']; ?>” id=”contactform”>
<div>
<label for=”name”><strong>Name:</strong></label>
<input type=”text” size=”50″ name=”contactname” id=”contactname” value=”" class=”required” />
</div>
<div>
<label for=”email”><strong>Email:</strong></label>
<input type=”text” size=”50″ name=”email” id=”email” value=”" class=”required email” />
</div>
<div>
<label for=”subject”><strong>Subject:</strong></label>
<input type=”text” size=”50″ name=”subject” id=”subject” value=”" class=”required” />
</div>
<div>
<label for=”message”><strong>Message:</strong></label>
<textarea rows=”5″ cols=”50″ name=”message” id=”message” class=”required”></textarea>
</div>
<input type=”submit” value=”Send Message” name=”submit” />
</form>
Step Four: Submit and process the form using PHP
Now it’s time to add some PHP magic to our contact form! Place this code on the topmost section of your file (just above your DOCTYPE declaration). You might be wondering why we need to validate the inputs again even if we already validated the inputs using Javascript. The reason is that PHP will act as our second level of validation in case Javascript is turned off on the client’s machine. I highly suggest that you don’t rely on Javascript alone for validating form inputs. Aside from validating inputs, PHP will also be responsible for sending out the email in case no errors were found.
I’ve stripped down and borrowed the code below from this very helpful article. The green comments should basically explain what each code snippet is doing.
MuslimAid Asia, a non-profit organization for the poor, orphans house and the needy worldwide.
Leave your response!