表单编辑器

表单编辑器概览

Mobyform 的可视化编辑器采用拖拽式设计，让你无需编写代码就能构建专业表单。

编辑器布局

编辑器界面分为三个主要区域：

左侧面板 — 字段列表

左侧面板展示所有可用的字段组件，按类别分组：

• 基础字段 — 文本输入、数字、单选、多选等
• 高级字段 — 矩阵、评分、签名、地图等
• 布局组件 — 分页、分割线、标题、描述文本
• 特殊组件 — 文件上传、手机验证、OCR 识别

从左侧面板拖拽字段到中间画布即可添加。

中间区域 — 表单画布

表单画布是所见即所得的编辑区域：

• 拖拽字段调整排列顺序
• 点击字段选中并编辑
• 支持多列布局
• 实时预览表单效果

右侧面板 — 属性配置

选中字段后，右侧面板显示该字段的配置选项：

• 基本属性 — 标签、占位符、默认值
• 验证规则 — 必填、格式校验、长度限制
• 外观设置 — 列宽、标签位置
• 高级选项 — 逻辑条件、计算公式

核心操作

添加字段

• 拖拽添加 — 从左侧面板拖拽到画布指定位置
• 点击添加 — 点击字段自动追加到表单末尾
• 复制字段 — 选中字段后点击「复制」按钮

排序和布局

• 拖拽排序 — 直接拖拽字段上下移动
• 多列布局 — 调整字段的列宽（span）实现并排布局
• 栅格间距 — 设置列间距（gutter）

编辑字段

1. 点击画布上的字段选中
2. 在右侧面板修改属性
3. 修改实时反映在画布上

删除字段

• 选中字段后点击「删除」按钮
• 删除的字段进入回收站，可恢复

快捷键

表单配置

基本设置

• 表单标题 — 设置表单名称
• 表单描述 — 添加描述说明
• 表单大小 — 小 / 默认 / 大
• 标签位置 — 上方 / 左侧 / 右侧
• 标签宽度 — 自定义标签宽度
• 显示序号 — 字段自动编号
• 显示必填星号 — 必填字段标记 *

按钮配置

• 自定义提交按钮文案
• 显示/隐藏重置按钮
• 按钮对齐方式（左 / 中 / 右）

主题标签

使用 「主题」 标签控制表单的视觉体验：

• 为当前表单设置颜色、字体、输入框样式、按钮样式、封面页、Logo、页脚、水印和自定义 CSS。
• 按 「全部」、「我的」、「公共」 浏览主题库。
• 按主题名称或分类搜索主题。
• 确认后应用主题；应用主题只会替换视觉样式。
• 将当前样式保存为 「我的主题」，以后复用到其他表单。

分页

使用「分页」组件将长表单拆分为多个页面：

• 每页独立验证
• 支持上一页/下一页导航
• 可设置「每页一题」模式

预览

编辑器提供多种预览方式：

• 桌面预览 — 查看电脑端显示效果
• 移动端预览 — 查看手机端显示效果
• 实时预览 — 编辑时实时查看变化

回收站

误删的字段可以从回收站恢复：

1. 点击编辑器顶部的「回收站」图标
2. 查看已删除的字段列表
3. 点击「恢复」将字段添加回表单

下一步

• 字段类型 — 详细了解每种字段
• 条件逻辑 — 设置字段显示/隐藏逻辑
• 主题定制 — 自定义表单外观
• 模板 - 从可复用模板创建表单