asked on

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

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>

Open in new window

ASKER CERTIFIED SOLUTION

dlearman1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial