开源表单生成器OpnForm

在这里插入图片描述

什么是 OpnForm ?

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

软件功能:

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

安装

在群晖上以 Docker 方式安装。

本文写作时,主镜像 jhumanj/opnform-apilatest 版本对应为 1.3.7

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

如果你想使用官方的方式,可以参考官方的文档:https://docs.opnform.com/deployment/docker

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

nginx.conf

nginx.confnginx 的配置文件,直接采用官方提供的版本,未做任何修改,源文件地址在:https://github.com/JhumanJ/OpnForm/blob/main/docker/nginx.conf

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:8320SELF_HOSTED=trueLOG_CHANNEL=errorlog
LOG_LEVEL=debugFILESYSTEM_DRIVER=localBROADCAST_CONNECTION=logCACHE_STORE=redis
CACHE_DRIVER=redisQUEUE_CONNECTION=redis
SESSION_DRIVER=redis
SESSION_LIFETIME=120MAIL_MAILER=log
MAIL_HOST=
MAIL_PORT=
MAIL_USERNAME=your@email.com
MAIL_PASSWORD=
MAIL_ENCRYPTION=
MAIL_FROM_ADDRESS=your@email.com
MAIL_FROM_NAME=OpnFormAWS_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=mt1MIX_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 做了几处修改,源文件在:https://github.com/JhumanJ/OpnForm/blob/main/api/.env.docker

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

但是需要加上前缀 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 提醒等,如果你有需要可以自习修改,官方提供了环境变量的说明:https://docs.opnform.com/configuration/environment-variables

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 做了一处新增,源文件在:https://github.com/JhumanJ/OpnForm/blob/main/client/.env.docker

  • FRONT_API_SECRET:也是使用 openssl rand -base64 32 生成;

docker-compose.yml

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

官方的源文件:https://github.com/JhumanJ/OpnForm/blob/main/docker-compose.yml

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

version: '3'services:api: &apiimage: jhumanj/opnform-api:latestcontainer_name: opnform-apienvironment: &api-environment  # Add this anchorDB_HOST: dbREDIS_HOST: redisDB_DATABASE: ${DB_DATABASE:-forge}DB_USERNAME: ${DB_USERNAME:-forge}DB_PASSWORD: ${DB_PASSWORD:-forge}DB_CONNECTION: ${DB_CONNECTION:-pgsql}FILESYSTEM_DISK: localLOCAL_FILESYSTEM_VISIBILITY: publicenv_file: - ./api-env.txtvolumes:- ./storage:/usr/share/nginx/html/storage:rwapi-worker:image: jhumanj/opnform-api:latestcontainer_name: opnform-api-workercommand: php artisan queue:workenvironment:<<: *api-environmentIS_API_WORKER: "true"env_file: - ./api-env.txtvolumes:- ./storage:/usr/share/nginx/html/storage:rwui:image: jhumanj/opnform-client:latestcontainer_name: opnform-uienv_file: - ./client-env.txtredis:image: redis:7container_name: opnform-redisdb:image: postgres:16container_name: opnform-db# ports:#   - 5433:5432environment:POSTGRES_DB: ${DB_DATABASE:-forge}POSTGRES_USER: ${DB_USERNAME:-forge}POSTGRES_PASSWORD: ${DB_PASSWORD:-forge}volumes:- ./data:/var/lib/postgresql/dataingress:image: nginx:1container_name: opnform-ingressvolumes:- ./nginx.conf:/etc/nginx/templates/default.conf.templateports:- 8320:80

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

然后执行下面的命令

# 新建文件夹 opnform 和 子目录
mkdir -p /volume1/docker/opnform/{data,storage}# 进入 opnform 目录
cd /volume1/docker/opnform# 将 docker-compose.yml 放入当前目录# 一键启动
docker-compose up -d

注意事项

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

超时问题

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

可以先执行

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

容器停止

可能会遇到某个容器停止

可以尝试强制启动

登录无反应

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

可以单独再执行一次

# 进入容器
docker exec --user root -it opnform-api /bin/bash# 迁移数据  
php artisan migrate:refresh --seed

