Magento 2 - Add google captcha on contact form

Question

I want to add google captcha on contact us page.

copied

vendor/magento/module-contact/view/frontend/templates/form.phtml

to

app/design/frontend/Vendor/MyTheme/Magento_Contact/templates/form.phtml

is there any simple widget to call google captcha on form.phtml?

Answer 1

Suppose You have Form Similar to the code below

 <form id="myformId" class="col s12" action=""
       method="post"
      novalidate>
        <input placeholder="Name" id="mpfaqs-form-fieldset-input" type="text" name="username">
        <input placeholder="Email" id="mpfaqs-form-fieldset-input" type="text" name="useremail">
            <input placeholder="What is your question" id="mpfaqs-form-fieldset-input-question"
                   type="text" name="userquestion">
    <div class="g-recaptcha" data-sitekey="YOURSITEKEYxxxxx"></div>
        <input class="form-submit" type="Submit" name="" value="Submit a question">
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src='https://www.google.com/recaptcha/api.js?hl=es'></script>

To Validate above Form through javascript we will use the below code you can place it in the same file or create an external file for it and place the code

    <script>
    requirejs([
        'jquery'
    ], function($) {
        $(document).on('submit', '#myformId', function(){
            var isSubmit = jQuery(this).valid() && grecaptcha.getResponse() != '';
            if (!isSubmit) {
                alert("Please fill captcha");
            }
            return isSubmit;
        });
    })
</script>

Answer 2

Magento has a default option for google captcha in contact us page.

Stores -> Configuration -> Customers -> Customer Configuration -> CAPTCHA -> Choose Contact Us under Forms