Mobyform文档如何嵌入表单到网站
将 Mobyform 表单嵌入到你的网站、博客或应用中。
如何嵌入表单到网站
Mobyform 支持多种方式将表单嵌入到你的网站中，让用户无需离开你的网站即可填写表单。
嵌入方式概览
| 方式 | 说明 | 适用场景 |
|---|---|---|
| iframe 嵌入 | 将表单嵌入页面中 | 最常用，适合大多数网站 |
| 弹窗嵌入 | 点击按钮后弹出表单 | 不占用页面空间，适合反馈收集 |
| 全页嵌入 | 表单占满整个页面 | 独立的表单页面 |
iframe 嵌入
获取嵌入代码
- 打开表单的 「发布」 页面
- 选择 「嵌入」 选项
- 复制 iframe 代码
嵌入代码示例
<iframe
src="https://your-domain.com/s/your-form-key"
width="100%"
height="600"
frameborder="0"
style="border: none;"
></iframe>自适应高度
为了让表单高度自适应内容，可以添加以下代码：
<iframe
src="https://your-domain.com/s/your-form-key"
width="100%"
frameborder="0"
style="border: none; min-height: 500px;"
scrolling="auto"
></iframe>在不同平台嵌入
WordPress
- 在文章或页面编辑器中添加 「自定义 HTML」 块
- 粘贴 iframe 代码
- 预览和发布
React / Next.js
function FormEmbed() {
return (
<iframe
src="https://your-domain.com/s/your-form-key"
width="100%"
height="600"
frameBorder="0"
style={{ border: 'none' }}
/>
);
}Vue
<template>
<iframe
src="https://your-domain.com/s/your-form-key"
width="100%"
height="600"
frameborder="0"
style="border: none"
/>
</template>静态 HTML 网站
直接将 iframe 代码粘贴到 HTML 文件中需要显示表单的位置。
弹窗嵌入
使用方式
弹窗嵌入适合在用户点击按钮或链接时弹出表单：
<!-- 触发按钮 -->
<button onclick="openForm()">填写反馈表单</button>
<!-- 弹窗容器 -->
<div id="form-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">
<div style="position:relative; width:90%; max-width:700px; height:80%; margin:5% auto; background:#fff; border-radius:8px; overflow:hidden;">
<button onclick="closeForm()" style="position:absolute; top:10px; right:10px; z-index:1; cursor:pointer;">✕</button>
<iframe src="https://your-domain.com/s/your-form-key" width="100%" height="100%" frameborder="0" style="border:none;"></iframe>
</div>
</div>
<script>
function openForm() {
document.getElementById('form-modal').style.display = 'block';
}
function closeForm() {
document.getElementById('form-modal').style.display = 'none';
}
</script>嵌入设置
通过 URL 参数预填字段
你可以通过 URL 参数预先填入表单字段值：
https://your-domain.com/s/your-form-key?field_name=预填值&field_email=user@example.com适用场景：
- 从邮件链接预填用户邮箱
- 从产品页面传递产品名称
- 从 CRM 传递客户信息
自定义样式
如果需要更精细的样式控制：
- 在表单的「主题」设置中调整样式
- Pro 套餐支持注入自定义 CSS
- 确保表单样式与网站整体风格一致
注意事项
- HTTPS 要求 — 嵌入表单的页面建议使用 HTTPS，避免浏览器阻止加载
- 跨域限制 — iframe 内的表单与父页面是隔离的，不能直接通信
- 移动适配 — iframe 在移动端可能需要额外的响应式处理
- 加载速度 — 首次加载需要一定时间，考虑添加加载提示
常见问题
表单在 iframe 中显示不完整？
检查 iframe 的 height 属性是否足够，建议设置为至少 600px 或使用百分比高度。
嵌入后表单无法提交？
检查是否存在跨域限制，确保表单链接使用 HTTPS。
如何在表单提交后跳转到指定页面？
在「表单设置」→「提交设置」中设置「跳转链接」，提交后自动跳转到你指定的 URL。