WordPress Elementor自定义HTML不渲染 form/script标签丢失

Elementor没有强制要求用户必须使用WordPress生态的表单组件，原生HTML表单完全可以正常渲染，你遇到的标签被剥离、渲染失效是多层内容安全过滤机制导致的，不是编辑器本身不支持原生HTML。

标签被过滤的具体原因 #

• WordPress核心自带KSES内容安全过滤机制：默认对提交到站点的内容做标签白名单校验，<form>、<input>、<script>这类存在跨站脚本攻击风险的标签，会被直接从非信任来源的内容中剥离。哪怕是通过Elementor的HTML组件插入代码，只要操作账号不是超级管理员，或者触发了KSES的额外校验规则，就会出现标签丢失的问题。
• Elementor免费版普通HTML组件自带输出过滤：为了降低普通用户误插入恶意代码的风险，普通HTML组件默认会对<script>标签做转义处理，不会将其作为可执行DOM节点输出，只会把标签内部的JS代码当普通文本渲染，这也是JS代码直接显示在页面上、交互完全失效的核心原因。
• 第三方安全插件、主题自带的内容净化规则也可能拦截标签：大部分WordPress安全插件都会全局扫描页面内容里的高风险标签，不管你通过什么编辑器入口插入代码，只要命中拦截规则就会被直接剔除。

对应的解决方法 #

• 插入自定义代码时必须使用站点超级管理员账号操作，编辑、作者等低权限账号默认没有无过滤提交高风险标签的权限，用低权限账号操作必然会触发内容过滤。
• 不要把所有代码都塞进普通HTML组件：表单的结构代码（<form>、<input>、<label>这类结构标签）可以放在HTML组件中，自定义JS逻辑、外部脚本依赖不要放在HTML组件里，要粘贴到Elementor页面设置面板的「自定义代码/自定义JS」专属注入位置，这个位置的代码会跳过普通内容过滤逻辑，正常在前端加载执行。
• 如果调整代码位置后依然存在标签丢失的问题，可以临时关闭已安装的安全类插件、切换到WordPress默认官方主题做排查，确认是不是第三方功能的拦截规则导致的问题。
• 不需要为了实现表单功能强制改用WordPress生态的第三方表单组件，这类组件只是降低了无代码基础用户的配置门槛，只要按照过滤规则拆分插入原生HTML代码，完全可以实现和自定义原生表单一致的效果。

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