广告必须置于</form>之后并用<div>或<section>独立包裹，禁用易混淆属性；用position: sticky替代fixed防遮挡按钮；广告链接须含target="_blank"和rel="noopener"；脚本需异步加载且容器延迟显示，确保不干扰表单提交与用户体验。

广告位置必须放在 <form> 结束标签之后

直接把广告 HTML 塞进 <form> 里，会导致表单提交时意外包含广告元素（比如误把广告里的 <input> 提交），还可能被浏览器自动填充功能干扰。正确做法是确保广告完全独立于表单结构：

• 检查问卷 HTML，找到 </form> 标签的闭合位置
• 在它后面另起一段，用 <div> 或 <section> 包裹广告内容
• 避免给广告容器加 id="form"、name="submit" 这类易与表单混淆的属性

用 position: sticky 让广告始终可见但不遮挡提交按钮

用户填完问卷最后一题，手指正要点提交按钮，结果弹出浮层广告挡住按钮——这是最常被投诉的问题。与其用 position: fixed 全局悬浮，不如用更克制的方案：

• 给广告容器设 position: sticky 和 top: 1rem，让它在滚动到视口底部时才“粘住”
• 必须设置父容器有高度且能滚动（比如 <main> 加了 max-height 和 overflow-y: auto）
• 在移动端测试：iOS Safari 对 sticky 支持较弱，可加 -webkit-sticky 回退

广告链接必须加 rel="noopener" 和 target="_blank"

问卷页面通常有用户未保存的填写内容，如果广告链接没做隔离，新页面会共享同一进程，导致原页面表单状态丢失或崩溃：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 所有广告中的 <a href="..."> 必须同时带 target="_blank" 和 rel="noopener"
• 漏掉 rel="noopener" 会让新页面通过 window.opener 控制原页面，存在安全风险
• 不要用 javascript:void(0) 模拟链接，搜索引擎和屏幕阅读器无法识别

广告加载不能阻塞表单提交逻辑

用 <script> 同步加载第三方广告 SDK，很容易让“提交”按钮点击后卡顿 1–2 秒——用户会反复点击，造成重复提交：

立即学习“前端免费学习笔记（深入）”；

• 广告脚本一律用 <script async src="..."> 或动态插入（document.createElement('script')）
• 广告容器初始设 visibility: hidden，等 DOMContentLoaded 后再显示，避免 FOUC 干扰问卷焦点
• 如果广告依赖用户行为（如填完邮箱才展示），监听 form 的 submit 事件比监听每个 input 更可靠

广告真正难的不是放上去，是让它不破坏用户完成问卷那一刻的专注力。多一个 DOM 节点、多一次网络请求、多一行没配对的 CSS，都可能让转化率掉几个百分点。