Raymond Selda » PHP

PHP Contact Form with jQuery Validation

Raymond Selda — Thu, 09 Apr 2009 14:51:27 +0000

Hi there! You need a jQuery contact form for your website but don’t know how to create one? Please read along and maybe you’ll get lucky. A contact form is very helpful in giving your visitors a way to contact you. In this tutorial, I will help you on how to create your own jQuery contact form using PHP and JQuery.

Let’s start with the basics. We only need a single page for our contact form and this page will contain the markup, PHP to process our contact form and JQuery validating. For those who need to see a working demo of the jQuery contact form, you can check it out here.

Step One: jQuery 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 contact 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.





	PHP Contact Form with JQuery Validation
	
	

	

	




	
		
		    Name:
			
		

		
			Email:
			
		

		
			Subject:
			
		

		
			Message:

Step Two: Give it some style

We’re going to apply some styling to our contact form using CSS to make it more interesting. 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;
}

If you’re following along, your contact form should look like this:

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 validate our contact form. 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 jQuery contact form with the classes already added.


	
	    Name:
		
	

	
		Email:
		
	

	
		Subject:
		
	

	
		Message:

Now refresh your jQuery contact page and submit the contact form without entering any data. Your contact page will catch the errors and hopefully will look like the image below. Also try entering a different format for the email field and you should see a different message. Try reading the Validation documentation for more validation options.

Step Four: Submit and process the form using PHP

Now it’s time to add some PHP magic to our jQuery 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.

' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);
		$emailSent = true;
	}
}
?>

We’re almost finished! All we have to do is insert a little more PHP to output two kinds of messages. The first message is to notify us in case there were errors after our submission, and the other is a message to tell us that the email was already sent and no errors were found. The code for that will just sit right inside the contact-wrapper div but right before the jQuery contact form markup.

Please check if you've filled all the fields with valid information. Thank you.

Email Successfully Sent!

Thank you for using my contact form! Your email was successfully sent and I will be in touch with you soon.

Finished Code

' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);
		$emailSent = true;
	}
}
?>




	PHP Contact Form with JQuery Validation
	
	










	

	
		Please check if you've filled all the fields with valid information. Thank you.
	

	
		Email Successfully Sent!
		Thank you  for using my contact form! Your email was successfully sent and I will be in touch with you soon.
	

	
		
		    Name:
			
		

		
			Email:
			
		

		
			Subject:
			
		

		
			Message:

We are Done!

You have created a jQuery contact form using PHP and JQuery for validation all contained in a single page! All you have to do is put your email address in line 41 and off you go! Great job! I hope you will find this tutorial helpful as I’ve carefully detailed all the steps needed to create our contact form. Please tell me what you think and I would appreciate your comment. Thank you so much for reading and hope to see you again.

PHP Pagination Script

Raymond Selda — Tue, 22 Apr 2008 07:54:43 +0000

As a developer there will come a time when we need to fetch huge amount of records to display on a single page. An example is when you’re trying to develop an e-commerce site and you need to output lets say 500 book titles. Another example would be in a member management type of system wherein you need to list all of the registered members of the site. What you need to do is not list all of the records in a single page but rather split the results into pages because users are too lazy to scroll down. This is where pagination comes into play.

I’m not going to reinvent the wheel by coming up with another pagination script instead I will suggest that you checkout and try PHP Pagination Script from PHPSense. Its a PHP class that is very easy to integrate with your existing applications by following these few simple steps:

Step One: Include the Pagination Class

include('ps_pagination.php');

Step Two: Connect to MySQL database

$conn = mysql_connect('localhost', 'username', 'password');
mysql_select_db('yourdatabase', $conn);
$sql = 'SELECT post_title FROM wp_posts WHERE post_type="post" ORDER BY ID DESC';

Step Three: Create the pagination object

The pagination object accepts four parameters:

MySQL connection link
SQL query
Number of records to display per page. Defaults to 10
Number of pagination links to display. Defaults to 5

$pager = new PS_Pagination($conn, $sql, 10, 5);

Step Four: The paginate() function returns a mysql result set

After creating the pagination object, call the paginate() function from the object. This function returns the paginated result set for the current page. You can use this result set just as you would use a standard MySQL result set.

$rs = $pager->paginate();
while($row = mysql_fetch_assoc($rs)) {
	echo $row['post_title'],"\n";
}

Step Five: Display the full navigation

echo $pager->renderFullNav();

Finished Code

//Include the PS_Pagination class
include('ps_pagination.php');

//Connect to mysql db
$conn = mysql_connect('localhost','root','');
mysql_select_db('yourdatabase',$conn);
$sql = 'SELECT post_title FROM wp_posts WHERE post_type="post" ORDER BY ID DESC';

//Create a PS_Pagination object
$pager = new PS_Pagination($conn,$sql,10,10);

//The paginate() function returns a mysql result set
$rs = $pager->paginate();
while($row = mysql_fetch_assoc($rs)) {
	echo $row['post_title'],"\n";
}

//Display the full navigation in one go
echo $pager->renderFullNav();

As you can see its very simple to use in your applications. Paginating pages is one of the most commonly requested functions in websites and this is one of the many scripts that can really help you with your projects. I have been looking for a pagination script for a while now and by far this is the best and most efficient pagination script I’ve used. As always feel free to suggest if you’re using any pagination scripts. Hoping to learn from you guys. Thanks for reading.

Google Page Rank Reporting

Raymond Selda — Thu, 30 Aug 2007 07:33:14 +0000

I have a client who asked me to write a script where it will display the page ranks for each of the backlinks in a particular domain. He gave me some scripts (actually there is only one script) and sites where I can find one. There were a lot of scripts around but none of them really worked as far as copying and pasting the code is concerned. Even if I tried editing the script, it can be quite a headache making it to work.

Although I didn’t get the “Forbidden” 403 error from Google. The page rank value was always 1 even for Google. So after more than 5 hours of searching I found the script that is similar to the original script with only a slight modification.

Details and script can be found here.