如何将WordPress联系表单嵌入静态HTML页？可否通过短代码实现？

静态HTML页面嵌入WordPress联系表单的可行方法 #

你上传到WordPress站点的纯静态HTML文件默认不会走WordPress的内容渲染流程，直接写表单相关代码不会自动生效，可根据自己的站点配置选以下三种方案实现：

• 动态调用短代码方案（体验最好，和原生表单功能一致）
  把需要嵌入表单的静态HTML文件后缀改为.php（或者配置服务器让html文件支持解析PHP），在页面需要展示表单的位置插入以下代码，替换掉对应路径和短代码即可：

  <?php
  // 引入WordPress核心文件，路径根据你的站点实际目录调整，确保能定位到根目录下的wp-load.php
  require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
  // 解析并输出指定表单，这里的短代码替换成你自己的表单短代码
  echo do_shortcode('[contact-form-7 id="123" title="首页联系表单"]');
  ?>
  

  这种方法嵌入的表单和WordPress原生页面里的表单功能完全一致，表单验证、提交、邮件通知、反垃圾校验等功能都能正常使用，后续修改表单配置不需要改动静态页代码。
• iframe嵌入方案（无需修改文件后缀，零代码基础可用）
  先在WordPress后台新建一个空白公开页面，页面内容只填写你要用的联系表单短代码，发布后获取这个页面的访问地址。回到静态HTML文件，在需要放表单的位置插入iframe标签：

  <iframe src="刚才新建的表单页面地址" width="100%" height="580" frameborder="0" scrolling="no"></iframe>
  

  嵌入后可以根据表单实际高度调整height参数，避免出现滚动条。这种方法不需要修改服务器配置，缺点是表单样式和静态页的样式适配需要额外调整，移动端适配要单独处理iframe宽度。
• 静态代码拷贝方案（完全脱离WordPress动态渲染）
  在WordPress后台预览插入了目标表单的页面，右键查看网页源代码，把表单对应的HTML片段、关联的CSS/JS引用、表单提交地址全部拷贝到静态HTML文件的对应位置，修正静态资源的相对路径为绝对路径即可。这种方法不需要静态页支持PHP，缺点是后续修改表单配置、更新表单插件后，需要重新拷贝代码同步改动，否则可能出现提交失败、功能异常的问题。

插件表单对接静态页的短代码支持说明 #

WordPress所有主流联系表单插件都原生支持短代码调用，但短代码本身是WordPress特有的内容解析规则，不能直接在纯静态HTML文件中写短代码实现对接——短代码必须经过WordPress的PHP层解析，才能转换成实际的表单HTML代码输出到前端。
如果要通过短代码完成对接，直接用上面提到的动态调用短代码方案即可，只需要在插件的表单管理页面复制对应表单的专属短代码，传入do_shortcode()函数就能正常输出表单，不需要做额外的插件改造。

注意：如果你的静态页面是托管在和WordPress不同的域名/服务器上，无法直接加载wp-load.php文件，优先选择对应表单插件提供的独立JS嵌入代码（大部分主流表单插件都支持生成独立嵌入片段，直接粘贴到静态HTML即可使用），其次再考虑iframe方案。

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