Implement reCAPTCHA v2 into generated custom HTML webform on Wordpress

Question

I am implementing a webform that is provided by my CRM to automatically put leads into the system. They provide html code that I can simply insert into my website. They do not provide any captcha with their code. I need some help on inserting the reCAPTCHA v2 code into their HTML without breaking the link to the CRM.

I have successfully implemented the checkbox on the webform, but the user is able to submit the form without checking the box...and I am getting spam.

Here is my HTML code:

<div>
  <form
    id="webleadform"
    action="https://lumberjj.arborgold.net/ag/webleads/addlead"
    method="post"
  >
    <div>
      <div>
        <label>First Name</label>
        <input
          type="text"
          id="FirstName"
          name="FirstName"
          maxlength="150"
          required="true"
        />
      </div>
    </div>
    <div>
      <div>
        <label for="LastName">Last Name</label>
        <input
          type="text"
          id="LastName"
          name="LastName"
          maxlength="150"
          required="true"
        />
      </div>
    </div>
    <div>
      <div>
        <label for="Company">Company Name</label> (optional)
        <input 
          type="text" 
          id="Company" 
          name="Company" 
          maxlength="150" 
        />
      </div>
    </div>
    <div>
      <div>
        <label for="Address">Address</label> 
        <input
          type="text"
          id="Address"
          name="Address"
          maxlength="150"
          required="true"
        />
      </div>
    </div>
    <div>
      <div>
        <label for="City">City</label> 
        <input
          type="text"
          id="City"
          name="City"
          maxlength="150"
          required="true"
        />
      </div>
      <div>
        <label for="State">State</label> 
        <input
          type="text"
          id="State"
          name="State"
          maxlength="150"
          required="true"
        />
      </div>
      <div>
        <label for="Zip">Zip</label> 
        <input 
          type="text" 
          id="Zip" 
          name="Zip" 
          maxlength="10" 
          required="true" 
        />
      </div>
    </div>
    <div>
      <div>
        <label for="Phone">Phone</label> 
        <input
          type="tel"
          id="Phone"
          name="Phone"
          placeholder="xxx-xxx-xxxx"
          pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
          maxlength="12"
          required="true"
        />
      </div>
    </div>
    <div>
      <div>
        <label for="Email">Email</label> 
        <input
          type="email"
          id="Email"
          name="Email"
          aria-describedby="email"
          maxlength="125"
          required="true"
        />
      </div>
    </div>
    
    <div>
      <div>
          <label for="Scheduling">Would you like to be onsite for the estimate?</label>
            <select id="Scheduling" name="Scheduling" onchange="autofill()" required>
              <option disabled="disabled" selected="selected" style="display:none;">please select...</option>
              <option value="Yes">Yes, please call me to schedule time</option>
              <option value="No">No, you can drive by to provide an estimate</option>
            </select>
      </div>
    </div>
    
    <div>
      <div>
        <label for="Subject">Subject</label> 
        <input
          type="text"
          id="Subject"
          name="Subject"
          onchange="autofill()"
          maxlength="125"
          required="true"
        />
      </div>
    </div>
    <div>
      <div>
        <label for="Message">Message</label>
        <textarea
          id="Message"
          name="Message"
          rows="3"
          maxlength="500"
          required="true"
        ></textarea>
      </div>
    </div>
    <!-- This field must be included in your form -->
    <input
      type="hidden"
      id="CompanyCode"
      name="CompanyCode"
      value="###-######-######-######"
    />
    <!-- This field must be included in your form. -->
    <input
      type="hidden"
      id="RedirectUrl"
      name="RedirectUrl"
      value="https://ljjtree.local/thank-you"
    />
    <!-- reCAPTCHA checkbox -->
        <div
      class="g-recaptcha"
      data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
      style="padding: 10px 0"
    ></div>
    <button type="submit" style="width:100%">Send Message</button>
  </form>
</div>
<script>
  document
    .getElementById("webleadform")
    .addEventListener("submit", async function (e) {
      e.preventDefault()

      const form = e.target

      const formData = Object.fromEntries(new FormData(this).entries())

      try {
        const response = await fetch(form.action, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(formData),
        })

        if (response.ok) {
          const redirectUrl = formData.RedirectUrl

          if (redirectUrl) window.location.href = redirectUrl
        } else {
          const errorText = await response.text()
          alert(`Error submitting form: ${errorText}`)
        }
      } catch (error) {
        console.error("Error submitting form:", error)
        alert("A network error occurred. Please try again.")
      }
    })
</script>
<!--Auto applies dashes in phone number-->
<script>
    var tele = document.querySelector('#Phone');

tele.addEventListener('keyup', function(e){
  if (event.key != 'Backspace' && (tele.value.length === 3 || tele.value.length === 7)){
  tele.value += '-';
  }
});
</script>
<!--Auto applies Scheduling response into message-->
<script>
function autofill(){
    var x = document.getElementById('Scheduling').value;
    if(x=='Yes')
    {
        document.getElementById('Message').value= 'PLEASE LEAVE THIS AS PART OF THE MESSAGE (Scheduling Option:  please call me to schedule an estimate)';
    }
    if(x=='No')
    {
        document.getElementById('Message').value= 'PLEASE LEAVE THIS AS PART OF THE MESSAGE (Scheduling Option: a drive by estimate is preferred)';
    }
}</script>

Here is the script I have entered into the site header:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Any suggestions on how to update the code to force the validation before submission?

Answer 1

reCAPTCHA should be validated before submitting the form. You need to change your JavaScript to check for a valid reCAPTCHA response before sending the form data. 1- Add the following check at the start of your submit event listener to ensure the user has completed the reCAPTCHA before proceeding. This will stop the form being submitted if reCAPTCHA is not checked.

const recaptchaResponse = grecaptcha.getResponse();
if (!recaptchaResponse) {
    alert("Please complete the reCAPTCHA before submitting.");
    return;
}

2- Add the reCAPTCHA response to the formData before sending it:

formData["g-recaptcha-response"] = recaptchaResponse;

I think these 2 steps should help you to implement the process properly.