表单设计
2025-11-7 About 23 min
# 0.新建表单
从顶部菜单进入动态表单模板，点击左侧或页面中间新建表单菜单创建一个新的表单设计器
# 1.表单设计
# 标题配置
点击标题区，激活右侧标题文案配置区域，也可以直接在右边栏选择 表单属性 -> 表单标题 进行标题配置
# 添加组件
左侧表单组件栏选择需要添加的组件类型，再通过点击组件栏的组件，或者拖拽组件栏的组件，将组件添加到表单中
# 组件替换
组件数据在数据库中存储字段为标签名称，如果用户在表达发布后(已经收集了历史数据)，需要修改组件交互类型，如：从文本输入改为下拉选择，
可以通过组件替换功能仅改变表单组件类型，其他通用属性不变更
# 组件通用配置
点击表单设计器中已添加的组件激活组件，激活组件之后，右边栏对激活的组件进行配置。
# 1. 标签相关配置
- 标签名称：用于定义组件的标识，如图中“单行文本”，明确该输入框的用途（如“姓名”“手机号”等）。
- 显示标签开关：可控制是否在表单中显示标签，若关闭则仅保留输入区域，适用于对界面简洁性有要求的场景。
- 标签宽度：定义标签区域的宽度（图中为100px），确保标签显示整齐，避免因文字长度差异导致布局混乱。
标签名称与数据存储
标签的名称为数据库中表字段名称, 如果填加了两个相同标签名的组件，保存表单时会自动重命名组件标签名
# 2. 布局与宽度配置
- 表单栅格：是表单布局的网格系统参数（完整行栅格为24，图中为18），用于控制组件在表单画布中的横向占位比例，帮助实现多组件的整齐排列（类似前端框架的栅格布局逻辑）。
- 组件宽度：设置当前组件自身的宽度占比（图中为50%），可灵活调整输入区域的视觉大小，适配不同长度的内容输入需求。
# 3. 交互状态配置
- 是否禁用开关：开启后组件将变为不可编辑状态，常用于“查看模式”或需要控制用户输入时机的场景。
- 是否必填开关：开启后该组件为必填项，提交表单时会触发校验，确保关键信息不缺失。
# 4. 数据类型配置
- 字段类型下拉框：用于指定组件接收的数据类型（如文本、数字、日期等），用于调整字段在数据库中的存储数据类型。
# 输入型组件
输入型组件用于收集用户的文本、数字类输入信息，是表单中最基础的交互单元。
# 单行文本
适用于短文本输入场景，如姓名、用户名、简单备注等，仅支持单行内容输入。
# 多行文本
用于长文本输入，如意见反馈、详细描述等，支持多行内容的输入和编辑。
# 数字
专门用于数字类数据的输入，避免用户用户输入非数字内容。
# 选择型组件
# 下拉
以下拉列表的形式呈现多个选项，用户可从中选择一个，适用于选项较多的场景，如城市选择、学历选择等。
# 单选框
在多个互斥选项中选择一个，如性别（男/女）、是否同意协议等。
# 多选框
可同时选择多个选项，如兴趣爱好（阅读、运动、音乐等）。
# 开关
用于二选一的场景，如是否启用某项功能、是否接收通知等，操作直观如物理开关。
默认
关闭/开启值为：0/1, 数据存储类型为字符串，用户可以根据使用场景调整， 如上图中红框中将关闭/开启值设置为坏/好
# 滑块
通过拖动滑块选择数值范围，适用于评分、进度等需要直观调整数值的场景。
# 时间选择
用于选择具体的时间，如会议时间、航班时间等，可精确到时分秒。
# 日期选择
用于选择具体的日期，如生日、合同签订日期等。
时间类型
时间类型设置的日期控件显示日期的类型，后台存储字段均为日期类型，存储值为选择日期周期的第一天，如：月份选择存储是月份的第一天。
# 评分
以星级等形式让用户对事物进行评分，如商品评价、服务满意度评价等。
# 上传
支持用户上传文件、图片等资源，如身份证照片、简历文档、产品图片等。
- 文件大小 设置允许上传的单个文件最大体积，图中为 “1MB”。 可根据业务需求调整（如 5MB、10MB），超出限制的文件会被拦截，避免服务器存储压力或传输超时。
- 列表类型 控制上传文件的展示样式，图中选择 “picture-card”（图片卡片式），上传的图片会以带预览功能的卡片形式展示。 其他常见样式如 “text”（纯文本列表）、“picture”（仅图片预览）等，可根据界面风格选择。
- 多选文件 开关开启后，支持一次选择并上传多个文件（需配合 “文件数量限制” 使用）；若关闭，则仅允许单次上传一个文件。
- 文件数量限制 设置最多可上传的文件总数，图中为 “2”，即用户最多可上传 2 张图片。 可根据业务场景调整（如 1 张、5 张等），超出数量的文件无法继续上传。
# 布局型组件
布局型、描述性组件是不负责数据收集的辅助组件，目前有文字描述性组件与分割线组件
# 联系人组件
联系人组件为普通组件的预定义模板，专为收集联系人相关信息设计的组件集合，覆盖了联系人的基本信息、社交信息、职业信息等维度。 其中, 身份证、邮箱、手机号预置了输入验证规则
# 2.提交后 配置
这是动态表单 “提交后” 页面的配置界面，用于设置用户提交表单后的反馈样式
- 自定义图片：可上传个性化图片（如品牌 Logo、成功标识），替代默认的成功图标，增强品牌识别或视觉体验。
- 提示标题：设置提交成功后的标题文案，如图中 “提交成功！”，用于快速传递操作结果。
- 提示文本：补充详细说明，如图中 “我们已收到您的反馈，感谢填写！”，向用户解释后续流程或表达感谢。
- 显示按钮：开启后可添加交互按钮（如图中 “返回”），支持用户点击后返回表单页修改填写内容。
# 4 外观配置
# 样式配置
- 标签相关配置
标签对齐：支持左对齐、右对齐、顶部对齐，图中选择 “右对齐”，使标签与输入组件的布局更规整； 标签宽度：设置为 100px，确保标签区域宽度统一，提升表单视觉一致性。
- 布局与尺寸配置
表单尺寸：选择 “中等”，宽度设为 700px，适配多数设备的显示场景； 元素间隔：0px，控制表单内元素的纵向间距，可根据界面密度调整。
# 表头外观配置
右边栏选择 外观 -> 表头区 进行表头样式配置
- 背景: 表头背景支持图片背景和背景色两种方案
- 图片背景: 在图片背景模式下，可以选择内置的图片作为背景，或者用户自己上传图片作为背景
- 背景色: 在背景色模式下，可以通过颜色拾取器配置背景颜色
- 高度*: 指表头部分的高度，通常用于调整高度以匹配图片的百分比，防止图片拉伸变形
# 页面与提交区
# 页面
# 提交区
提交区样式配置支持配置
- 按钮颜色
- 文字颜色
- 按钮宽度