联系表格 7 reCAPTCHA 未显示在表格上答案

【问题标题】：Contact Form 7 reCAPTCHA Not Displaying on Form联系表格 7 reCAPTCHA 未显示在表格上
【发布时间】：2018-02-24 23:37:28
【问题描述】：

我正在使用联系表 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 时，我没有看到任何阻止它显示的东西。

【问题讨论】：

您需要在占位符“MY SITE KEY IS HERE”中输入您的 SITE KEY developers.google.com/recaptcha/docs/display 供参考
站点密钥被添加到实时站点上。我刚刚为这篇文章删除了它。
在标题中添加此脚本以加载 reCAPTCHA 小部件

标签： php wordpress forms recaptcha

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

我猜是站点密钥输入不正确。

【讨论】：

【解决方案6】：

我刚刚遇到了这个问题，结果发现我在我的子主题中的 footer.php 中缺少这一行：

<?php wp_footer(); ?>

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

【讨论】：