Topic: bootstrapcontact form and recaptcha integration
hello
I try to integrate google recaptcha to bootstrap contact form , and actually I have added below codes but it didnt work well
mail.php ;
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$subject = $_POST['subject'];
header('Content-Type: application/json');
if ($name === ''){
print json_encode(array('message' => 'Name cannot be empty', 'code' => 0));
exit();
}
if ($email === ''){
print json_encode(array('message' => 'Email cannot be empty', 'code' => 0));
exit();
} else {
if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
print json_encode(array('message' => 'Email format invalid.', 'code' => 0));
exit();
}
}
if ($subject === ''){
print json_encode(array('message' => 'Subject cannot be empty', 'code' => 0));
exit();
}
if ($message === ''){
print json_encode(array('message' => 'Message cannot be empty', 'code' => 0));
exit();
}
// ReCaptch Secret
$recaptchaSecret = '*********************************;
//reCAPTCHA validation
if (isset($_POST['g-recaptcha-response'])) {
require('recaptcha/src/autoload.php');
$recaptcha = new ReCaptchaReCaptcha(SECRET_KEY, new ReCaptchaRequestMethodSocketPost());
$resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
if (!$resp->isSuccess()) {
$errors = json_encode(array('type'=>'error', 'text' => 'Captcha is Required!'));
die($output);
}
}
$content="From: $name nEmail: $email nMessage: $message";
$recipient = "admin@admin.com";
$mailheader = "From: $email rn";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
exit();
?>
----------------------------------------------------------------------------------------------------------------
and ı have added below code into index.htm
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" class="md-textarea"></textarea>
<label for="message">Your message</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="center-on-small-only">
<a class="btn btn-primary" onclick="validateForm()">Send</a>
</div> <div class="status" id="status"></div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 col-xl-3">
<ul class="contact-icons">
<li><i class="fa fa-map-marker fa-2x"></i>
<p>Your Address</p>
</li>
<li><i class="fa fa-envelope fa-2x"></i>
<p>info@yourwebsite.com</p>
<li><i class="fa fa-phone fa-2x"></i>
<p>Your phone :123123-456-897</p>
</li>
</li>
</ul>
</div>
<!--Grid column-->
</div>
</section>
<!--recaptcha--> <!--Section: Contact v.1-->
<div class="form-group">
<div class="g-recaptcha" data-sitekey="***********************************" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>
<input class="form-control d-none" data-recaptcha="true" required data-error="Please complete the Captcha">
<div class="help-block with-errors"></div>
</div>
<!--recaptcha--> <!--Section: Contact v.1-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.js"></script>
<!--Custom scripts-->
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Bartłomiej Malanowski staff commented 6 years ago
Do you use MDB jQuery or MDB Angular?