如何在单击 CF7 提交按钮时在弹出窗口中显示 grecaptcha？

Question

我正在联系表单 7 中制作一个新表单。我需要在单击提交按钮时在弹出窗口中显示 grecaptcha。验证码成功后需要提交Contact Form 7.

Answer 1

您可以选择使用 JavaScript 创建自己的功能。 skip_mail -> 使用 wpcf7beforesubmit（在 cf7 4.9 中添加）通过 DOM Event 获取 CF7 数据 -> 然后使用验证码创建弹出窗口 -> 然后检查它。如果验证码正常 -> 自行发送带有获取数据的电子邮件。

Answer 2

我最近做了一些研究并找到了解决方案。

这是代码。只需将它们复制并粘贴到您的 WordPress 代码片段插件中即可。

Java 脚本：

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('#wpcf7-f1466-p1429-o2'); // Adjust based on your form ID
    if (!form) return;

    function showRecaptchaPopup() {
        const recaptchaPopup = document.createElement('div');
        recaptchaPopup.id = 'recaptchaPopup';
        recaptchaPopup.style.position = 'fixed';
        recaptchaPopup.style.top = '0';
        recaptchaPopup.style.left = '0';
        recaptchaPopup.style.width = '100%';
        recaptchaPopup.style.height = '100%';
        recaptchaPopup.style.backgroundColor = 'rgba(0,0,0,0.5)';
        recaptchaPopup.style.display = 'flex';
        recaptchaPopup.style.justifyContent = 'center';
        recaptchaPopup.style.alignItems = 'center';
        recaptchaPopup.style.zIndex = '9999';
        recaptchaPopup.innerHTML = `
            <div style="background: #fff; padding: 20px; border-radius: 5px; z-index: 10000;">
                <div id="recaptchaContainer"></div>
                <button id="closeRecaptchaPopup">Close</button>
            </div>
        `;
        document.body.appendChild(recaptchaPopup);

        grecaptcha.render('recaptchaContainer', {
            'sitekey': 'YOUR_RECAPTCHA_SITE_KEY',
            'callback': onRecaptchaSuccess,
            'expired-callback': onRecaptchaExpired
        });

        document.getElementById('closeRecaptchaPopup').onclick = function() {
            document.body.removeChild(recaptchaPopup);
        };
    }

    function onRecaptchaSuccess(token) {
        document.querySelector('input[name="g-recaptcha-response"]').value = token;
        document.getElementById('recaptchaPopup').remove();
        form.submit();
    }

    function onRecaptchaExpired() {
        alert('reCAPTCHA expired. Please try again.');
        document.getElementById('recaptchaPopup').remove();
    }

    form.addEventListener('submit', function(event) {
        event.preventDefault();
        showRecaptchaPopup();
    });
});

将 JavaScript 代码中的“YOUR_RECAPTCHA_SITE_KEY”替换为您的实际 reCAPTCHA 站点密钥。

CSS 片段：

#recaptchaPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure this is high enough to be above all other elements */
}

#recaptchaPopup > div {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    z-index: 10000; /* Ensure this is high enough to be above all other elements */
}

确保您的 reCAPTCHA 密钥在联系表单 7 设置中正确配置（在联系人 > 集成 > reCAPTCHA 下）。

我使用了 Google reCAPTCHA V2。带联系表 7