Simple Contact Form with Google reCAPTCHA

A simple contact form, styled with Bootstrap and using Google's reCAPTCHA v2 to fight Spam - in this instance using the Invisible reCAPTCHA.

We'll never share your email with anyone else.

Add the highlighted code to your form, making sure to swap your_site_key for your Google reCAPTCHA Site Key.

<form action="https://api.staticforms.co/Submit?form=<<YOUR UNIQUE FORM ID>>" method="POST" id="contact-form">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" name="name" placeholder="First name" required>
    </div>
    <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" name="email" placeholder="[email protected]" required>
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
       <label for="message">Message</label>
       <textarea name="message" required class="form-control"></textarea>
    </div>
    <div class="bg-white text-center pt-4 pb-2 mb-2">
        <div class="g-recaptcha" 
            data-size="invisible" 
            data-sitekey="your_site_key" 
            data-callback='submitFormAfterReCaptcha'></div>
        <button type="submit" class="btn btn-primary rounded-pill">Submit</button>
    </div>
</form>

Add the following just before the closing head tag

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

...and the following code just before the closing body tag

<script>
    function submitFormAfterReCaptcha(token) {
    let f = document.getElementById("contact-form");
        f.submit(true);
    }
    let f = document.getElementById("contact-form");
    f.addEventListener("submit", function (event, skipRecaptcha) {
        if (skipRecaptcha) {
            return;
        }
        event.preventDefault();
        grecaptcha.execute();
        });
</script>