改了十几版按钮还是点不动，自己测永远没问题，到底怎么回事？

90%以上的表单按钮失灵，根本不是按钮本身的代码写坏了。

真的，我见过太多人一遇到这个问题，第一时间就去改按钮的点击事件，改颜色改大小，甚至直接整个按钮删掉重写，折腾一下午，改了十几版，客户还是说点了没反应。最后查出来，跟按钮半毛钱关系都没有。

最多的就是第三方代码冲突。你页面上同时加了百度统计的老版代码和新版代码，或者加了百度商桥、转化追踪、热力图这些东西，只要有两个冲突，第一个被搞死的就是表单提交按钮。所有的转化追踪代码，本质上都是先截住你的按钮点击，把数据传给百度，再让按钮执行提交动作。只要中间有一个代码加载失败，或者两个代码同时抢着截同一个按钮，那按钮就直接废了，点了什么反应都没有。

这个最坑的地方是它完全随机。你自己用手机点没问题，用电脑点也没问题，但是有30%甚至更多的客户点了就是没反应。因为不同的手机浏览器、不同的网络环境，代码加载的顺序不一样。有的时候百度统计先加载成功，截住了按钮，有的时候商桥代码先加载，两个抢来抢去，最后谁都没成功，按钮就死在那了。很多人测试的时候永远测不出来，因为自己的手机永远是好的，只有客户那边出问题，你还以为是客户在骗你。

现在绝大多数的按钮失灵，都是浏览器的广告拦截插件干的。这个99%的人都不知道。

现在不管是电脑端的360、QQ浏览器，还是手机端的微信内置浏览器、UC浏览器，默认都带广告拦截功能。而且这些拦截插件根本不是只拦截弹窗广告，它们会拦截所有它们认为是“转化按钮”的东西。你的按钮上写了“立即提交”“免费咨询”“获取报价”，这些关键词全在拦截插件的黑名单里，它就会直接把这个按钮的点击事件给屏蔽掉。你看着按钮好好的，颜色大小都正常，点了就是没反应，连个报错都没有。

更过分的是，它甚至会拦截你的表单提交请求。有的时候客户填完了所有信息，点提交，按钮转了个圈，然后什么都没发生，数据也没传到你的后台。你去看服务器日志，根本就没有收到这个请求，因为请求在浏览器端就被拦截插件直接干掉了。而且这个东西是动态更新的，今天好好的，明天浏览器自动更了个新，更新了拦截规则，你的按钮就突然全失灵了。很多人遇到这种情况，以为是百度改了规则，或者自己的账户被限流了，到处找原因，折腾好几天，其实就是浏览器更了个新。

然后是HTTPS和HTTP的混合内容问题。这个现在也特别多，尤其是用基木鱼的客户。基木鱼强制把所有页面转成HTTPS了，但是很多人自己写的表单提交接口还是HTTP的，或者页面里引用了一个HTTP的图片、JS文件。现在所有的主流浏览器，只要发现HTTPS页面里有HTTP的请求，就会直接拦截这个请求，并且在控制台里报一个红色的错误。这个时候，表单提交的请求就会被直接拦下来，客户点了提交，数据根本发不出去。

这个问题的特点是，在旧版本的浏览器里是好的，在新版本的Chrome、Edge、微信浏览器里就全坏了。而且很多人自己测试的时候，因为浏览器之前缓存了旧的内容，所以没问题，但是新客户打开就不行。我上个月遇到一个客户，他的落地页用了两年都好好的，突然一天转化率掉了70%，最后查出来就是他引用了一个第三方的HTTP图片，被浏览器拦截了，导致整个页面的JS都不执行了。

基木鱼自带的表单其实失灵才是最多的。很多人觉得用基木鱼的官方组件肯定不会有问题，大错特错。基木鱼的表单组件，如果你同时加了两个，一个在顶部一个在底部，那很有可能其中一个就会失灵。还有如果你给基木鱼的表单加了自定义的CSS样式，改了按钮的颜色、大小、圆角，哪怕只改了一个像素，基木鱼的JS代码就有可能识别不到这个按钮，导致点击没反应。还有基木鱼经常会后台偷偷更新组件，有的时候更新完之后，之前好好的表单就突然坏了，这个你根本控制不了，也没有任何通知。

