如何在WordPress及Gravity Forms中实现带倒计时的表单自动翻页？

嘿，刚好我之前帮别人弄过类似的需求，这事儿不难，不管用原生JS还是jQuery都能搞定，甚至不用额外插件也能实现。我给你拆解成具体步骤，照着来就行：

核心思路先理清楚 #

• 给提示页加30秒倒计时，时间到了自动触发「下一步」按钮，跳转到表单页
• 给表单页加5分钟（300秒）倒计时，时间到自动提交表单或者跳转到下一页（看你需求）
• 关键是先给Gravity Forms的对应页面加个专属标识，方便JS精准定位

第一步：给目标页面加专属类 #

先打开你的Gravity Form编辑界面：

• 找到那个提示页（一般是用Page Break分隔出来的前置提示页），在「Appearance」选项卡的「CSS Class Name」里填个类名，比如 countdown-prompt-page
• 再找到需要5分钟倒计时的表单页，同样加个类名 countdown-form-page

方法一：原生JS实现（无需jQuery，轻量好用） #

WordPress里加自定义脚本的方式有两种：要么改主题的functions.php，要么用「Code Snippets」插件（推荐后者，不用怕改坏主题文件）。下面是完整的代码：

function add_gravity_forms_countdown_script() {
    // 只在你的表单页面加载脚本，替换成实际的页面slug或ID
    if ( is_page( 'your-form-page-slug' ) ) {
        ?>
        <script>
            // 通用倒计时函数，参数：倒计时秒数、目标页面选择器、要触发的按钮选择器
            function initCountdown(totalSeconds, targetContainer, triggerBtn) {
                let remainingSeconds = totalSeconds;
                // 创建倒计时显示元素
                const countdownEl = document.createElement('div');
                countdownEl.className = 'gf-countdown-alert';
                countdownEl.textContent = `剩余时间：${remainingSeconds}秒`;
                
                // 把倒计时元素插到目标页面最顶部
                document.querySelector(targetContainer).prepend(countdownEl);

                const timer = setInterval(() => {
                    remainingSeconds--;
                    countdownEl.textContent = `剩余时间：${remainingSeconds}秒`;
                    
                    // 时间到了就触发按钮点击，清除定时器
                    if (remainingSeconds <= 0) {
                        clearInterval(timer);
                        const btn = document.querySelector(triggerBtn);
                        btn && btn.click(); // 防止按钮不存在报错
                    }
                }, 1000);
            }

            // 页面加载完成后初始化两个倒计时
            document.addEventListener('DOMContentLoaded', () => {
                // 提示页：30秒后点下一步按钮
                if (document.querySelector('.countdown-prompt-page')) {
                    initCountdown(30, '.countdown-prompt-page', '.gform_next_button');
                }

                // 表单页：5分钟（300秒）后点提交按钮，如果是多页表单就换成.gform_next_button
                if (document.querySelector('.countdown-form-page')) {
                    initCountdown(300, '.countdown-form-page', '.gform_submit_button');
                }
            });
        </script>
        <style>
            /* 给倒计时加个显眼的样式，你可以自己改 */
            .gf-countdown-alert {
                padding: 12px;
                background-color: #fff3cd;
                border: 1px solid #ffeeba;
                border-radius: 4px;
                margin-bottom: 20px;
                font-weight: 600;
                color: #856404;
            }
        </style>
        <?php
    }
}
add_action('wp_footer', 'add_gravity_forms_countdown_script');

这里要注意的点： #

• 把代码里的your-form-page-slug换成你实际的表单页面slug，或者用is_page(123)（123是页面ID）
• 如果是多页表单，表单页的触发按钮要换成.gform_next_button，而不是提交按钮
• 测试的时候可以把30秒改成5秒，快速验证功能正常

方法二：jQuery实现（含插件可选） #

如果你习惯用jQuery，或者想用专门的倒计时插件（比如jquery.countdown），可以这么弄：

首先确保WordPress加载了jQuery（默认主题一般都自带），然后用下面的代码：

function add_gravity_forms_jquery_countdown() {
    if ( is_page( 'your-form-page-slug' ) ) {
        // 如果你用jquery.countdown插件，先引入它的脚本（把路径换成你实际的文件路径）
        wp_enqueue_script('jquery-countdown', get_stylesheet_directory_uri() . '/js/jquery.countdown.min.js', array('jquery'), '2.2.0', true);
        ?>
        <script>
            jQuery(document).ready(function($) {
                // 提示页30秒倒计时
                if ($('.countdown-prompt-page').length) {
                    const $promptPage = $('.countdown-prompt-page');
                    $promptPage.prepend('<div class="gf-countdown-alert"></div>');
                    
                    $('.gf-countdown-alert').countdown({
                        until: +30, // 倒计时30秒
                        format: 'S', // 只显示秒数
                        onExpiry: function() {
                            $('.gform_next_button').click(); // 时间到点下一步
                        },
                        onTick: function(periods) {
                            $(this).text(`剩余时间：${periods[5]}秒`);
                        }
                    });
                }

                // 表单页5分钟倒计时
                if ($('.countdown-form-page').length) {
                    const $formPage = $('.countdown-form-page');
                    $formPage.prepend('<div class="gf-countdown-alert"></div>');
                    
                    $('.gf-countdown-alert').countdown({
                        until: +300, // 5分钟=300秒
                        format: 'MS', // 显示分+秒
                        onExpiry: function() {
                            $('.gform_submit_button').click(); // 时间到提交表单
                        },
                        onTick: function(periods) {
                            const mins = periods[4];
                            const secs = periods[5];
                            $(this).text(`剩余时间：${mins}分${secs}秒`);
                        }
                    });
                }
            });
        </script>
        <style>
            .gf-countdown-alert {
                padding: 12px;
                background-color: #fff3cd;
                border: 1px solid #ffeeba;
                border-radius: 4px;
                margin-bottom: 20px;
                font-weight: 600;
                color: #856404;
            }
        </style>
        <?php
    }
}
add_action('wp_footer', 'add_gravity_forms_jquery_countdown');

插件使用提示： #

• 如果你用jquery.countdown，可以下载压缩包后把jquery.countdown.min.js放到主题的js文件夹里
• 不想用插件的话，其实原生JS的版本已经足够稳定，没必要多加载一个插件

最后再提几个小细节 #

• 如果你担心用户刷新页面重置倒计时，可以用localStorage存储剩余时间，不过一般场景下不需要这么复杂
• 样式可以完全自定义，比如把倒计时放到页面右上角，或者改成红色警示样式，都看你需求
• 测试的时候一定要在前台实际操作一遍，确认按钮能被正常触发

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