技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

开源表单生成器OpnForm

 收录于 未分类
   约 1681 字   预计阅读 4 分钟 
https://bing.ee123.net/img/rand?artid=143036960

开源表单生成器OpnForm

https://i-blog.csdnimg.cn/direct/f88787dd48ce47bba19a575d4f5ad05f.png

什么是 OpnForm ？

OpnForm 是一个开源的表单构建工具，旨在简化创建自定义表单的过程，特别适合无编码知识的用户。它通过人工智能优化表单创建流程，支持多种用途，如联系人表单、调查表等。 OpnForm 提供了一个直观的拖放界面，用户可以快速创建美观的表单，并且只需不到一分钟的时间即可完成。

软件功能：

  • 🚀 无代码构建器，支持无限的表单和提交
  • 📝 各种输入类型：文本、日期、URL、文件上传等等
  • 🌐 可嵌入到任何地方
  • 📧 电子邮件通知
  • 💬 集成（ Slack 、 Webhooks 、 Discord ）
  • 🧠 表单逻辑和自定义
  • 🛡️ 验证码保护
  • 📊 表单分析

https://img-blog.csdnimg.cn/img_convert/cb8abb53cb5d8455a4ebd683764cda79.png

安装

在群晖上以 Docker 方式安装。

本文写作时，主镜像 jhumanj/opnform-api 的 latest 版本对应为 1.3.7 ；

https://img-blog.csdnimg.cn/img_convert/c7d6ef813fb877d49e22dfad6a09405b.png

软件涉及到多个容器，采用了 docker-compose 方式安装，但没有用官方提供的的脚本安装方式，因为老苏不想下载源码，所以对目录、文件等做了调整

如果你想使用官方的方式，可以参考官方的文档：

下面是介绍的是老苏的纯手工安装方式

nginx.conf

nginx.conf 为 nginx 的配置文件，直接采用官方提供的版本，未做任何修改，源文件地址在：

map $original_uri $api_uri {
    ~^/api(/.*$) $1;
    default $original_uri;
}

server {
listen 80;
server_name opnform;
root /app/public;

         access_log /dev/stdout;
         error_log  /dev/stderr error;

         index index.html index.htm index.php;

         location / {
           proxy_http_version 1.1;
           proxy_pass http://ui:3000;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-Host $host;
           proxy_set_header X-Forwarded-Port $server_port;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "Upgrade";
         }

         location ~/(api|open|local\/temp|forms\/assets)/ {
              set $original_uri $uri;
              try_files $uri $uri/ /index.php$is_args$args;
         }

         location ~ php$ {
            fastcgi_split_path_info ^(.+php)(/.+)$;
            fastcgi_pass api:9000;
            fastcgi_index index.php;
            include fastcgi_params;
            #fastcgi_param SCRIPT_FILENAME /usr/share/nginx/html/$fastcgi_script_name;
            fastcgi_param SCRIPT_FILENAME /usr/share/nginx/html/public/index.php;
            fastcgi_param REQUEST_URI $api_uri;
         }

}

api-env.txt

api-env.txt 为服务端的环境变量文件

APP_NAME="OpnForm"
APP_ENV=production
APP_KEY=base64:G4UgDosWwGfxUa4YrcvPlzq1DicnSqtW9y5igi4nFX4=
APP_DEBUG=false
APP_URL=http://192.168.0.197:8320

SELF_HOSTED=true

LOG_CHANNEL=errorlog
LOG_LEVEL=debug

FILESYSTEM_DRIVER=local

BROADCAST_CONNECTION=log

CACHE_STORE=redis
CACHE_DRIVER=redis

QUEUE_CONNECTION=redis
SESSION_DRIVER=redis
SESSION_LIFETIME=120

MAIL_MAILER=log
MAIL_HOST=
MAIL_PORT=
MAIL_USERNAME=your@email.com
MAIL_PASSWORD=
MAIL_ENCRYPTION=
MAIL_FROM_ADDRESS=your@email.com
MAIL_FROM_NAME=OpnForm

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

JWT_TTL=1440
JWT_SECRET=hS2Z7AOJYhZnq4vIQ32tsWQ4SxSYfj5f2jKfCLcWxz0=

MUX_WORKSPACE_ID=
MUX_API_TOKEN=

OPEN_AI_API_KEY=

基于官方的 .env.docker 做了几处修改，源文件在：

  • APP_ENV ：从 local 改为了 production ；
  • APP_KEY ：使用 openssl rand -base64 32 生成

