WordPress Gravity Forms：无刷新提交后如何重置表单字段值

我刚好处理过类似的需求，Gravity Forms其实提供了很方便的方式来实现Ajax提交后无刷新重置表单，这里分享两种靠谱的方法：

方法1：使用Gravity Forms原生JavaScript事件（推荐） #

Gravity Forms在Ajax提交成功并加载完确认信息后，会触发gform_confirmation_loaded事件，我们可以监听这个事件来执行表单重置操作。这种方法纯前端实现，简单直接。

把下面的代码添加到你的主题自定义JS文件、通过Gravity Forms的「表单设置 > 自定义HTML」（在表单底部添加脚本），或者用插件添加自定义JS：

document.addEventListener('gform_confirmation_loaded', function(event) {
    // 获取当前提交的表单ID
    const formId = event.detail.formId;
    const targetForm = document.getElementById(`gform_${formId}`);
    
    // 先调用原生表单重置方法
    targetForm.reset();
    
    // 额外处理复选框、单选框（确保彻底清空，避免默认值影响）
    targetForm.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(field => {
        field.checked = false;
    });
    
    // 如果有第三方自定义字段（比如日期选择器、下拉多选），可以在这里补充对应的重置逻辑
    // 比如针对日期选择器：targetForm.querySelectorAll('.gfield_date input').forEach(input => input.value = '');
}, false);

代码说明： #

• gform_confirmation_loaded事件会携带当前表单的ID，确保我们只重置刚刚提交的表单，不会影响页面上的其他GF表单。
• 原生的form.reset()会把字段恢复到默认值，但如果你的复选框/单选框默认是选中状态，就需要额外手动取消选中。
• 如果你用了第三方字段插件，可以根据字段的类名或ID添加对应的重置逻辑。

方法2：通过PHP钩子输出重置脚本（适合后端逻辑判断） #

如果需要根据提交的内容（比如只有当提交的条目满足某个条件时才重置表单），可以用Gravity Forms的PHP钩子gform_after_submission来输出重置脚本：

把下面的代码添加到你的主题functions.php文件，或者自定义插件中：

add_action('gform_after_submission', 'gf_conditional_reset_form_after_ajax', 10, 2);
function gf_conditional_reset_form_after_ajax($entry, $form) {
    // 只针对Ajax提交的表单执行
    if (wp_doing_ajax()) {
        // 这里可以添加你的条件判断，比如判断某个字段的值
        // if ($entry['1'] === '需要重置的条件') {
            ?>
            <script type="text/javascript">
                // 确保DOM加载完成后执行
                document.addEventListener('DOMContentLoaded', function() {
                    const targetForm = document.getElementById('gform_<?php echo esc_attr($form['id']); ?>');
                    if (targetForm) {
                        targetForm.reset();
                        // 清空复选框和单选框
                        targetForm.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(field => {
                            field.checked = false;
                        });
                    }
                });
            </script>
            <?php
        // }
    }
}

代码说明： #

• wp_doing_ajax()确保只有Ajax提交时才输出脚本，避免影响普通表单提交。
• 你可以使用注释掉的条件判断部分，根据提交的条目数据（$entry数组）来决定是否重置表单。

注意事项 #

• 确保你的表单已经启用了Ajax提交：在表单编辑页面的「设置 > 表单设置」中，找到「Ajax提交」选项并勾选。
• 如果使用了缓存插件，记得清除缓存，确保新增的JS代码能正确加载到前端。
• 对于文件上传字段，form.reset()会清空输入框，但不会清除预览区域，你需要根据GF的文件上传组件逻辑添加额外的清除代码（比如移除预览元素）。

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