什么是表单构建器？

表单构建器让您通过可视化编辑器创建自定义表单。添加文本框、下拉菜单、复选框等字段，然后导出为 HTML 代码或 JSON Schema。

提供十四种字段类型：文本、电子邮件、电话、网址、数字、日期、文件上传、评分量表、下拉菜单、复选框、单选按钮、多行文本、用于引导文字的说明块，以及把长表单拆成多步的分页符。每个输入字段都可设置标签、可选的帮助文字、占位符、必填标记，下拉和单选还可设置选项列表。可从现成模板（联系、反馈、问卷、报名、订购、预约）起步，用上下箭头调整字段顺序，实时预览并查看跨页进度条，然后导出可直接粘贴到任何网站的整洁样式 HTML 页面，或用于后端校验的 JSON 架构。

使用方法

1. 第 1 步——点击“添加字段”插入新字段并选择类型（文本、电子邮件、电话、网址、数字、日期、文件、评分量表、下拉菜单、复选框、单选按钮或多行文本），插入分页符可把长表单拆成多步，也可加载现成模板快速开始。
2. 第二步 — 点击任意字段，设置其标签、占位符和是否必填。
3. 第三步 — 实时预览表单效果，然后导出 HTML 代码或 JSON Schema 集成到您的项目中。

何时使用

• 为静态网站快速构建注册或回执表单并嵌入页面。
• 在交给开发者实现之前,先做出表单原型。
• 教学 HTML 表单基础知识,学生无需手敲每个 input。

结果

一位教师创建班级报名表：学生姓名（必填文本框）、年级（下拉选择：9-12年级）、邮箱（邮箱格式验证）、备注（文本域），然后导出 HTML 嵌入学校网站。

常见问题

用户提交表单后,数据会发送到哪里?

默认不会发到任何地方。导出的 HTML 没有 action 地址,因此提交不会发送出去,数据也不会离开设备。要收集回复,需要把 action 指向自己的接口、Formspree、Google 表单或某个无服务器函数。

可以把已有的表单导回编辑器吗?

暂时不支持。导出是单向的:编辑器到 HTML 或 JSON。如果之后要修改,可保存 JSON Schema 后手动重建,或者在迭代完成前保持编辑窗口打开。

为什么我的下拉菜单没有选项?

下拉框和单选框至少需要一个选项。点击该字段,展开选项区,用逗号或换行分隔输入每个选项。如果列表为空,生成的下拉框就是空的,看不到任何条目。

导出的 HTML 是否带样式?

会。现在每次导出的 HTML 都内置一小段样式表,打开文件即可看到整洁易读的表单:合理的间距、输入框边框、聚焦光圈,以及带样式的提交按钮。这段 CSS 精简且自成一体,你可以原样保留,也可以删除样式块换上自己的 Tailwind、Bootstrap 或框架类名。

HTML 和 JSON 导出有什么区别?

HTML 可以直接粘贴到页面渲染。JSON 是一份结构化的描述文件,记录字段类型、标签和验证规则,适合用 React、Vue 或 react-hook-form、Formik 等表单库来渲染。

相关工具