Recaptcha and Firebase with Plain HTML / PHP and Kirby

I'm trying to implement firebase on a Kirby website (a CMS run on PHP) so visitors can mark subpages to show up as links on the landing page.

To do this, I've constructed a form where a user adds their name when on the subpage to highlight it. The form doesn't submit when the button is clicked, but instead uses JS to add a document to Firebase (where it can be approved or deleted).

I'd like to prevent abuse and am interested in adding Recaptcha as a step when the visitor "submits" the page.

A simplified version of my code looks like this.

HTML:

<form id="add-item" action="?" method="POST">
    <label for="f-name">Submitted by:</label>
    <input type="text" id="f-name" name="f-name" placeholder="your name">
    <button type="submit">Submit</button>
</form>

JS:

document.querySelector("#add").addEventListener("click", function(e){
  const fName = document.querySelector('#f-name').value;
  tableRef.get().then(function(querySnapshot) {      
  var uid = Date.now().toString(36) + Math.random().toString(36).substr(2);
    if(fName === true){
          tableRef.doc('item-'+uid).set({
            contributor: fName,
          })
        }
      });
  e.preventDefault();
  return false;
})

I've found answers to enable Recaptcha with Firebase that use Firebase hosting, or as a method for sign in:

Using recaptcha with Firebase

How to use it with Angular or React:

Google/Firebase reCaptcha not working with angular Firebase: Invisible reCaptcha does not work in React JS

I am wondering how this can be done using just HTML (no app framework), or with PHP, and without a login?

I am very amateur web developer, so really appreciate any insights on this! I apologize in advance if this is an obvious question. Thank you!

Solution

here’s the code how you can add recaptcha but I’ll suggest you to use Php in the backend to verify the status :

First add this in head tag

<script src='https://www.google.com/recaptcha/api.js'></script>

Then add the site key and block for error message

<div class="g-recaptcha" id="rcaptcha"  data-sitekey="site key"></div>
<span id="captchaStatus" style="color:red" /></span>

Then add script tag :

<script>
function checkCaptcha(form) 
{
    var v = grecaptcha.getResponse();
    if(v.length == 0)
    {
        document.getElementById('captchaStatus').innerHTML="Captcha code is empty";
        return false;
    }
    else
    {
         document.getElementById('captchaStatus').innerHTML="Captcha completed";
        return true; 
    }
}

</script>