如何在提交成功或点击按钮后重新生成Ninja Forms表单？

嘿，我之前也碰到过一模一样的问题——用CSS藏成功提示真的只是权宜之计，表单的内部状态其实还停留在提交后的状态，下次打开难免会有残留问题。下面给你几个从根本上解决的方案，都是基于Ninja Forms官方的JS API来做的，比CSS靠谱多了：

方案一：监听模态框打开事件，触发表单重置 #

这是最常用的方案，核心思路是模态框完全显示后，调用Ninja Forms的重置接口，彻底清空表单状态。

步骤： #

1. 找到你的模态框ID（比如#consult-modal）和Ninja Forms的表单ID（在表单编辑页面顶部就能看到，或者前端源码里找data-form-id属性）。
2. 根据你用的模态框插件（比如Bootstrap、自定义模态框），找到它的「显示完成」事件，然后在事件回调里执行重置。

代码示例（以Bootstrap模态框为例）： #

jQuery(document).ready(function($) {
  // 监听Bootstrap模态框完全显示的事件
  $('#consult-modal').on('shown.bs.modal', function() {
    // 获取目标表单的Ninja Forms实例
    const formModel = window.nfFrontEnd.getForm(你的表单ID);
    
    if (formModel) {
      // 触发Ninja Forms的官方重置事件，彻底重置表单
      window.nfRadio.trigger('reset', [formModel]);
      
      // 额外保险：强制隐藏可能残留的成功提示
      formModel.get('settings').set('displayMsg', false);
      $('.nf-response-msg').hide();
    }
  });
});

为什么这个方案有效？ #

nfRadio是Ninja Forms的核心事件系统，reset事件会同步重置表单的内部状态+DOM元素，不仅清空输入框，还会把表单从「提交成功」状态切回「未填写」状态，比单纯用$('form')[0].reset()要彻底得多。

方案二：动态加载模态框内容时的重置 #

如果你的模态框内容是通过AJAX动态加载的（比如点击「咨询」按钮才拉取表单HTML），那需要在内容加载完成后再执行重置：

jQuery(document).ready(function($) {
  $('.consult-btn').on('click', function() {
    // AJAX加载表单内容到模态框
    $('#consult-modal').load('/你的表单页面路径', function() {
      // 加个小延迟，确保Ninja Forms完成初始化
      setTimeout(function() {
        const formModel = window.nfFrontEnd.getForm(你的表单ID);
        if (formModel) {
          window.nfRadio.trigger('reset', [formModel]);
        }
      }, 100);
    });
    
    // 显示模态框
    $('#consult-modal').modal('show');
  });
});

方案三：提交成功后即时重置（可选） #

如果你希望用户提交表单后，即使不关闭模态框，表单也能自动重置，可以监听Ninja Forms的提交成功事件：

jQuery(document).ready(function($) {
  window.nfRadio.on('submit:response', function(response, formModel) {
    // 只针对目标表单执行重置
    if (formModel.id === 你的表单ID && response.success) {
      window.nfRadio.trigger('reset', [formModel]);
    }
  });
});

注意事项 #

• 一定要把代码里的「你的表单ID」替换成你实际的表单ID，不然代码不会生效。
• 如果不用Bootstrap模态框，要换成对应插件的显示事件：比如Foundation模态框用opened.zf.reveal，自定义模态框就找你自己写的「显示完成」回调。
• 要是代码没反应，检查一下页面里有没有jQuery冲突，或者Ninja Forms的JS是否正确加载（打开浏览器控制台，输入window.nfFrontEnd，如果能输出内容就是正常的）。

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