troubleshooting Question

Install reCaptcha v3 on a form and retain existing built-in protections?

Avatar of dlearman1
dlearman1Flag for United States of America asked on
* recaptchaJavaScriptPHPjQueryJSON
1 Comment1 Solution89 ViewsLast Modified:
Generally, my thinking is to (1) create two files reCaptcha-test.html and reCaptcha-test.php; (2) prevent.default on the form's submit button, (2) use jQuery submit function to redirect the post to reCaptcha-php for processing. (3) if processing is successful, restore the original form processing, client verification and post to sendForm.php. If reCaptcha processing fails, viewer is referred to a custom error page, failure.htm.

My code is below. It does fetch the reCaptcha token, but my minuscule PHP skills fail after that.  I'm hoping someone can help debug this and point me  in the right direction.

reCaptcha-test.htm

<!doctype html>
<html lang="en" class="no-js">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>"reCaptcha v3 Test"</title>

    <script src='https://www.google.com/recaptcha/api.js?render=SITE-KEY-GOES-HERE'></script>
    <script src="./_js/vendor/modernizr/modernizr-custom.js"></script> 

    <link rel="apple-touch-icon" href="./icon.png">
    <link rel="stylesheet" href="./_css/main.css" crossorigin="anonymous">
  </head>

  <body>
   
  
          <div class="c-contact-block-2__form-wrapper">
            <form class="needs-validation form-box" novalidate method="post" action="http://www.themagnolia.com/sendForm.php" name="contactForm" id="contactForm">
            <input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER" />
              <div class="form-row">
                <div class="col-sm-12">

                  <div class="form-group">
                    <label for="validationCustom01" class="sr-only">Full name</label>
                    <input type="text" class="form-control form-control-sm" id="validationCustom01" name="inputName" aria-describedby="nameHelp" autocomplete="on" placeholder="Name" required>
                    <small id="nameHelp" class="form text text-muted sr-only">Enter your full name</small>
                    <div class="invalid-feedback">
                      Please provide your name.
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="validationCustom02" class="sr-only">Email address</label>
                    <input type="email" class="form-control form-control-sm" id="validationCustom02" name="inputEmail" aria-describedby="emailHelp" autocomplete="on" placeholder="Email" required>
                    <small id="emailHelp" class="form text text-muted sr-only">Enter your email address</small>
                    <div class="invalid-feedback">
                      Please provide a valid email.
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="validationCustom03" class="sr-only">Phone Number</label>
                    <input type="tel" class="form-control form-control-sm" id="validationCustom03" name="inputPhone" aria-describedby="phoneHelp" autocomplete="on" placeholder="Phone">
                    <small id="phoneHelp" name="inputPhone" class="form text text-muted sr-only">Enter your phone number</small>
                    <div class="invalid-feedback">
                      Please choose a valid phone number.
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="validationCustom08" class="sr-only">Message Text</label>
                    <textarea type="text" class="form-control form-control-sm" id="validationCustom08" name="inputMessage" aria-describedby="messageHelp" autocomplete="on" placeholder="How Can We Help?" rows="3" required>
ASKER CERTIFIED SOLUTION
dlearman1
Principal

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros