前言
NinjaForms是一个比较常见且老牌的一个WORDPRESS表单插件,可用于在WORDPRESS中构建不同样式的问卷表。这篇文章主要介绍三个我在使用NinjaForms碰到的问题:1、/ninja-forms/路径下出现异常的网页的问题;2、Recaptcha人机验证加载不出来的问题;3、由于Pjax导致的表单无法正确显示的问题。
安装插件的方法
这个插件安装是比较简单的,直接在WORDPRESS的插件板块下载即可。(进入Wordpress后台-左侧栏插件模块-添加插件-搜索Ninja Forms,点击安装,安装完后点击启用)
碰到的问题
在处理下面碰到的问题的时候,配置前请务必要备份站点!如果您的站点有缓存插件,请务必清除缓存!
/ninja-forms/路径下出现异常界面
问题表现:
在启用ninja-forms之后,网站如果访问 “站点根目录/ninja-forms/“路径下的地址(如q2019.com/ninja-forms/4132这样的界面),会出现首页或者混乱的界面,如下图1所示,所有文章页面混杂在一起。

出现的原因
这就wordpress常见的一种问题,也被称作404 fallback to index[1]。/ninja-forms/这个地址没有匹配现有的任何文章,但是被ninja-forms设定为自定义端点,用来放置具有独立链接的调查问卷,而ninja-forms并没有定义用户直接访问该路径下不存在的调查问卷的时候网站返回的行为(具体来说,访问的时候,如果这个路径下有对应的有独立链接的问卷表,则不会出现混乱的界面,而路径下没有对应的独立问卷表的时候,该端点的行为没有被ninja-forms定义),且主题没有对应的模版代码,导致Wordpress会自动回退(模版层级回退)到index.php(也就是首页),如果站点有缓存插件,问题就有可能会被放大。我使用的Argon主题就与ninja-forms 组合就会出现这个问题。
解决方案
除非需要独立的调查问卷页面(这个时候,问卷便会生成在 /ninja-forms/路径下),否则一般情况下 /ninja-forms/ 路径不会,也不应该被用户/外界访问到。所以我这边提供两种解决方案:
1、(推荐):直接在Nginx(或者apache,取决于您的服务器)下对所有访问/ninja-forms/的请求全部返回403,对于Ngin来说,只需要在对应站点的主配置块下加上下述的配置语句即可
#ninja forms导致的混乱路径处理
location ~ ^/ninja-forms/ {
return 403;
}
2、(比较麻烦):修改主题源代码,在主题模块拦截, 并返回空界面。由于每个人主题都不一样且主题可能会更新导致修改被覆盖,所以这个方案比较麻烦。这里就简单讲下怎么做,使用管理员权限登录Wordpress后,在左侧栏外观,点击主题文件编辑器,找到functions.php,在最底下加上下面的代码,保存。(别忘了操作之前对整个站点进行备份),完成后访问原先错误的界面,可以看到现在只会显示Forbidden,如图2所示
add_action('template_redirect', function () {
$uri = isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : '';
if (preg_match('#^/ninja-forms/#', $uri)) {
status_header(403);
nocache_headers();
exit('Forbidden');
}
}, 0);

备注:配置了之后,NinjaForm的独立链接调查问卷功能则无法使用。但是如果不处理这个问题。且您的站点上没有SEO类别的Wordpress插件(部分主题有SEO的功能)给混乱的界面加上canonical标记,有概率会导致站点出现重复内容(可能会导致产生垃圾页面)。
Recaptcha 等人机验证无法正常显示的问题
问题表现
问卷中的Recaptcha人机验证组件不出来,而Hcaptcha人机验证组件加载慢,导致表单无法提交或提交要等很久。
出现的原因
部分地区Recaptcha无法访问,Hcaptcha访问在部分时段非常非常慢导致的。
解决方案
可以在Nginx下修改网站相应的Recaptcha访问路径,修改为所有地区都可以流畅访问的Recaptcha接口地址(请注意,这个修改只对Recaptcha有效,而对Hcaptcha无效)
在站点对应的Nginx配置文件下添加下面的配置并保存(也别忘了修改之前备份下配置文件)
sub_filter 'www.google.com/recaptcha/' 'www.recaptcha.net/recaptcha/';
sub_filter 'www.gstatic.com/recaptcha/' 'www.gstatic.cn/recaptcha/';
sub_filter_once off;
sub_filter_types *;
Pjax导致表单加载不出来
问题表现
通过站内的别的页面跳转到有表单的页面,表单不显示(如图3所示),而直接访问有表单的界面的时候表单能显示

出现的原因
由于部分主题使用了Pjax或者Ajax的动态加载技术,而这种加载技术会导致NinjaForm的表单无法正确加载出来。
解决方案
这里有种方案,您只需要选择符合自己需求的那一种。
方案1:部分主题支持关闭站点全部的的Ajax或关闭部分页面的Ajax跳转,可以在主题的设置中选择关闭对应界面的Ajax跳转、
方案2:可以在表单界面选择添加一个小小的自定义html代码,在其中嵌入javascript,并编写javascript代码在检测到NinjaForm表单未正确加载时候强制刷新一下或者是监听Pjax加载完成的事件,完成后脚本重新自动初始化NinjaForm的表单Js。(由于每个主题的Ajax或Pjax实现逻辑都有些许不一样,所以我无法在这里给出固定的可嵌入式代码)
方案3:在表单页面上面添加一个按钮(也是通过Wordpress的自定义html代码区块),通过点击这个按钮,刷新界面(如按钮上写:“如果表单没有正确加载,请点击此按钮“来促使用户点击这按钮刷新界面),让表单重新加载出来。
下面给一个示例的可用的按钮代码
<button id="refresh">表单没有出现?点我展开表单内容</button>
<script>
document.getElementById('refresh').addEventListener('click', function () {
window.location.reload(); // 相当于浏览器的刷新
});
</script>