HeyForm 开源表单构建器完整指南三步搭建并自托管你的表单系统【免费下载链接】heyformOpen-Source Form Builder项目地址: https://gitcode.com/GitHub_Trending/he/heyformHeyForm 是一个开源的对话式表单构建器Open-Source Form Builder它提供可视化编辑器来创建问卷、考试和联系表单支持条件逻辑、把表单嵌入任意网页还能分析提交数据并导出 CSV。本文面向两类读者想自托管一套表单服务的开发者以及想在自己的产品里集成表单能力的前端工程师。截图展示的是编辑器三栏布局左侧是题目列表中间是逐题预览右侧是题目设置面板。 一张表看懂 HeyForm 能做什么能力解决的问题对应源码位置可视化表单编辑不用写代码即可拖出题目、调整顺序packages/webapp/src/pages/form/对话式渲染一次只展示一题降低填写者弃答率packages/form-renderer/src/页面嵌入一行属性即可把表单挂到自己的网站packages/embed/src/条件逻辑按已填答案动态显示或隐藏后续题目packages/answer-utils/src/apply-logic-to-fields.ts提交与分析追踪完成率、流失率导出 CSVpackages/server/src/service/form-analytic.service.tsWebhook 与集成提交后推送数据到 Zapier、Make.com 等工具packages/server/src/apps/webhook.ts支付收款表单内直接接入 Stripe 收费packages/server/src/controller/connect-stripe.controller.ts团队协作多成员、多项目共享与权限管理packages/server/src/model/team.model.ts字段类型覆盖很全从短文本、邮箱、手机号到图片选择、日期区间、文件上传、评分、签名、法律条款确认枚举定义集中在 packages/shared-types-enums/src/enums/form.ts。 三个核心能力拆开看逐题渲染的对话式表单。渲染库把表单拆成一个个 block按逻辑切片后一屏只呈现当前题目用户点Next推进。题目组件按类型一文件一实现放在 packages/form-renderer/src/blocks/核心提交与导航逻辑在其中的 Form.tsx。它内置 14 种界面语言packages/form-renderer/src/locales/填表用户看到的是自己熟悉的语言。嵌入库四种展示模式。embed 包是一个独立的 JavaScript 库在页面里放一个带data-heyform-id、data-heyform-type等属性的 div再加载脚本就能把表单渲染出来支持 standard、modal、popup、full-page 四种模式实现分别在 packages/embed/src/ 下的 standard.ts、modal.ts、popup.ts、full-page.ts。仓库带了一个可直接打开的演示页 packages/embed/example/index.html能看到四种模式的写法对照。条件逻辑与答案校验。表单的聪明部分在 answer-utils 包apply-logic-to-fields.ts 根据已有答案决定后续字段是否显示validate.ts 负责提交时的规则校验服务端和渲染端共用同一套代码保证两边行为一致。字段值转换、HTML 转义等纯函数实现都在 packages/answer-utils/src/并配有完整的单元测试和快照。 环境要求与本地运行硬门槛只有两条Node.js 20 以上、pnpm 8 以上写在根目录 package.json 的 engines 字段里。第一步拿到源码git clone https://gitcode.com/GitHub_Trending/he/heyform第二步在仓库根目录安装依赖并启动开发环境前端 后端一起跑pnpm install pnpm dev这是 pnpm monorepo 项目pnpm-workspace.yaml 里声明了 server、webapp、form-renderer 三个主包另外 answer-utils、embed、shared-types-enums、utils 是被前后端共用的内部包。如果要容器化部署仓库提供了现成的 Dockerfile多阶段构建最终镜像基于 Node Alpine服务监听 9157 端口。docker-compose.test.yml 展示了完整拓扑——HeyForm 主服务加 MongoDB 加 KeyDBRedis 兼容健康检查走/health/ready端点。自托管时必须提供的环境变量有两个密钥SESSION_KEY和FORM_ENCRYPTION_KEY其余如MONGO_URI、SMTP 相关配置按需填写。 三个典型用法在自己的网站挂一个反馈表单。发布表单后从编辑器拿到表单 ID在页面引入 embed 脚本并放一个声明 div指定 standard 或 modal 模式即可。整个过程不动你的后端表单数据进入 HeyForm 自己的数据库。盯流失、导数据。每次表单打开与提交都会记录分析服务据此算出完成率和各环节流失模型见 packages/server/src/model/form-analytic.model.ts结果导出由 packages/server/src/service/export-file.service.ts 完成输出 CSV 后可直接进 Excel 或你的数仓。让表单直接收款。表单支持 Payment 题目类型服务端已接入 Stripe依赖与控制器都在 packages/server/src/ 下用户填完资料可以当场完成支付Stripe 账户连接流程见 connect-stripe.controller.ts回调走 payment-intent-webhook.controller.ts。⚠️ 部署前容易踩的四个坑包管理器不能换。engines 锁定 pnpm 8用 npm 装 monorepo 会缺内部包依赖。两个密钥缺失会直接起不来。SESSION_KEY、FORM_ENCRYPTION_KEY在 compose 文件里标了必填没配环境变量容器会拒绝启动。邮件功能依赖 SMTP。注册、重置密码都走邮件需在环境里配好SMTP_HOST、SMTP_PORT等变量否则用户流程会断。许可协议是 AGPL-3.0。如果你计划修改后对外提供服务先读一下协议约束再动手。 下一步建议想跑完整流程验证行为可以翻 packages/server/docs/e2e-tests.md 了解端到端测试覆盖的鉴权、权限矩阵、限流等场景测试代码在 packages/server/test/e2e/。关注安全相关改动可以看 docs/security-hardening-2026-08-06.md 和 docs/security-advisory-ghsa-fg7j-rmgr-rc9g.md它们记录了限流、防垃圾提交等加固措施的实现背景。建议路线先本地pnpm dev跑通编辑器再配好 Docker 三件套做自托管最后按需接 Stripe 或 Webhook。【免费下载链接】heyformOpen-Source Form Builder项目地址: https://gitcode.com/GitHub_Trending/he/heyform创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考