Please ask if someone with a good heart can help me add recaptch to my contact form on my website since I can’t do it without help, and if I don’t have recaptch I receive many spam emails.
please ask for help
here contact.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<!-- Contact Form -->
<form id="contact_form" name="contact_form" class="" action="includes/sendmail.php" method="post">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="form_name">Name <small>*</small></label>
<input id="form_name" name="form_name" class="form-control" type="text" placeholder="Enter Name" required="">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="form_email">Email <small>*</small></label>
<input id="form_email" name="form_email" class="form-control required email" type="email" placeholder="Enter Email">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="form_name">Subject <small>*</small></label>
<input id="form_subject" name="form_subject" class="form-control required" type="text" placeholder="Enter Subject">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" name="form_phone" class="form-control" type="text" placeholder="Enter Phone">
</div>
</div>
</div>
<div class="form-group">
<label for="form_name">Message</label>
<textarea id="form_message" name="form_message" class="form-control required" rows="5" placeholder="Enter Message"></textarea>
</div>
<div class="form-group">
<input id="form_botcheck" name="form_botcheck" class="form-control" type="hidden" value="" />
<button type="submit" class="btn btn-dark btn-theme-colored btn-flat mr-5" data-loading-text="Please wait...">Send your message</button>
<button type="reset" class="btn btn-default btn-flat btn-theme-colored">Reset</button>
</div>
</form>
<!-- Contact Form Validation-->
<script type="text/javascript">
$("#contact_form").validate({
submitHandler: function(form) {
var form_btn = $(form).find('button[type="submit"]');
var form_result_div = '#form-result';
$(form_result_div).remove();
form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
var form_btn_old_msg = form_btn.html();
form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
$(form).ajaxSubmit({
dataType: 'json',
success: function(data) {
if( data.status == 'true' ) {
$(form).find('.form-control').val('');
}
form_btn.prop('disabled', false).html(form_btn_old_msg);
$(form_result_div).html(data.message).fadeIn('slow');
setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
}
});
}
});
</script>
</div>
</div>
</div>
</section>
</section>
<!-- end main-content -->
</div>
<section>
<div class="container-fluid p-20" data-bg-color="#253944">
<div class="row text-center">
<div class="col-md-12">
<p class="text-white font-11 m-0">Copyright ©2016 . All Rights Reserved</p>
</div>
</div>
</div>
</section>
</footer>
<a class="scrollToTop" href="#"><i class="fa fa-angle-up"></i></a>
</div>
<!-- end wrapper -->
<!-- Footer Scripts -->
<!-- JS | Custom script for all pages -->
<script src="js/custom.js"></script>
</body>
</html>
here sendmail.php
<?php
require_once('phpmailer/class.phpmailer.php');
require_once('phpmailer/class.smtp.php');
$mail = new PHPMailer();
//$mail->SMTPDebug = 3; // Enable verbose debug output
$mail->isSMTP(); // Set mailer to use SMTP
$mail->Host = 'domain.com'; // Specify main and backup SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'user'; // SMTP username
$mail->Password = 'pass'; // SMTP password
$mail->SMTPSecure = 'ssl'; // Enable TLS encryption, `ssl` also accepted
$mail->Port = 465; // TCP port to connect to
$message = "";
$status = "false";
if( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
if( $_POST['form_name'] != '' AND $_POST['form_email'] != '' AND $_POST['form_subject'] != '' ) {
$name = $_POST['form_name'];
$email = $_POST['form_email'];
$subject = $_POST['form_subject'];
$phone = $_POST['form_phone'];
$message = $_POST['form_message'];
$subject = isset($subject) ? $subject : 'New Message | Contact Form';
$botcheck = $_POST['form_botcheck'];
$toemail = 'spam.thememascot@gmail.com'; // Your Email Address
$toname = 'ThemeMascot'; // Your Name
if( $botcheck == '' ) {
$mail->SetFrom( $email , $name );
$mail->AddReplyTo( $email , $name );
$mail->AddAddress( $toemail , $toname );
$mail->Subject = $subject;
$name = isset($name) ? "Name: $name<br><br>" : '';
$email = isset($email) ? "Email: $email<br><br>" : '';
$subject = isset($subject) ? "Subject: $subject<br><br>" : '';
$phone = isset($phone) ? "Phone: $phone<br><br>" : '';
$message = isset($message) ? "Message: $message<br><br>" : '';
$referrer = $_SERVER['HTTP_REFERER'] ? '<br><br><br>This Form was submitted from: ' . $_SERVER['HTTP_REFERER'] : '';
$body = "$name $email $subject $phone $message $referrer";
$mail->MsgHTML( $body );
$sendEmail = $mail->Send();
if( $sendEmail == true ):
$message = 'We have <strong>successfully</strong> received your Message and will get Back to you as soon as possible.';
$status = "true";
else:
$message = 'Email <strong>could not</strong> be sent due to some Unexpected Error. Please Try Again later.<br /><br /><strong>Reason:</strong><br />' . $mail->ErrorInfo . '';
$status = "false";
endif;
} else {
$message = 'Bot <strong>Detected</strong>.! Clean yourself Botster.!';
$status = "false";
}
} else {
$message = 'Please <strong>Fill up</strong> all the Fields and Try Again.';
$status = "false";
}
} else {
$message = 'An <strong>unexpected error</strong> occured. Please Try Again later.';
$status = "false";
}
$status_array = array( 'message' => $message, 'status' => $status);
echo json_encode($status_array);
?>
Have you been through the ReCapcha documentation?
ReCaptcha
It’s pretty easy to integrate & looking at your code it doesn’t look as though you’ve attempted it yet?
What happens is that I did it in other files and it never came out that is why I send the clean files to see if someone with a good heart helps me to implement the Google recaptcha.
I would appreciate it with all my soul if you help me
Have you setup your keys in the google console yet? This would be the first step i would recommend as these will be key (excuse the pun) when you come to add the code to your project.
Then once you have the keys,
Place this in your form, before the form closing tag or wherever you think looks best. Maybe before your submit button.
<div id="g-recaptcha-error"></div>
<div class="g-recaptcha" data-sitekey="your public site key goes here"></div>
place this in your footer:-<script src= 'https://www.google.com/recaptcha/api.js' ></script>
And add this to the end of the document before your script tags. This is to validate the user input should they somehow forget to click on the recaptcha box.
<script>
function submitUserForm() {
var response = grecaptcha.getResponse();
if(response.length == 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
return false;
}
return true;
}
function verifyCaptcha() {
document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>
Hope this helps.
thanks for helping me in this step
but that is what you said but the recaptcha does not work send the message even if the recaptcha has not been verified
He doesn’t call recaptcha.
sorry for bothering you a lot and thanks for your great help I am very grateful.
I just can’t solve the problem since I have a lot of spam in my email because I don’t have a recaptch in my email submission form
<form id="contact_form" name="contact_form" class="" action="includes/sendmail.php" method="post">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="form_name">Name <small>*</small></label>
<input id="form_name" name="form_name" class="form-control" type="text" placeholder="Enter Name" required="">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="form_email">Email <small>*</small></label>
<input id="form_email" name="form_email" class="form-control required email" type="email" placeholder="Enter Email">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="form_name">Subject <small>*</small></label>
<input id="form_subject" name="form_subject" class="form-control required" type="text" placeholder="Enter Subject">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" name="form_phone" class="form-control" type="text" placeholder="Enter Phone">
</div>
</div>
</div>
<div class="form-group">
<label for="form_name">Message</label>
<textarea id="form_message" name="form_message" class="form-control required" rows="5" placeholder="Enter Message"></textarea>
</div>
<div id="g-recaptcha-error"></div>
<div class="g-recaptcha" data-sitekey="6LdY6cwUAAAAAKxxxxxxxxxxxxxxx"></div>
<div class="form-group">
<input id="form_botcheck" name="form_botcheck" class="form-control" type="hidden" value="" />
<button type="submit" class="btn btn-dark btn-theme-colored btn-flat mr-5" data-loading-text="Please wait...">Send your message</button>
<button type="reset" class="btn btn-default btn-flat btn-theme-colored">Reset</button>
</div>
</form>
<script src= 'https://www.google.com/recaptcha/api.js' ></script>
<script>
function submitUserForm() {
var response = grecaptcha.getResponse();
if(response.length == 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
return false;
}
return true;
}
function verifyCaptcha() {
document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>
<!-- Contact Form Validation-->
<script type="text/javascript">
$("#contact_form").validate({
submitHandler: function(form) {
var form_btn = $(form).find('button[type="submit"]');
var form_result_div = '#form-result';
$(form_result_div).remove();
form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
var form_btn_old_msg = form_btn.html();
form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
$(form).ajaxSubmit({
dataType: 'json',
success: function(data) {
if( data.status == 'true' ) {
$(form).find('.form-control').val('');
}
form_btn.prop('disabled', false).html(form_btn_old_msg);
$(form_result_div).html(data.message).fadeIn('slow');
setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
}
});
}
});
</script>
omaritotigo:
Try putting the following…
<script src= 'https://www.google.com/recaptcha/api.js' ></script>
underneath this:-
<script>
function submitUserForm() {
var response = grecaptcha.getResponse();
if(response.length == 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
return false;
}
return true;
}
function verifyCaptcha() {
document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>
sorry for bothering you but I still have the same problem
the messages are sent without checking the recaptcha as in the image that I sent you
I’m lost, try thousands of ways but I can’t solve it, I hope you can help me
<section class="divider">
<div class="container pt-0">
<div class="row mb-60 bg-deep">
</div>
<div class="row pt-10">
<div class="col-md-5">
<h4 class="mt-0 mb-30 line-bottom">Find Our Location</h4>
<!-- Google Map HTML Codes -->
<div
data-address="121 King Street, Melbourne Victoria 3000 Australia"
data-popupstring-id="#popupstring1"
class="map-canvas autoload-map"
data-mapstyle="style2"
data-height="400"
data-latlng="-22.9109861,-68.2002132,18z"
data-title="sample title"
data-zoom="12"
data-marker="images/map-icon-blue.png">
</div>
<div class="map-popupstring hidden" id="popupstring1">
<div class="text-center">
<h3>CharityPress Office</h3>
<p>121 King Street, Melbourne Victoria 3000 Australia</p>
</div>
</div>
<!-- Google Map Javascript Codes -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyAYWE4mHmR9GyPsHSOVZrSCOOljk8DU9B4"></script>
<script src="js/google-map-init.js"></script>
</div>
<div class="col-md-7">
<h4 class="mt-0 mb-30 line-bottom">Interested in discussing?</h4>
<!-- Contact Form -->
<form id="contact_form" name="contact_form" class="" action="includes/sendmail.php" method="post">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="form_name">Name <small>*</small></label>
<input id="form_name" name="form_name" class="form-control" type="text" placeholder="Enter Name" required="">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="form_email">Email <small>*</small></label>
<input id="form_email" name="form_email" class="form-control required email" type="email" placeholder="Enter Email">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="form_name">Subject <small>*</small></label>
<input id="form_subject" name="form_subject" class="form-control required" type="text" placeholder="Enter Subject">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" name="form_phone" class="form-control" type="text" placeholder="Enter Phone">
</div>
</div>
</div>
<div class="form-group">
<label for="form_name">Message</label>
<textarea id="form_message" name="form_message" class="form-control required" rows="5" placeholder="Enter Message"></textarea>
</div>
<div class="form-group">
<div id="g-recaptcha-error"></div>
<div class="g-recaptcha" data-sitekey="6LdY6cwUAAAAAKSr0AdEsXC_tFxxxxxxxxxx"></div>
<input id="form_botcheck" name="form_botcheck" class="form-control" type="hidden" value="" />
<button type="submit" class="btn btn-dark btn-theme-colored btn-flat mr-5" data-loading-text="Please wait...">Send your message</button>
<button type="reset" class="btn btn-default btn-flat btn-theme-color">Reset</button>
</div>
</form>
<script src= 'https://www.google.com/recaptcha/api.js' ></script>
<script>
function submitUserForm() {
var response = grecaptcha.getResponse();
if(response.length == 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
return false;
}
return true;
}
function verifyCaptcha() {
document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>
<!-- Contact Form Validation-->
<script type="text/javascript">
$("#contact_form").validate({
submitHandler: function(form) {
var form_btn = $(form).find('button[type="submit"]');
var form_result_div = '#form-result';
$(form_result_div).remove();
form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
var form_btn_old_msg = form_btn.html();
form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
$(form).ajaxSubmit({
dataType: 'json',
success: function(data) {
if( data.status == 'true' ) {
$(form).find('.form-control').val('');
}
form_btn.prop('disabled', false).html(form_btn_old_msg);
$(form_result_div).html(data.message).fadeIn('slow');
setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
}
});
}
});
</script>
</div>
</div>
</div>
</section>
Amigo, lo siento mucho. I somehow forgot to give you the snippet to prevent the form.
Change your starting form tag from this:-
<form id="contact_form" name="contact_form" class="" action="includes/sendmail.php" method="post">
To this:-
<form id="contact_form" name="contact_form" class="" action="includes/sendmail.php" method="post" onsubmit="return submitUserForm();">
That will then call the submitUserForm function and prevent the user from submitting until the recaptcha has been verified.
Apologies again.
thanks for your great help you are helping me a lot and thanks to you I am learning.
I don’t know if it’s too much to bother you but I just need a little detail
if you look at the image the message sends without verifying the recaptcha but the recaptcha asks to verify.
the problem is in the sendmail.php file
I think you have to add a line so that when the “send your message” button is pressed, it doesn’t send the message until the person verifies the recaptcha
I leave the file code sendmail.php
and thank you very much for your great help.
sendmail.php
<?php
require_once('phpmailer/class.phpmailer.php');
require_once('phpmailer/class.smtp.php');
$mail = new PHPMailer();
//$mail->SMTPDebug = 3; // Enable verbose debug output
$mail->isSMTP(); // Set mailer to use SMTP
$mail->Host = 'sharedxxxxxx.com'; // Specify main and backup SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'info@mydomain.net'; // SMTP username
$mail->Password = 'marxxxxxxxx'; // SMTP password
$mail->SMTPSecure = 'ssl'; // Enable TLS encryption, `ssl` also accepted
$mail->Port = 465; // TCP port to connect to
$message = "aaaaaa";
$status = "false";
if( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
if( $_POST['form_name'] != '' AND $_POST['form_email'] != '' AND $_POST['form_subject'] != '' ) {
$name = $_POST['form_name'];
$email = $_POST['form_email'];
$subject = $_POST['form_subject'];
$phone = $_POST['form_phone'];
$message = $_POST['form_message'];
$subject = isset($subject) ? $subject : 'New Message | Contact Form';
$botcheck = $_POST['form_botcheck'];
$toemail = 'info@mydomain.net'; // Your Email Address
$toname = 'Atama Horse Adventure'; // Your Name
if( $botcheck == '' ) {
$mail->SetFrom( $email , $name );
$mail->AddReplyTo( $email , $name );
$mail->AddAddress( $toemail , $toname );
$mail->Subject = $subject;
$name = isset($name) ? "Name: $name<br><br>" : '';
$email = isset($email) ? "Email: $email<br><br>" : '';
$subject = isset($subject) ? "Subject: $subject<br><br>" : '';
$phone = isset($phone) ? "Phone: $phone<br><br>" : '';
$message = isset($message) ? "Message: $message<br><br>" : '';
$referrer = $_SERVER['HTTP_REFERER'] ? '<br><br><br>This Form was submitted from: ' . $_SERVER['HTTP_REFERER'] : '';
$body = "$name $email $subject $phone $message $referrer";
$mail->MsgHTML( $body );
$sendEmail = $mail->Send();
if( $sendEmail == true ):
$message = 'We have <strong>successfully</strong> received your Message and will get Back to you as soon as possible.';
$status = "true";
else:
$message = 'Email <strong>could not</strong> be sent due to some Unexpected Error. Please Try Again later.<br /><br /><strong>Reason:</strong><br />' . $mail->ErrorInfo . '';
$status = "false";
endif;
} else {
$message = 'Bot <strong>Detected</strong>.! Clean yourself Botster.!';
$status = "false";
}
} else {
$message = 'Please <strong>Fill up</strong> all the Fields and Try Again.';
$status = "false";
}
} else {
$message = 'An <strong>unexpected error</strong> occured. Please Try Again later.';
$status = "false";
}
$status_array = array( 'message' => $message, 'status' => $status);
echo json_encode($status_array);
?>
contact.html
<form id="contact_form" name="contact_form" class="" action="includes/sendmail.php" method="post" onsubmit="return submitUserForm();">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="form_name">Name <small>*</small></label>
<input id="form_name" name="form_name" class="form-control" type="text" placeholder="Enter Name" required="">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="form_email">Email <small>*</small></label>
<input id="form_email" name="form_email" class="form-control required email" type="email" placeholder="Enter Email">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="form_name">Subject <small>*</small></label>
<input id="form_subject" name="form_subject" class="form-control required" type="text" placeholder="Enter Subject">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" name="form_phone" class="form-control" type="text" placeholder="Enter Phone">
</div>
</div>
</div>
<div class="form-group">
<label for="form_name">Message</label>
<textarea id="form_message" name="form_message" class="form-control required" rows="5" placeholder="Enter Message"></textarea>
</div>
<div class="form-group">
<div id="g-recaptcha-error"></div>
<div class="g-recaptcha" data-sitekey="6LdY6cwUAAAAAKSr0xxxxxxxxxxxxx"></div>
<br>
<input id="form_botcheck" name="form_botcheck" class="form-control" type="hidden" value="" />
<button type="submit" class="btn btn-dark btn-theme-colored btn-flat mr-5" data-loading-text="Please wait...">Send your message</button>
<button type="reset" class="btn btn-default btn-flat btn-theme-colored">Reset</button>
</div>
</form>
<script src= 'https://www.google.com/recaptcha/api.js' ></script>
<script>
function submitUserForm() {
var response = grecaptcha.getResponse();
if(response.length == 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
return false;
}
return true;
}
function verifyCaptcha() {
document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>
<!-- Contact Form Validation-->
<script type="text/javascript">
$("#contact_form").validate({
submitHandler: function(form) {
var form_btn = $(form).find('button[type="submit"]');
var form_result_div = '#form-result';
$(form_result_div).remove();
form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
var form_btn_old_msg = form_btn.html();
form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
$(form).ajaxSubmit({
dataType: 'json',
success: function(data) {
if( data.status == 'true' ) {
$(form).find('.form-control').val('');
}
form_btn.prop('disabled', false).html(form_btn_old_msg);
$(form_result_div).html(data.message).fadeIn('slow');
setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
}
});
}
});
</script>
my website with form
https://horse.webscreations.net/en/contact.html
I think the problem is in this part - find('button[type=“submit”]
<!-- Contact Form Validation-->
<script type="text/javascript">
$("#contact_form").validate({
submitHandler: function(form) {
var form_btn = $(form).find('button[type="submit"]');
var form_result_div = '#form-result';
$(form_result_div).remove();
form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
var form_btn_old_msg = form_btn.html();
form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
$(form).ajaxSubmit({
dataType: 'json',
success: function(data) {
if( data.status == 'true' ) {
$(form).find('.form-control').val('');
}
form_btn.prop('disabled', false).html(form_btn_old_msg);
$(form_result_div).html(data.message).fadeIn('slow');
setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
}
});
}
});
</script>
system
April 27, 2020, 9:43pm
12
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