或者只用一条命令来解决

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

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

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

运行

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

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

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

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

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

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

新建 form

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

模版挺多的

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

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

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

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

点右上角的 Publish Form 发布

在其他机器上打开链接

手机上扫描二维码

参考文档

JhumanJ/OpnForm: Beautiful Open-Source Form Builder
地址:https://github.com/JhumanJ/OpnForm

Beautiful forms & Surveys - OpnForm
地址:https://opnform.com/

Docker - OpnForm Technical Docs
地址:https://docs.opnform.com/deployment/docker

My open-source form builder just reached 2k stars on Github! : r/selfhosted
地址:https://www.reddit.com/r/selfhosted/comments/1g3ego7/my_opensource_form_builder_just_reached_2k_stars/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/453895.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle Form开发遇到的一些问题

1.错误&#xff1a;FRM-32083: Value length is too long for maximum length of item. 解决&#xff1a;Maximum Length要设置的大些。 2.问题&#xff1a;FRM-30047: Cannot resolve item reference RATEPAYER_INFO.PARTY_SITE_ID. 解决&#xff1a;该引用使用错误&#xff…

图片写入GPS经纬高信息

近期项目中需要往java平台传输图片&#xff0c;直接使用QNetworkAccessManager和QHttpMultipart类即可&#xff0c;其他博文中有分享。 主要是平台接口对所传输图片有要求&#xff1a;需要包含GPS信息&#xff08;经度、纬度、高度&#xff09;。 Qt无法直接实现&#xff0c;…

优先级队列(2)_数据流中第k大元素

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 优先级队列(2)_数据流中第k大元素 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目…

深度解析机器学习的四大核心功能:分类、回归、聚类与降维

深度解析机器学习的四大核心功能&#xff1a;分类、回归、聚类与降维 前言分类&#xff08;Classification&#xff09;&#xff1a;预测离散标签的艺术关键算法与代码示例逻辑回归支持向量机&#xff08;SVM&#xff09; 回归&#xff08;Regression&#xff09;&#xff1a;预…

信息学奥赛复赛复习18-CSP-J2022-01解密-二分答案、二分找边界、二分时间复杂度、二分求最小

PDF文档回复:20241017 1 P8814 [CSP-J 2022] 解密 [题目描述] 给定一个正整数 k&#xff0c;有 k 次询问&#xff0c;每次给定三个正整数 ni,ei,di&#xff0c;求两个正整数 pi,qi&#xff0c;使 nipiqi、eidi(pi−1)(qi−1)1 [输入格式] 第一行一个正整数 k&#xff0c;表…

Docker 入门 - 拉取/创建镜像 + 运行和管理容器

写在前面&#xff1a; 本篇简单介绍一下如何入手 Docker&#xff0c;从 创建/拉取 镜像&#xff0c;再到运行和管理容器&#xff0c;还包括导出容器等操作。这里先贴一下官方的文档地址&#xff1a; Docker DocsDocker Documentation is the official Docker library of reso…

在Windows系统中,cmd 查看 MongoDB 相关信息

MongoDB是一种流行的NoSQL数据库&#xff0c;广泛应用于各种现代应用程序中。 1 查看MongoDB的版本号 要查看MongoDB的版本号&#xff0c;可以使用mongo命令连接到MongoDB&#xff0c;然后执行db.version()。 mongo连接到数据库后&#xff0c;执行以下命令&#xff0c;输出M…

java如何部署web后端服务

java如何部署web后端服务 简单记录一下&#xff0c;方便后续使用。 部署流程 1.web打包 2.关掉需要升级的运行中的服务 /microservice/hedgingcustomer-0.0.1-SNAPSHOT/conf/bin/ 执行脚本 sh shutdown.sh 3.解压文件 返回到/microservice 将升级包上传到该路径&#x…

10款超好用的文档加密软件|2024企业常用文档加密软件排行榜!

在当今的数字化时代&#xff0c;企业的数据安全已经成为了一项至关重要的任务。为了确保企业核心信息资产的安全性和完整性&#xff0c;越来越多的企业开始采用文档加密软件。以下是2024年企业常用的10款超好用的文档加密软件排行榜。 1. Ping32文档加密软件 Ping32是一款功能…