https://img-blog.csdnimg.cn/img_convert/6ba4538dd6672bdb880ddfe09caee7dd.png

但是需要加上前缀 base64: ，否则日志会报错

NOTICE: PHP message: [2024-10-15 11:28:25] production.ERROR: Unsupported cipher or incorrect key length. Supported ciphers are: aes-128-cbc, aes-256-cbc, aes-128-gcm, aes-256-gcm. {"exception":"[object] (RuntimeException(code: 0): Unsupported cipher or incorrect key length. Supported ciphers are: aes-128-cbc, aes-256-cbc, aes-128-gcm, aes-256-gcm. at /usr/share/nginx/html/vendor/laravel/framework/src/Illuminate/Encryption/Encrypter.php:62)
  • APP_URL ：需要根据实际情况进行修改，其中 192.168.0.197 为群晖主机的 IP ，而 8320 是准备分配给 OpnForm 的本机端口；
  • JWT_SECRET ：使用 openssl rand -base64 32 生成；

其他参数未做修改，包括 OpenAI 、邮件、 AWS 存储和 PUSHER 提醒等，如果你有需要可以自习修改，官方提供了环境变量的说明：

client-env.txt

client-env.txt 是前端页面的环境变量文件

NUXT_PUBLIC_APP_URL=/
NUXT_PUBLIC_API_BASE=/api
NUXT_PRIVATE_API_BASE=http://ingress/api
NUXT_PUBLIC_ENV=dev
FRONT_API_SECRET=AYSG0uDT2euWdFjsLR/bUWvwTufmnQLyJJMpuBoyYao=

基于官方的 .env.docker 做了一处新增，源文件在：

  • FRONT_API_SECRET ：也是使用 openssl rand -base64 32 生成；

docker-compose.yml

将下面的内容保存为 docker-compose.yml 文件

官方的源文件：

老苏做了微调，因为参数比较多，保留了官方的锚点，使得容器 opnform-api-worker 可以复用 opnform-api 的环境变量参数

version: '3'

services:
api: &api
image: jhumanj/opnform-api:latest
container_name: opnform-api
environment: &api-environment # Add this anchor
DB_HOST: db
REDIS_HOST: redis
DB_DATABASE: ${DB_DATABASE:-forge}
DB_USERNAME: ${DB_USERNAME:-forge}
DB_PASSWORD: ${DB_PASSWORD:-forge}
DB_CONNECTION: ${DB_CONNECTION:-pgsql}
FILESYSTEM_DISK: local
LOCAL_FILESYSTEM_VISIBILITY: public
env_file:
- ./api-env.txt
volumes:
- ./storage:/usr/share/nginx/html/storage:rw

api-worker:
image: jhumanj/opnform-api:latest
container_name: opnform-api-worker
command: php artisan queue:work
environment:
<<: *api-environment
IS_API_WORKER: "true"
env_file:
- ./api-env.txt
volumes:
- ./storage:/usr/share/nginx/html/storage:rw

ui:
image: jhumanj/opnform-client:latest
container_name: opnform-ui
env_file:
- ./client-env.txt

redis:
image: redis:7
container_name: opnform-redis

db:
image: postgres:16
container_name: opnform-db
# ports:
# - 5433:5432
environment:
POSTGRES_DB: ${DB_DATABASE:-forge}
POSTGRES_USER: ${DB_USERNAME:-forge}
POSTGRES_PASSWORD: ${DB_PASSWORD:-forge}
volumes:
- ./data:/var/lib/postgresql/data

ingress:
image: nginx:1
container_name: opnform-ingress
volumes:
- ./nginx.conf:/etc/nginx/templates/default.conf.template
ports:
- 8320:80

这部分理论上只要修改 opnform-ingress 中的本机端口，使之不产生冲突就可以

然后执行下面的命令

# 新建文件夹 opnform 和 子目录
mkdir -p /volume1/docker/opnform/{data,storage}

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

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

# 一键启动
docker-compose up -d

https://img-blog.csdnimg.cn/img_convert/ef3b38cbc7b7c3f08a250de9cbfcea4d.png

注意事项

一键启动过程中或者之后，可能会遇到一些问题，老苏把自己遇到的放在这里，供大家参考

超时问题

因为容器比较多，可能在一键启动过程中会出现超时

https://img-blog.csdnimg.cn/img_convert/8ca4635323d83ca61d723bb6b45a3355.png

可以先执行

# 将超时时间设置为 5 分钟
export COMPOSE_HTTP_TIMEOUT=300

https://img-blog.csdnimg.cn/img_convert/85200acc4fe23b118b2e0a95884e3c31.png

容器停止

可能会遇到某个容器停止

https://img-blog.csdnimg.cn/img_convert/bb067399cd23d6d7b44f210edbd1956c.png

可以尝试强制启动

https://img-blog.csdnimg.cn/img_convert/87f79b67155e04379ddade428b58c3d1.png

登录无反应

假如一键启动后，使用默认的账号密码登录没有反应，很可能是数据库没有 migrate 成功，导致创建默认凭据失败

https://img-blog.csdnimg.cn/img_convert/619a9f32d432e48855352b0140546aaf.png

可以单独再执行一次

# 进入容器
docker exec --user root -it opnform-api /bin/bash

# 迁移数据 
php artisan migrate:refresh --seed

或者只用一条命令来解决

# 迁移数据 
docker-compose exec api php artisan migrate:refresh --seed

https://img-blog.csdnimg.cn/img_convert/ed746300c4e50041b4d39a9bc0dad537.png

接下来创建默认凭据就可以了

# 创建默认用户
docker-compose exec api php artisan app:init-project

https://img-blog.csdnimg.cn/img_convert/743083b2d11f08d884a5767264922842.png

运行

在浏览器中输入 http://群晖 IP:8320 就能看到主界面

https://img-blog.csdnimg.cn/img_convert/56a817b04e9458f1a620cabcf4a1962a.png

点左上角的 Login 进入登录界面

https://img-blog.csdnimg.cn/img_convert/a76a992b6144081885dbed362b0c599e.png

默认凭据，可以在 opnform-api 的日志中找到

  • 电子邮件： admin@opnform.com
  • 密码： password
  • 自托管版本禁止公开注册。请使用管理员帐户邀请其他用户
  • 如果登录没反应，请参考上一个章节

https://img-blog.csdnimg.cn/img_convert/a48f08a6e743521d19a7436aa8b697bd.png

首次登录后，系统将提示您更改电子邮件和密码

https://img-blog.csdnimg.cn/img_convert/e0f728af686f120528c8494e677d6331.png

设置完成后，会回到登录界面，需要用新账号重新登录，登录成功后的主界面

https://img-blog.csdnimg.cn/img_convert/838604021ae349783395eb905bb2a9b3.png

新建 form

https://img-blog.csdnimg.cn/img_convert/77ff9db5d966eb3ae5d684de992b4f3d.png

可以从一个简单的联系人表开始，也可以选择从模版导入

https://img-blog.csdnimg.cn/img_convert/de4df0fafed9051ae59fd7e08879a33a.png

模版挺多的

https://img-blog.csdnimg.cn/img_convert/538f666325ff0bf66463fe384a53aa7f.png

进入模版有说明和预览，点右上角的 Use this template 进行选择

https://img-blog.csdnimg.cn/img_convert/db3379af6253ad54149ea66c9274fda6.png

选择后可以进入到编辑模式

https://img-blog.csdnimg.cn/img_convert/d4fb37f40ae307a7fd5e059b3b58d667.png

你可以根据需要进行修改，也可以直接发布

https://img-blog.csdnimg.cn/img_convert/d4fb37f40ae307a7fd5e059b3b58d667.png

做了简单的修改，将英文改成了中文

https://img-blog.csdnimg.cn/img_convert/0544075f5d35716e21845be5a76d4ab5.png

点右上角的 Publish Form 发布

https://img-blog.csdnimg.cn/img_convert/c9e58c33d29f474565871505c110e854.png

在其他机器上打开链接

https://img-blog.csdnimg.cn/img_convert/c9c62cc0ff181d9202cea586f141ed0e.png

手机上扫描二维码

https://img-blog.csdnimg.cn/img_convert/9548ca51698cdc58a51bc0e4f4523074.jpeg

参考文档

JhumanJ/OpnForm: Beautiful Open-Source Form Builder

地址：

Beautiful forms & Surveys - OpnForm

地址：

Docker - OpnForm Technical Docs

地址：

My open-source form builder just reached 2k stars on Github! : r/selfhosted

地址：

更新于 2024-10-18
 表单, 群晖, Docker
返回 | 主页