Avatar of dlearman1
dlearman1
Flag for United States of America 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

* recaptchaJavaScriptPHPjQueryJSON

Avatar of undefined
Last Comment
dlearman1

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
dlearman1

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy