添加第二个 reCAPTCHA 时遇到问题。有带 reCAPTCHA 的联系表 7

Question

我有一个 Wordpress 网站，它使用 Contact Form 7 插件和附带的 reCAPTCHA 功能，效果很好。我只是把那部分放在适当的位置，一切都是自动的。但是现在我正在尝试将 reCAPTCHA 添加到另一个未使用 Contact Form 7 设置的表单（在 form1.php 页面上）。这是在一个 PHP 页面上，该页面基本上包括 Wordpress 页眉和页脚，但它自己中间的东西。一个关键点是页脚包含联系表格 7 中的一种表格，因此它位于网站的每个页面上。

我关注了Google's instructions，忘记了我有页脚表单。然后在Firebug中看到了错误Error: ReCAPTCHA placeholder element must be empty

这把我带到了this StackOverflow topic here。用户随和的唯一答案是，当他们意识到他们已经导入了两次库时，他们遇到了同样的错误。

好吧，这也是我意识到的。因此，我可以在我的代码中删除包含 https://www.google.com/recaptcha/api.js 的脚本，因为它已经包含在 Contact Form 7 中（我在源代码中看到了它）。我注意到谷歌有渲染多个小部件的说明，我检查了它。但问题是脚本包含行指定了 onload 回调函数。大问题。我无法更改它，因为 Contact Form 7 将其放入，并且我无法创建同名的回调函数，因为它已被使用。当然，我不想弄乱 Contact Form 7 所做的任何事情。但结果，我不知道如何让它在 form1.php 中调用我的回调函数，这是我的 HTML 元素被指定用于呈现验证码的地方。

您认为有什么办法可以解决这个问题吗？非常感谢任何帮助！

Answer 1

这是分辨率：

1. Contact Form 7 支持多个 reCaptcha，只需要正确的 HTML 标记即可使用。

2. 正如您在 wp-content\plugins\contact-form-7\modules\recaptcha.php 和 HTML 中看到的，诀窍是：

   • 您的非 CF7 验证码必须位于表单元素内，如下所示：

var verifyCallbackY = function(response) {
    /** your stuff... */
    alert(response);
};

<form id="recaptcha-cf7-migr"> <!-- the form element is important! This is what CF7 fetch one by one to find recaptchas... -->
    <div
        id='yRecaptcha'
        class="wpcf7-form-control g-recaptcha wpcf7-recaptcha captcha-hfs"
        data-sitekey="*********************************qkuila"
        data-callback="verifyCallbackY"></div>
</form>