如何在WordPress的WPForms表单特定字段填写后触发弹窗提示？

完全可以实现这个需求，通过自定义JavaScript配合WPForms的字段设置就能搞定，具体步骤如下：

1. 给目标邮箱字段添加自定义CSS类 #

打开WPForms的表单编辑界面，找到需要限制的邮箱字段，进入「高级」选项卡，在「CSS类」输入框中填写restrict-email-domains，保存表单设置。

2. 添加自定义代码实现限制逻辑 #

你可以通过主题的functions.php文件添加代码，有两种方式可选：

方式一：单独创建JS文件（适合有一定开发基础的用户） #

1. 在当前主题目录下新建js文件夹，创建名为wpforms-restrict-email.js的文件，写入以下代码：

jQuery(document).ready(function($) {
    // 监听表单提交事件
    $('.wpforms-form').on('submit', function(e) {
        // 获取邮箱字段的值
        var email = $('.restrict-email-domains input').val();
        // 定义需要禁止的公共邮箱域名
        var blockedDomains = ['gmail.com', 'hotmail.com', 'yahoo.com', 'outlook.com'];
        // 提取邮箱中的域名部分
        var domain = email.split('@')[1];
        
        // 检查域名是否在禁止列表内
        if (blockedDomains.includes(domain)) {
            alert('请使用企业邮箱提交表单。');
            // 阻止表单提交
            e.preventDefault();
            return false;
        }
    });
});

2. 在主题的functions.php中添加代码，加载这个JS文件：

function wpforms_restrict_email_domains_script() {
    // 替换为你的表单所在页面的slug
    if ( is_page( '表单页面slug' ) ) {
        wp_enqueue_script( 'wpforms-restrict-email', get_stylesheet_directory_uri() . '/js/wpforms-restrict-email.js', array( 'jquery' ), '1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'wpforms_restrict_email_domains_script' );

方式二：直接添加内联JS（适合新手操作） #

直接在主题的functions.php中添加以下代码，无需单独创建JS文件：

function wpforms_restrict_email_inline_script() {
    // 替换为你的表单所在页面的slug
    if ( is_page( '表单页面slug' ) ) {
        wp_enqueue_script( 'jquery' );
        wp_add_inline_script( 'jquery', '
            jQuery(document).ready(function($) {
                $(".wpforms-form").on("submit", function(e) {
                    var email = $(".restrict-email-domains input").val();
                    var blockedDomains = ["gmail.com", "hotmail.com", "yahoo.com", "outlook.com"];
                    var domain = email.split("@")[1];
                    if (blockedDomains.includes(domain)) {
                        alert("请使用企业邮箱提交表单。");
                        e.preventDefault();
                        return false;
                    }
                });
            });
        ' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpforms_restrict_email_inline_script' );

注意事项 #

• 记得把代码中的表单页面slug替换为你的表单实际所在页面的slug；
• 可以根据需求修改blockedDomains数组里的域名，添加或移除需要禁止的公共邮箱；
• 如果你的网站有缓存插件，修改代码后需要清除缓存才能生效；
• 如果存在多个表单，确保只有目标表单的邮箱字段添加了restrict-email-domains类，避免影响其他表单。

内容的提问来源于stack exchange，提问作者Rodrigo Mota