I have created custom contact from with Ajax and implemented in WordPress. Now I want to add custom captcha
script.
Currently I am using this captcha script for my contact form 9lessons phpcaptcha but after implementing I am getting verification Wrong
alert box every time. I don’t know whats wrong in my code.
FYI: I have created plugin file so I have added all code in one file.
My Code:
<?php
session_start();
$cap = 'notEq';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_POST['captcha'] == $_SESSION['cap_code']) {
// Captcha verification is Correct. Do something here!
$cap = 'Eq';
} else {
// Captcha verification is wrong. Take other action
$cap = '';
}
}
?>
<?php
function saleContactForm() {
?>
<form method="post" action="" id="SaleForm">
<ul class="cnt-frm">
<li><input name="sa_first_name" id="sa_first_name" type="text" value="First Name*" class="sl-txbx" maxlength="20" onchange="return trim(this)"></li>
<li><input name="sa_last_name" id="sa_last_name" type="text" value="Last Name*" class="sl-txbx" maxlength="20" onchange="return trim(this)"></li>
<li><input name="sa_company" id="sa_company" type="text" value="Company*" class="sl-txbx" maxlength="20" onchange="return trim(this)"></li>
<li><input name="sa_email" id="sa_email" type="text" value="Email*" class="sl-txbx" onchange="return trim(this)"></li>
<li><input name="sa_phone" id="sa_phone" type="text" value="Phone*" class="sl-txbx" maxlength="14" onchange="return trim(this)"></li>
<li><textarea name="sa_message" id="sa_message" class="sl-txara" onchange="return trim(this)">Message*</textarea></li>
<li><input type="hidden" name="action" value="saleAction"/></li>
<li>
<input type="text" name="captcha" id="captcha" maxlength="6" size="6"/>
<img src="http://localhost/example/wp-content/plugins/sale/captcha.php"/>
</li>
<li><input type="reset" name="reset" value="reset" id="sale_reset" class="re_none"></li>
<li><input type="submit" name="submit" value="submit" class="submit"></li>
</ul>
</form>
<script type="text/javascript">
jQuery('#SaleForm').submit(ajaxSubmit);
function ajaxSubmit(){
var capch = '<?php echo $cap; ?>';
if(capch != 'notEq'){
if(capch == 'Eq'){
alert("Your form is successfully Submitted ");
}else{
alert("verification Wrong!");
return false;
}
}
var SaleForm = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
url: "<?php echo esc_url( home_url( '/' ) ); ?>wp-admin/admin-ajax.php",
data: SaleForm,
success:function(data){
alert('Thanks! Your request has been sent.');
jQuery( "#sale_reset" ).trigger( "click" );
},
error: function(errorThrown){
alert(errorThrown);
}
});
return false;
}
</script>
<?php
}
function widget_saleContactForm() {
saleContactForm();
}
wp_enqueue_script('jquery');
add_action('wp_ajax_saleAction', 'saleAction');
function saleAction() {
$sa_first_name = $_POST['sa_first_name'];
die();
}
add_action('wp_ajax_nopriv_saleAction', 'saleAction');
?>
captcha.php:
<?php
session_start();
$ranStr = md5(microtime());
$ranStr = substr($ranStr, 0, 6);
$_SESSION['cap_code'] = $ranStr;
$newImage = imagecreatefromjpeg("cap_bg.jpg");
$txtColor = imagecolorallocate($newImage, 0, 0, 0);
imagestring($newImage, 5, 5, 5, $ranStr, $txtColor);
header("Content-type: image/jpeg");
imagejpeg($newImage);
?>
I will appreciate if you help to sort out this issue.
Thanks.
As I seen your code, it will not call the captcha verification.
change the submit button name to some thing else otherwise the jquery submit will not triggered.
Verify the captcha using ajax on form submit event.
When it captcha code is correct then again send the ajax request to store the data.if its incorrect refresh the captcha image.