联系表格7 reCAPTCHA未在表格

Question

我正在使用Contact Form 7和Google 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，它将不会显示在窗体中，而是可以在浏览器的右下角看到。

Answer 4

如果未加载Recaptcha脚本，则可能是您的主题已删除了<php wp_head(); ?>函数。

Answer 5

我猜错了网站密钥。

Answer 6

我刚刚遇到了这个问题，结果我在我的子主题的 footer.php 中遗漏了这一行：

<?php wp_footer(); ?>

recaptcha 脚本确实已排入队列以包含在页面的页脚部分，因此需要此行。