How To HTML Form With PHP/JS/Captcha Validation - The Ultimate Guide!
How to build a html form with PHP (server side), JS (client side), a simple but effective captcha, that validates all the form fields, and secures your server from hijacking spam bots, that functions seamlessly?! This whole question is one BIG puzzle is it not? Well call me the "The Puzzle Man", because I just made it very easy and put all the peices of the puzzle together in one small nicely zipped up package. A special thanks to Sitepoint forum members Pullo and ScallioXTX for helping me work out the PHP/JS kinks. And here are 4 other demos of different ways to display the JS validation errors.
Awsesome Form Attributes!
- Simple directions (relatively)
- Clean HTML/CSS code
- Easily editable PHP formmail code with detailed comments
- Simple but strong and effective PHP backend protection/validation
- JS (client side) eye candy validation
- Finally an easy but effective captcha
- Captcha displays and validates random numbers 1-5 (e.g. 2+3, 1+4, etc)
- Confirmation page
- If JS off PHP error page
- Nicely formated email
- Works in all browsers IE7+
DIRECTIONS...
Step 1: Create 7 Pages
- html-form-page.php (AKA the page that holds your html form)
- formmail-page.php (AKA the page that holds your PHP form processing code)
- validate-captcha-page.php (AKA the page that holds the PHP that helps validate the captcha)
- error-page.php (AKA the page that holds the error message if JS is bypassed)
- confirmation-page.php (AKA the page that displays the successful form submission message)
- jQuery-page.js (AKA the page that holds jQuery v1.8.3)
- jQuery-validation-page.js (AKA the page that holds jQuery Validation Plugin v1.10.0)
Step 2: Download JS dependencies
jQuery v1.8.3
jQuery Validation Plugin v1.10.0
Step 3: html-form-page.php code
Note: the PHP above the DOCTYPE and the PHP in the Captcha label is whats needed to enable the captcha to work. The JS is what's needed for the validation plugin to work. If you want messages to appear instead of just the red outline, remove label.error display none in the CSS and add the wanted messages to the "messages" section in the JS.
<?php
session_start();
if (!isset($_SESSION['num1']) && !isset($_SESSION['num2'])) {
$_SESSION['num1'] = rand(1,5);
$_SESSION['num2'] = rand(1,5);
}
?>
<!DOCTYPE html><html><head><meta charset="UTF-8">
<title>HTML Form Page</title>
<style type="text/css">
/* --- form css --- */
form {
width:400px;
}
input, textarea, label {
display:inline-block;
margin:10px 5px;
width:150px;
vertical-align:middle;
padding:4px;
}
input, textarea {
border:1px solid #666;
box-shadow:0 0 4px #666;
border-radius:5px;
}
label {
text-align:right;
}
#submit {
margin-left:177px;
width:160px;
background:#ddd;
cursor:pointer;
}
/* --- error css --- */
input.error, textarea.error {
border:1px solid red;
box-shadow:0 0 4px red;
}
label.error {
display:none !important;
}
input.error, textarea.error {
-moz-animation:glow ease-in infinite alternate 500ms;
-webkit-animation:glow ease-in infinite alternate 500ms;
-ms-animation:glow ease-in infinite alternate 500ms;
animation:glow ease-in infinite alternate 500ms;
}
@-moz-keyframes glow {0%{box-shadow:0 0 4px red;}100%{box-shadow:0 0 9px red;}}
@-webkit-keyframes glow {0%{box-shadow:0 0 4px red;}100%{box-shadow:0 0 9px red;}}
@-ms-keyframes glow {0%{box-shadow:0 0 4px red;}100%{box-shadow:0 0 9px red;}}
@keyframes glow {0%{box-shadow:0 0 4px red;}100%{box-shadow:0 0 9px red;}}
</style>
</head>
<body>
<form method="post" action="how-to-html-form-with-php-js-captcha-validation-formmail.php">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Name">
<br>
<label for="email">Email</label>
<input type="text" maxlength="50" id="email" name="email" placeholder="Email">
<br>
<label for="comments">Comments</label>
<textarea id="comments" name="comments" rows="1" cols="1" placeholder="Comments"></textarea>
<br>
<label for="captcha"><?php echo $_SESSION['num1']; ?> + <?php echo $_SESSION['num2']; ?>?</label>
<input type="text" id="captcha" name="captcha" placeholder="Captcha">
<br>
<input type="submit" name="submit" value="Submit" id="submit">
</form>
<script src="jquery/jQuery1.8.3.js"></script>
<script src="jquery/jQuery.validation.1.10.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.validator.addMethod("nourl", function(value, element) {
return !/http\:\/\/|www\.|link\=|url\=/.test(value);
}, "No URL's");
$("form").validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
comments: {
required: true,
minlength: 4,
nourl: true
},
captcha: {
required: true,
remote: {
url: "validation-captcha-page.php",
type: "post"
}
}
},
messages: {
name: "",
email: "",
comments: "",
captcha: ""
}
});
});
</script>
</body></html>
Step 4: formmail-page.php code
<?php // ======================================================================= // NOTE: In the 3 places below that are wrapped in comments exactly like // the ones wrapping this sentence INSERT YOUR specific information // Author: Eric Watson @ http://www.websitecodetutorials.com // ======================================================================= // Prevent browser cache header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); // Remove headers function remove_headers($string) { $headers = array( "/to\:/i", "/from\:/i", "/bcc\:/i", "/cc\:/i", "/Content\-Transfer\-Encoding\:/i", "/Content\-Type\:/i", "/Mime\-Version\:/i" ); if (preg_replace($headers, '', $string) == $string) { return $string; } else { die(''); } } // Separate headers by either \r\n or \n to ensure email sends properly $uself = 0; $headersep = (!isset( $uself ) || ($uself == 0)) ? "\r\n" : "\n" ; // ======================================================================= // Insert your information and correct link paths here $mailto = 'your@email.com' ; $from = "Your Business Name Formmail" ; $formurl = "formmail-page.php" ; $errorurl = "errorpage.php" ; $thankyouurl = "confirmation-page.php" ; // ======================================================================= // ======================================================================= // Add or remove your specific Form variables here $name = remove_headers($_POST['name']); $email = remove_headers($_POST['email']); $comments = remove_headers($_POST['comments']); $spam = remove_headers($_POST['captcha']); $http_referrer = getenv( "HTTP_REFERER" ); // ======================================================================= // ======================================================================= // Un-comment if you want to add/clean PHONE to form // if (preg_match("{[A-Za-z]}", $phone)) // { // header( "Location: $errorurl" ); // exit ; // } // ======================================================================= // If name or email contain carriage returns or new line characters stop execution and direct to errorurl if ( ereg( "[\r\n]", $name ) || ereg( "[\r\n]", $email ) ) { header( "Location: $errorurl" ); exit ; } // Clean Email - if empty ignore - if value in form input clean if (!empty($email) && !preg_match("/^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i",$email)) { header( "Location: $errorurl" ); exit ; } // Clean Comments if (get_magic_quotes_gpc()) { $comments = stripslashes( $comments ); } // Clean Comments - max 1250 characters if (strlen($comments) > 1250) { $comments=substr($comments, 0, 1250).'...'; } // Clean Comments - no URL's if (preg_match("{link=}", $comments) || preg_match("{url=}", $comments) || preg_match("{http://}", $comments)) { header( "Location: $errorurl" ); exit ; } // Make Name, Email, and Comments required before form submission if (empty($name) || empty($email) ||empty($comments)) { header( "Location: $errorurl" ); exit ; } // Clean Captcha: random numbers 1 through 5 (1+3, 4+2, 5+3, etc) session_start(); if (!isset($_SESSION['num1']) || !isset($_SESSION['num2'])) { // no known session. cannot validate captcha header( "Location: $errorurl" ); exit; } $sum = (int)$_SESSION['num1'] + (int)$_SESSION['num2']; if (isset($_POST['captcha']) && (int)$_POST['captcha'] !== $sum) { // captcha given but incorrect header( "Location: $errorurl" ); exit; } else { // captcha correct, show a new one next time unset($_SESSION['num1'], $_SESSION['num2']); } // Send Message $message = "This message was sent from:\n" . "$http_referrer\n\n" . // ======================================================================= // Add or remove your specific Form variables here "Name: $name\n\n" . "Email: $email\n\n" . "Comments: $comments\n\n" . // ======================================================================= "Captcha: $captcha\n\n" . "\n\n------------------------------------------------------------\n" ; mail($mailto, $from, $message, "From: \"$name\" <$email>" . $headersep . "Reply-To: \"$name\" <$email>" . $headersep ); header( "Location: $thankyouurl" ); exit ; ?>
Step 5: validate-captcha-page.php code
This is the PHP page that is called by the "remote" rule in the validation plugin to help validate the captcha.
<?php
session_start();
if (!isset($_SESSION['num1']) || !isset($_SESSION['num2'])) {
exit('"Unknown session"');
}
$sum = (int)$_SESSION['num1'] + (int)$_SESSION['num2'];
if (isset($_POST['captcha']) && (int)$_POST['captcha'] === $sum) {
exit('true');
}
exit('false');
?>
Step 6: error-page.php code
This is the error page that is shown if JS is off and PHP validates the form instead.
<!DOCTYPE html><html><head><meta charset="UTF-8"> <title>Error Page</title> </head> <body> <h1>Error</h1> <p>Oops sorry, there was an error in the information you entered. You either failed to fill in all of the required<br> information, or made a mistake while typing. You may try again by using the back button in your browser.</p> </body></html>
Step 7: confirmation-page.php code
This is the messages displayed to the user after a successful form submission.
<!DOCTYPE html><html><head><meta charset="UTF-8"> <title>Confirmation Page</title> </head> <body> <h1>Thank you! Message recieved. We will get back to you shortly...</h1> </body></html>
DONE! Message in your email box looks like this...
This message was sent from http://www.your-webpage.com Name: Eric Watson Email: eric@gmail.com Comments: Hello Eric, this tutorial is amazing! Captcha: 8
