CODEWITHSUNDEEP
phpwordpressformsrecaptcha
tonjaggart
tonjaggart

Reputation: 89

Contact Form 7 reCAPTCHA Not Displaying on Form

I am using Contact Form 7 and the Google reCAPTCHA integration. I have added my keys and added the shortcode to the form. I can't seem to get the reCAPTCHA box to appear on the form. Below is the contact form code:

<ul>
<li><div class="apo-moved-label"> [text Name id:cf_name]<label for="cf_name" class="white">Name</label><span class="apo-moved-label-border"></span> </div></li>
<li><div class="apo-moved-label"> [email Email id:cf_email]<label for="cf_email" class="white">Email Address</label><span class="apo-moved-label-border"></span></div></li>
<li><div class="apo-moved-label"> [textarea Message id:cf_message]<label for="cf_message" class="white">Message</label><span class="apo-moved-label-border"></span></div></li>
[recaptcha]
<li><button class="apo-btn apo-btn-small apo-btn-white">[submit "Send Message"]</button><div class="gap"></div></li>
</ul>

Here is what I see when I view source on the form:

<div class="wpcf7-form-control-wrap"><div data-sitekey="6LcY_i8UAAAAAN0EVfgHOAeFOMsE4akLpkzAtn-J" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha"></div>
<noscript>
    <div style="width: 302px; height: 422px;">
        <div style="width: 302px; height: 422px; position: relative;">
            <div style="width: 302px; height: 422px; position: absolute;">
                <iframe src="https://www.google.com/recaptcha/api/fallback?k=6LcY_i8UAAAAAN0EVfgHOAeFOMsE4akLpkzAtn-J" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;">
                </iframe>
            </div>
            <div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
                <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;">
                </textarea>
            </div>
        </div>
    </div>
</noscript>

When I check my CSS I don't see anything blocking it from displaying.

Upvotes: 5

Views: 42362

Answers (6)

cube45
cube45

Reputation: 3999

I just had the issue, and it turns out I was missing this line in my footer.php in my child theme:

<?php wp_footer(); ?>

The recaptcha script is indeed enqueued for inclusion in the footer part of the page, so this line is needed.

Upvotes: 1

Chris Paul
Chris Paul

Reputation: 190

If the recaptcha script is not loading, perhaps your theme had the <php wp_head(); ?> function removed.

Upvotes: 1

gradosevic
gradosevic

Reputation: 5056

If you use invisible Recaptcha 3, it will not show in the form, but it can be seen in the bottom/right corner of the browser instead.

enter image description here

Upvotes: 5

David DIVERRES
David DIVERRES

Reputation: 1926

You need to include the recaptcha library before </head>:

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

Upvotes: 12

Larry Silverman
Larry Silverman

Reputation: 1053

The Contact Form 7 plugin should be including the script element to include the api.js file already. I just ran into the same problem today, with CF7 5.0.2. For some reason, CF7 is no longer including the api.js file. I can't figure why. I manually added it to the HEAD section, and the problem is now resolved.

Upvotes: 2

Sayan
Sayan

Reputation: 56

I guess the site key is not entered correctly.

Upvotes: 0

Related Questions