apadmedia.com » PHP Contact Form with jQuery Validation

PHP Contact Form with jQuery Validation

Submitted by apad on Thursday, 28 May 2009No Comment

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.

<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” />

</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.

Read the rest here..

0

Leave your response!

Tutorial »

PHP Contact Form with jQuery Validation

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 …