Insert the reCAPTCHA widget into a contact form.


Topic: Insert the reCAPTCHA widget into a contact form.

Blissy pro asked 7 years ago

Hi,  I'm trying to insert the reCAPTCHA widget into your contact form "bootstrap-contact-form-ajax" but can not for the life of me get it to working properly. Could you possible let me have the necessary codes and instructions to get it working. Thanks

Bartłomiej Malanowski staff pro premium commented 7 years ago

Could you please provide us more details? What's the technology you use? What is not working?

Blissy pro answered 7 years ago

Thanks for your reply. The website landing page that I’m trying to get the Google reCAPTCHA widget to work on can be found by following this link - http://fletcherroofing.co.uk/ . You shouldn’t be able to send the message without ticking the ”I’m not a robot box” as in your contact form on your website but my one lets you send a message without ticking the box. Below are the coding I’m using. This is the html code. <!--Section: Contact v.2--> <section id="contact" class="section contact pb-4 wow fadeIn" data-wow-delay="0.3s"> <!--Section heading--> <h2 class="section-heading h1 pt-4">Contact us</h2> <!--Section description--> <p class="section-description">We are happy to answer any questions you have or provide you with a free quotation. Just contact us on either number below, email us or send us a message using the contact form.</p> <div class="row contact-numbers"> <!--First column--> <div class="col-md-4"> <img src="icons/Graham-Bliss-Landline-Icon.svg" class="img-fluid z-depth-3 rounded-circle"> <h5 class="contact-details">01635 228586</h5> </div> <!--First column finished--> <!--Second column--> <div class="col-md-4"> <img src="icons/Graham-Bliss-Mobile-Icon.svg" class="rounded-circle img-fluid z-depth-1-half"> <h5 class="contact-details">07554 003786</h5> </div> <!--Second column finished--> <!--Third column--> <div class="col-md-4"> <img src="icons/Graham-Bliss-Email-Icon.svg" class="rounded-circle img-fluid z-depth-1-half"> <h5 class="contact-details"><a href="mailto:info@fletcherroofing.co.uk" alt="Click/Tap to email info@fletcherroofing.co.uk" Title="Click/Tap to email info@fletcherroofing.co.uk" align="middle">info@fletcherroofing.co.uk</a></h5> </div> <!--Third column finished--> </div> </section> <!-- Contacts Finished --> <section id="contactus-form"> <div class="row-fluid mb-4"> <!--Grid column--> <div class="mx-auto"> <h3>Contact Form</h3> <form id ="contact-form" name="contact-form" action="mail.php" method="POST" onsubmit="return validateForm()" > <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-md-6"> <div class="md-form"> <div class="md-form"> <input type="text" id="name" name="name" class="form-control"> <label for="name" class="">Your name</label> </div> </div> </div> <!--Grid column--> <!--Grid column--> <div class="col-md-6"> <div class="md-form"> <div class="md-form"> <input type="text" id="email" name="email" class="form-control"> <label for="email" class="">Your email</label> </div> </div> </div> <!--Grid column--> </div> <!--Grid row--> <!--Grid row--> <div class="row"> <div class="col-md-12"> <div class="md-form"> <input type="text" id="subject" name="subject" class="form-control"> <label for="subject" class="">Subject</label> </div> </div> </div> <!--Grid row--> <!--Grid row--> <div class="row"> <!--Grid column--> <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="g-recaptcha" data-sitekey="6LeKXzcUAAAAAO7g0jy8QoIAli6GrPhEcFuuN46o"></div> <div class="center-on-small-only"> <a class="btn btn-outline-primary waves-effect" onclick="validateForm()">Send</a> </div> <div class="status" id="status"></div> </div> <!--Grid column--> </div> </section> <!--Section: Contact v.2--> This is the Mail.php code. <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $subject = $_POST['subject']; if ($name === ''){ echo "Name cannot be empty."; die(); } if ($email === ''){ echo "Email cannot be empty."; die(); } else { if (!filter_var($email, FILTER_VALIDATE_EMAIL)){ echo "Email format invalid."; die(); } } if ($subject === ''){ echo "Subject cannot be empty."; die(); } if ($message === ''){ echo "Message cannot be empty."; die(); } $content="From: $name nEmail: $email nMessage: $message"; $recipient = "info@fletcherroofing.co.uk"; $mailheader = "From: $email rn"; mail($recipient, $subject, $content, $mailheader) or die("Error!"); echo "Your Email Has Been Sent, We Will Get Back To You ASAP."; ?> Best Regards Paul

Bartłomiej Malanowski staff pro premium commented 7 years ago

Please share your files with me at b.malanowski@mdbootstrap.com

Blissy pro answered 7 years ago

I've just sent a Adobe link to download the files you requested Bartlomiej.

Blissy pro answered 7 years ago

Any luck Bartlomiej?

Bartłomiej Malanowski staff pro premium commented 7 years ago

please check your email

Blissy pro answered 7 years ago

Bartlomiej, I sent you a email with the zip 2 days ago, any luck?

Bartłomiej Malanowski staff pro premium commented 7 years ago

Please check your email

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No