表单上未显示Contact Form 7 reCAPTCHA

Question

我使用的是Contact Form 7和谷歌reCAPTCHA集成。我已经添加了我的键，并在窗体中添加了快捷代码。我似乎无法使reCAPTCHA框出现在表单上。以下是联系人表单代码：

<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>

下面是我在表单上查看源代码时看到的内容：

<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>

当我检查我的CSS时，我没有看到任何阻止它显示的东西。

Answer 1

您需要在</head>之前包含recaptcha library

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

Answer 2

Contact Form 7插件应该包含脚本元素，以便已经包含api.js文件。我今天也遇到了同样的问题，CF7 5.0.2。由于某种原因，CF7不再包含api.js文件。我不明白为什么。我手动将其添加到HEAD部分，现在问题已经解决。

Answer 3

如果您使用不可见的Recaptcha 3，它将不会显示在表单中，但可以在浏览器的右下角看到它。

​

​