I just tried to insert reCAPTCHA into my webform and test it with XAMPP 1.8.1. Here is what happens: 1. reCAPTCHA shows at the bottom of my form successfully 2. I fill out the form and the email is successfully forwarded to my email address
The thing is that reCAPTCHA field is not mandatory, so no matter if I enter the required two words or not, I still receive the email. Shouldn't this reCAPTCHA field be mandatory so that I cannot receive the message if the user didn't fill reCAPTCHA field???
DOn't know what is it that I am doing wrong.
Here is my email.php code (reCAPTCHA code is at the bottom):
<?php
require_once 'PHPMailer/class.phpmailer.php';
// Form url sanitizing
$php_self = filter_input(INPUT_SERVER, 'PHP_SELF', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
// Variable initializing
$name = '';
$email = '';
$message = '';
$errors = array();
// Is form sent?
if( isset( $_POST['submit'] ) ) {
// Validate $_POST['name']
$name = filter_input( INPUT_POST, 'name', FILTER_SANITIZE_STRING );
if( '' == $name ) {
$errors[] = 'Please enter a valid name';
}
// Validate $_POST['email']
$email = filter_input( INPUT_POST, 'email', FILTER_SANITIZE_EMAIL );
if( !filter_var($email, FILTER_VALIDATE_EMAIL) ) {
$errors[] = 'Please enter a valid email';
}
// Validate $_POST['message']
$message = filter_input( INPUT_POST, 'message', FILTER_SANITIZE_STRING );
if( '' == $message ) {
$errors[] = 'Please enter a valid message';
}
// If no errors
if( empty( $errors ) ) {
// Values are valid, lets send an email
$mail = new PHPMailer();
// Base parameters that are working for me
$mail->IsSMTP(); // Use SMTP
$mail->Host = "smtp.gmail.com"; // GMail
$mail->Port = 587; // If not working, you can try 465
$mail->SMTPSecure = "tls"; // If not working, you can try "ssl"
$mail->SMTPAuth = true; // Turn on SMTP authentication
// Adjust these lines
$mail->Username = "myemailaddress@gmail.com";
$mail->Password = "mypassword";
$mail->SetFrom($email, $name);
$mail->AddAddress('myotheremailaddress@gmail.com', 'MyName'); // This is the email address (inbox) to which the message from a webform will be sent
$mail->Subject = "Web Form Message"; // This will be the subject of the message(s) you receive through the webform
$mail->Body = $message;
// Sending
if(!$mail->Send()) {
// First error message is just for debugging. This don't generate messages a user should read
// Comment this and uncomment the second message for a more user friendly message
$errors[] = "Mailer Error: " . $mail->ErrorInfo;
//$errors[] = "email couldn't be send";
// Output Sanitizing for repopulating form
$name = filter_var( $name, FILTER_SANITIZE_FULL_SPECIAL_CHARS );
$email = filter_var( $email, FILTER_SANITIZE_FULL_SPECIAL_CHARS );
$message = filter_var( $message, FILTER_SANITIZE_FULL_SPECIAL_CHARS );
} else {
// Generating a success message is good idea
echo "<p>Thank you <strong>$name</strong>, your message has been successfully submitted.</p>";
// Clear fields
$name = '';
$email = '';
$message = '';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>self referencing form</title>
<link rel='stylesheet' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="button" class="title">
<h6>Contact</h6>
</div>
<div id="dropbox">
<header class="title">
<h6>Whats up?</h6>
</header>
<?php if(!empty($errors)): ?>
<ul class="error">
<li><?php echo join('</li><li>', $errors); ?></li>
</ul>
<?php endif; ?>
<div class="contact-form">
<form action="<?php echo $php_self; ?>" method="post">
<!-- input element for the name -->
<h6><img src="img/person.png" alt=""> Name</h6>
<input type="text"
name="name"
value="<?php echo $name; ?>"
placeholder="Please enter your full name here"
required>
<!-- input element for the email -->
<h6><img src="img/email.png" alt=""> E-mail</h6>
<input type="email"
name="email"
value="<?php echo $email; ?>"
placeholder="Please enter your e-mail address"
required>
<!-- input element for the message -->
<h6><img src="img/message.png" alt=""> Message</h6>
<textarea name="message" placeholder="Type your message..." required><?php echo $message; ?></textarea>
<!-- reCAPTCHA CODE -->
<form method="post" action="verify.php">
<?php
require_once('recaptchalib.php');
$publickey = "my_public_key_goes_here"; // you got this from the signup page
echo recaptcha_get_html($publickey);
?></br>
<input name="submit" type="submit" value="Submit" />
</form>
</form>
</div>
</div>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src='dropbox.js'></script>
</body>
</html>
Here is my verify.php code:
<?php
require_once('recaptchalib.php');
$privatekey = "my_private_code_goes_here";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
// What happens when the CAPTCHA was entered incorrectly
die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
} else {
// Your code here to handle a successful verification
}
?>
I also downloaded recaptchalib.php file and all three files are inside my C:/xampp/htdocs/email folder. Then I requested localhost/email/email.php and filled out the form. I receive the message inside myotheremailaddress@gmail.com but reCAPTCHA fields are not mandatory.
So, how do I correct this???
Thanks in advance!!!
Oops! Forgot to add my css file:
@import url("reset.css");
#button {
position: absolute;
top: 0;
right: 10%;
color: #eee;
z-index: 2;
width: 175px;
background: #c20000;
text-align: center;
height: 40px;
-webkit-border-radius: 0px 0px 2x 2px;
border-radius: 0px 0px 2px 2px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
text-transform: uppercase;
}
#button:hover {
background: #da0000;
cursor: pointer;
}
#button > h6{
line-height: 40px;
margin: 0px;
padding-top: 0px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.8em;
text-transform: uppercase;
}
#dropbox {
position: absolute;
top: 0px;
right: 10%;
color: #eee;
z-index: 1;
background: #222222;
width: 350px;
display: none;
-webkit-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
}
#dropbox .title {
height: 40px;
background: #414141;
}
#dropbox .title > h6{
line-height: 40px;
padding-left: 58px;
margin-top: 0px;
}
#dropbox {
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
text-transform: uppercase;
}
#dropbox .contact-form {
margin: 10px;
}
#dropbox .contact-form h6{
margin: 5px;
}
#dropbox input {
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.9em;
outline: none;
border: none;
width: 320px;
max-width: 330px;
padding: 5px;
margin: 10px 0px;
background: #444444;
color: #eee;
}
#dropbox textarea {
height: 70px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.9em;
outline: none;
border: none;
width: 320px;
max-width: 330px;
padding: 5px;
margin: 10px 0px;
background: #444444;
color: #eee;
}
#dropbox input[type=submit] {
margin: 0px;
width: 330px;
cursor: pointer;
color: #999;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.8em;
text-transform: uppercase;
font-weight: bold;
}
#dropbox input[type=submit]:hover {
color: #eee;
background: #c20000;
}