像做PPT一样生成表单的HeyForm

什么是 HeyForm ?

HeyForm 是一个开源表单生成器,允许任何人为调查、问卷、测验和民意调查创建引人入胜的对话表单。无需编码技能。

安装

在群晖上以 Docker 方式安装。

本文写作时, latest 版本对应为 v0.0.10

需用到 3 个镜像,采用 docker-compose 安装,将下面的内容保存为 docker-compose.yml 文件

因为在局域网运行,未考虑安全性,所以数据库连密码都没有设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
version: "3"

services:
heyform:
image: heyform/community-edition:latest
restart: "always"
volumes:
# Perist uploaded images
- ./assets:/app/static/upload
depends_on:
- mongo
- redis
ports:
- "9513:8000"
environment:
# Your IP address in the local network, e.g. 192.168.1.50.
APP_HOMEPAGE_URL: http://192.168.0.197:9513
SESSION_KEY: "key1"
FORM_ENCRYPTION_KEY: "key2"
MONGO_URI: "mongodb://mongo:27017/heyform"
REDIS_HOST: redis
REDIS_PORT: 6379

mongo:
image: mongo:4.4.29
restart: "always"
volumes:
# Persist mongodb data
- ./database:/data/db
# ports:
# - "27017:27017"

redis:
image: redis
restart: "always"
command: "redis-server --appendonly yes"
volumes:
# Persist redis data
- ./redis:/data
# ports:
# - "6379:6379"
  • APP_HOMEPAGE_URL:局域网使用直接用局域网 IP+ 本地端口即可;
  • SESSION_KEY:会话加密密钥;
  • FORM_ENCRYPTION_KEY:表单加密密钥;
  • MONGO_URI:数据库连接地址,对于docker来说应该是这样的mongodb://mongo:27017/heyform,默认即可
  • REDIS_HOSTredis 主机
  • REDIS_PORTredis 端口

更多环境变量的说明请参考官方文档:https://docs.heyform.net/configuration

HeyForm 支持与第三方的集成,当环境变量多时,可以参考官方的.env 示例:https://github.com/heyform/heyform/blob/main/packages/server/.env.example

然后执行下面的命令

1
2
3
4
5
6
7
8
9
10
# 新建文件夹 heyform 和 子目录
mkdir -p /volume1/docker/heyform/{assets,database,redis}

# 进入 heyform 目录
cd /volume1/docker/heyform

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:9513 就能看到登录界面

如果是第一次的话,需要 create an account

密码必须至少包含 8 个字符,并且至少包含 1 个大写、1 个小写和 1 个数字。

创建完用户后,会让你创建一个工作区

工作区是一个共享环境,成员可以在其中进行协作

默认已经有了一个以用户名命名的项目,你可以改名、删除

进入项目可以创建第一个表单

起个名字

HeyForm 提供了一个用户友好的表单编写界面,它与在 PowerPoint 中制作 PPT 非常相似,每个问题都是一个 slider

点击顶部的 setting 进入设置界面,找到语言设置

改成中文

回到表单会发现,有部分内容已经是中文了

右侧边栏是我们所说的选项面板,它提供了自定义问题的选项,例如:

  • 将问题设为必填或可选
  • 在问题中插入图片
  • 设置字符限制:最小或最大字符数或选项数
  • 自定义表单设计
  • 添加条件逻辑来隐藏/显示/跳转到问题

右上角可以 预览分享或者发布 我们完成的表单

预览模式下,可以选择 Desktop 或者 Mobile

发布则只需要将 url 发给别人即可

参考文档

heyform/heyform: HeyForm is an open-source form builder that allows anyone to create engaging conversational forms for surveys, questionnaires, quizzes, and polls. No coding skills required.
地址:https://github.com/heyform/heyform

HeyForm: The best open-source form builder
地址:https://heyform.net/

HeyForm Help Center
地址:https://docs.heyform.net/

Self-Hosting
地址:https://docs.heyform.net/self-hosting