很多人有个特别大的误区，遇到按钮转化率低，就觉得是按钮不够显眼，然后把按钮改得更大更红，甚至加个闪烁效果，结果越改越糟。因为越显眼、越像广告的按钮，越容易被广告拦截插件识别，拦截概率越高。还有的人会在一个页面加五六个提交按钮，恨不得每屏都有一个，结果就是代码冲突更严重，失灵的概率直接翻倍。

以后再遇到这个问题，不要先改按钮，先按这个顺序排查，基本上10分钟就能找到原因。

首先按F12打开浏览器的控制台，点Console，然后点一下按钮，看有没有红色的报错。如果有报错，看报错信息是哪个JS文件出的问题，一般都是百度统计、商桥这些第三方代码的问题。然后把这些代码一个一个删掉测试，删掉哪个之后按钮好了，就是哪个代码的问题。

测试的时候绝对不要只用自己的手机测，要用不同的手机、不同的浏览器测，一定要用微信扫二维码测，因为90%的客户都是用微信打开落地页的。还有一定要用无痕模式测，普通模式下有缓存，很多问题根本测不出来。

如果你用的是基木鱼的表单，听我一句劝，不要改任何自定义样式，就用基木鱼默认的表单组件和默认的按钮样式。基木鱼的JS代码是和默认样式严格绑定的，你只要改了一点点，就有可能出问题。还有一个页面最多加一个表单，不要加多个，加多个必出问题。

所有的接口、图片、JS文件，全部改成HTTPS的，不要有任何HTTP的内容。这个是硬性要求，现在所有的主流浏览器都已经拦截HTTP的混合内容了，你不改的话，迟早会出问题，只是时间早晚而已。

不要在一个页面上加超过3个第三方代码。很多人恨不得把所有能加的统计代码都加上，百度统计、谷歌分析、51la、热力图、商桥、转化追踪，加了七八个，这些代码只要有一个出问题，整个页面的功能就废了。一般来说，一个页面最多加百度统计和商桥两个就够了，多了只会给你添麻烦，没有任何好处。

上个月有个客户找我，说他的落地页表单转化率突然掉了80%，找了好几个技术改了一个星期，按钮改了十几版，服务器也换了，都没用。最后我过去看，发现他前一天刚加了一个百度热力图的代码，和百度统计的新版代码冲突了。把热力图代码删掉之后，当天转化率就恢复了。他说他加热力图就是想看看客户点哪里，结果把自己的表单给搞废了，那一个星期白扔了十几万的广告费。

你们有没有遇到过这种情况，自己测的时候按钮永远是好的，但是客户就是说点了没反应，找了半天原因都找不到，最后只能不了了之，白白浪费了很多流量？

还有一个很多人不知道的点，百度的转化追踪代码本身就会导致按钮失灵。因为百度的点击转化追踪，是在你点击按钮之后，先把数据传给百度的服务器，然后再执行提交动作。如果百度的服务器响应慢，或者客户的网络不好，那这个过程就会卡住，客户点了按钮之后，要等好几秒才会有反应，很多客户以为没点上，就会反复点，最后要么提交了好几次，要么直接走了。更严重的是，如果百度的服务器响应超时，那提交动作就直接不会执行，客户点了就什么反应都没有。

所以如果你用百度的转化追踪，最好不要用点击按钮的追踪方式，改用表单提交成功之后的页面追踪。也就是客户提交成功之后，跳转到一个专门的“提交成功”页面，然后在这个页面上加转化追踪代码。这样就不会截住按钮的点击事件，也就不会导致按钮失灵了。

还有一种情况，很多人会误以为是按钮失灵，其实是你的服务器响应太慢。客户点了提交之后，服务器要等五六秒才会返回结果，这个时候客户以为没点上，就会直接关掉页面。这个时候你要加一个明确的加载提示，比如“正在提交，请不要关闭页面”，不要只加一个转圈的图标，很多客户根本不知道那个转圈是什么意思。

真的，这个问题看起来很小，但是每年不知道有多少人因为这个白白扔了几十万的广告费。很多人账户优化得再好，关键词选得再准，出价再合理，最后客户点了按钮没反应，所有的努力全白费了。