重磅发布,Wireshark 4.4.1 修复多个漏洞,性能新升级

号主&#xff1a;老杨丨11年资深网络工程师&#xff0c;更多网工提升干货&#xff0c;请关注公众号&#xff1a;网络工程师俱乐部 中午好&#xff0c;我的网工朋友 Wireshark 一直以其强大的数据包捕获和分析功能而闻名。作为网络工程师、安全分析师和开发者的重要工具&#x…

Java项目-基于spingboot框架的校友社交系统系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…

中石化万总经理一行莅临点赋科技公司考察调研

近日&#xff0c;中石化万总经理一行莅临点赋科技公司&#xff0c;进行了坦诚而富有成效的交流&#xff0c;双方在轻松而又热烈的氛围中&#xff0c;逐步达成了初步合作意向。 在参观过程中&#xff0c;点赋科技董事长崔梦姣详细介绍了公司的发展历程、核心技术以及未来的发展规…

IDEA下lombok安装及找不到get,set的问题的解决方法

在IDEA中使用Lombok,但是在编译时&#xff0c;提示找不到set()和get()方法&#xff0c;明明在javabean中使用了Data注解&#xff0c;但是编译器就是找不到。 Idea下安装Lombok(需要二步) 第一步&#xff1a; pom.xml中加入lombok依赖包 1 2 3 4 5 6 7 <!-- https://mvnre…

【真题笔记】09-12年系统架构设计师要点总结

【真题笔记】09-12年系统架构设计师要点总结 41 视图DSSA&#xff08;特定领域架构&#xff09;集成系统数据库管理设计模式操作符运算符综合布线备份数据库集成工作流技术软件质量保证需求管理需求开发结构化方法企业战略数据模型事务数据库主题数据库系统设计原型开发静态分析…

SAP B1 账套锁定解决方案

背景 忘记账套密码时&#xff0c;随着尝试密码失败的次数变多&#xff0c;可能会出现账套锁定并报错的情况&#xff0c;如下图&#xff1a; 本文给出一个解决方案&#xff0c;供参考。 解决方案 效果&#xff1a;无法直接找回密码&#xff0c;或重置密码&#xff0c;但是可以…

代码随想录-环形链表II

题目与解析 题目链接:环形链表II 本题两个关键点&#xff0c;1、确定有环 2、确定环的入口位置 提供两种解法&#xff0c;第一种是我借助了一个辅助的列表来记录指针&#xff0c;空间复杂度O(n)比较无脑 第二种是Carl哥的双指针法&#xff0c;又是套圈问题&#xff0c;…

「毅硕|生信教程」 micromamba:mamba的C++实现,超越conda

1 Micromamba 简介 大家是否有这样的经历&#xff0c;使用conda/anaconda进行环境配置的是否速度非常慢&#xff0c;进度经常卡在“Collecting package metadata”上。甚至有时候需要安装的软件比较多&#xff0c;或者需要用到conda-forge这个最大的channel&#xff0c;conda能…

Windows环境下Qt Creator调试模式下qDebug输出中文乱码问题

尝试修改系统的区域设置的方法&#xff1a; 可以修复问题。但会出现其它问题&#xff1a; 比如某些软件打不开&#xff0c;或者一些软件界面的中文显示乱码&#xff01; 暂时没有找到其它更好的办法。

渗透基础-rcube_webmail版本探测

简介 本文介绍了开源产品RoundCube webmail邮件系统的版本探测思路&#xff0c;并用go语言实现工具化、自动化探测。 正文 0x01 探测思路研究 探测系统版本&#xff0c;最理想的方法就是系统主页html代码中有特定的字符串&#xff0c;比如特定版本对应的hash在主页的html代…

【开源免费】基于SpringBoot+Vue.JS母婴商城系统 (JAVA毕业设计)

本文项目编号 T 030 &#xff0c;文末自助获取源码 \color{red}{T030&#xff0c;文末自助获取源码} T030&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…