How to Add CAPTCHA to a Preexisting Contact Form using JavaScript?

<form id="contactForm">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name" required><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br>
  
  <!-- CAPTCHA -->
  <div id="captchaContainer">
    <span id="captcha"></span>
    <button type="button" id="refreshCaptcha">Refresh CAPTCHA</button>
  </div>
  <label for="captchaInput">Enter CAPTCHA:</label><br>
  <input type="text" id="captchaInput" required><br>

  <button type="submit">Submit</button>
</form>

<div id="message"></div>

<script>
  // Generate random CAPTCHA
  function generateCaptcha() {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let captcha = '';
    for (let i = 0; i < 6; i++) {
      captcha += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return captcha;
  }

  // Display CAPTCHA
  function displayCaptcha() {
    const captchaText = generateCaptcha();
    document.getElementById('captcha').textContent = captchaText;
    return captchaText;
  }

  // Store the generated CAPTCHA
  let currentCaptcha = displayCaptcha();

  // Refresh CAPTCHA
  document.getElementById('refreshCaptcha').addEventListener('click', function() {
    currentCaptcha = displayCaptcha();
  });

  // Form submission
  document.getElementById('contactForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent default form submission
    const userInput = document.getElementById('captchaInput').value;

    if (userInput === currentCaptcha) {
      document.getElementById('message').textContent = 'CAPTCHA validated successfully. Form submitted!';
      // You can proceed with form submission here (e.g., send form data)
    } else {
      document.getElementById('message').textContent = 'Incorrect CAPTCHA. Please try again.';
    }
  });
</script>

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

<div class="g-recaptcha" data-sitekey="your-site-key"></div>