前言

Quform是一款WordPress的收费表单制作插件，费用为29美元/站点【 购买地址 】，可以用来设置很复杂的表单，当然代价是代码一大堆。其实现在看下来，Contact Form 7 这款免费的表单制作插件也应该足够满足我的需求了。

故障重现

今天登录WordPress发现Quform可以更新了，但是无法在线自动升级，因此只好去Quform官网下载。然后上传到服务器，并执行了

chown -r www:www ./

指令，把插件的所有文件归属到www。

刷新表单页面之后，发现表单彻底紊乱，原先的css似乎已经不起作用。表单的顶部出现一个小的按钮，对应的代码为：

 <button class="quform-default-submit" name="quform_submit" type="submit" value="submit" aria-hidden="true" tabindex="-1"></button>

表单的底部出现一行文字“This field should be left blank”和一个空的输入框。对应的代码为：

<div class="quform-element-tree">
 <label for="quform_4_0_1f3567">
  This field should be left blank
 </label>
 <input type="text" id="quform_4_0_1f3567" name="quform_4_0" lass="quform-field quform-field-tree quform-field-4_0" tabindex="-1" autocomplete="off"/>
</div>

通过比对其他使用Quform插件的站点，发现这2组代码是正常出现，和插件升级没有关系。因此怀疑升级后造成CSS的丢失。查看网页代码得知，有一个Quform自动生成的css被引用

https://域名/wp-content/plugins/quform/cache/quform.css

点击后网页报404错误。

1. 查看下载的新插件文件中是否含有这个css文件。结果为没有。
2. 使用连接工具，连接上服务器，查看服务器上文件是否存在。结果文件存在。
3. 强制刷新浏览器访问https://域名/wp-content/plugins/quform/cache/quform.css。结果依然为404。
4. 使用连接工具在https://域名/wp-content/plugins/quform/cache/目录下上传一个test.txt文件，然后访问。可以正常访问。

于是问题从 css 文件丢失，变为 css 文件不能访问

考虑到我的网站是使用CloudFlare做云解析的，而CloudFlare会对网页文件做一定的缓存，以便访问者能更快的从CloudFlare获得内容，而不是从网站服务器获得内容。于是解决故障的方法跃然而出。

解决方法

登录CloudFlare，对于网站的缓存做自定义清理，清除掉https://域名/wp-content/plugins/quform/cache/目录下的所有缓存。过一小会强制刷新访问https://域名/wp-content/plugins/quform/cache/quform.css 该css被正常加载。强制刷新访问表单页面，表单显示正常