扣子卡片式动态表单提交与数据回流实战指南

P粉328763957

P粉328763957

2026-08-04

271人浏览

原创

coze卡片表单需用空白模板+表单组件,字段名严格设为ticket_id/priority并绑定form_data对象,提交目标选“触发工作流”,工作流起始节点必须是“卡片表单提交”事件,再通过变量赋值、http请求及条件分支实现数据接收与反馈。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

扣子卡片式动态表单提交与数据回流实战指南

你需要在扣子(Coze)中构建一个带交互按钮、可动态填充字段、提交后实时返回结果的卡片式表单,但卡在变量绑定错乱、提交后无响应、或数据无法回流到后续节点上——这篇文章只讲从卡片创建、表单配置、变量映射到工作流接收的完整链路,不绕弯,每一步都对应真实界面操作和关键断点。

创建支持表单交互的卡片模板

登录Coze→点击左侧【卡片】→【创建卡片】→选择「空白卡片」模板,不要选「列表」或「单卡摘要」类预设,它们默认不启用表单组件能力。

在组件面板中,拖入「表单」布局组件(不是「容器」或「分组」),它自带 submit 按钮和表单语义结构;直接拖入「输入框」基础组件到表单内,双击编辑其属性:将「字段名」设为 【ticket_id】,这是后续所有映射的唯一标识符,大小写敏感且不可含空格或下划线。

再拖入一个「下拉选择」组件,字段名设为 【priority】,在选项配置中手动添加三项:低、中、高——注意此处不能用变量动态生成选项,否则提交时会因未初始化导致校验失败。

最后拖入「按钮」组件,类型选「提交」,并确保其「触发动作」设为「提交表单」,不是「跳转链接」或「执行工作流」——这是表单能否触发后续流程的开关,选错就彻底断链。

绑定表单变量并配置提交目标

点击卡片右上角「变量」→【创建变量】→变量名称填 【form_data】,类型选「对象」,默认值留空(JSON格式为空对象 {} 即可)。

回到表单组件内部,逐个点击每个输入组件→右侧「绑定变量」下拉菜单中,选择刚创建的 【form_data】 →再点「字段映射」→将输入框的字段名 【ticket_id】 映射到 form_data.ticket_id,下拉框的 【priority】 映射到 form_data.priority。

表单提交波浪按钮
表单提交波浪按钮

一个表单按钮特效,提交时按钮内会出现波浪填充反馈。 从下载体验看,它的优势在于文件清晰、没有外部依赖、可以直接用浏览器打开。用户可以先阅读本文了解实现方式,再进入演示页体验真实交互。

下载

这一步极易出错:如果直接在输入框里写 {{ticket_id}} 而不走「绑定变量」路径,提交后变量不会注入上下文,后续工作流永远收不到数据。Coze 的表单变量必须通过「组件→绑定→字段映射」三级穿透,缺一不可。

在表单组件最外层设置「提交目标」:点击表单组件→右侧配置栏找到「提交后行为」→选「触发工作流」→从下拉列表中选择你已创建好的目标工作流(如“工单创建流程”)。注意:该工作流必须已存在,且名称不含空格或特殊字符,否则下拉列表里根本不会显示。

配置接收表单数据的工作流

第一步:打开目标工作流编辑页→确保开始节点类型为「事件触发器」→触发类型选「卡片表单提交」,不是「Bot消息」或「定时触发」——只有这个类型才能自动捕获表单 payload。

第二步:添加「变量赋值」节点→在「赋值表达式」中填:
form_input = {{trigger.payload.form_data}}

第三步:添加「HTTP 请求」节点→URL填你的后端接口地址(如 https://api.company.com/v1/ticket)→请求方法选 POST→Body 类型选 JSON→Body 内容填:
{
  "ticket_id": "{{form_input.ticket_id}}",
  "priority": "{{form_input.priority}}",
  "submit_time": "{{now()}}"
}

第四步:在 HTTP 节点后接一个「条件分支」节点→判断表达式填:
{{http_response.status == 201}}
成立分支连「发送消息」节点,内容写“✅ 工单已创建:{{form_input.ticket_id}}”;不成立分支连另一个「发送消息」节点,内容写“⚠️ 提交失败,请重试”。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

表单提交 回流 扣子

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
扣子智能体开发实操指南
扣子智能体开发实操指南

本专题面向开发者与产品同学,完整讲解扣子智能体Bot从零到一的搭建流程,包括Bot创建、提示词编写、插件接入、变量与记忆配置、调试与多渠道发布,帮助你打造属于自己的AI助手。

2026.06.05

257

14

扣子工作流全功能使用教程
扣子工作流全功能使用教程

本专题系统讲解扣子工作流的搭建逻辑与节点使用,覆盖LLM节点、代码节点、条件分支、循环节点与子工作流等核心能力,配合15个实战案例,帮助你用工作流把复杂业务流程自动化。

2026.06.05

138

15

扣子知识库零基础入门
扣子知识库零基础入门

本专题围绕扣子知识库与记忆系统,详细讲解知识库创建、文档上传、切片策略、向量召回、问答调优以及变量记忆与数据库的使用方法,帮助你打造高准确率的私有知识问答能力。

2026.06.05

281

15

火山引擎云服务器使用教程
火山引擎云服务器使用教程

火山引擎云服务器使用教程适合第一次购买、部署和管理云服务器的用户参考。本专题整理控制台入口、实例创建、地域和配置选择、系统镜像设置、安全组放行、远程连接、网站部署、续费计费和常见连接失败问题,帮助用户快速完成云服务器基础使用流程。

2026.08.04

0

10

火山引擎API Key绑定大模型教程
火山引擎API Key绑定大模型教程

火山引擎API Key怎么绑定大模型适合需要在火山方舟、应用后台、脚本工具或AI编程软件中调用模型的开发者参考。本专题整理控制台服务开通、API Key创建、模型权限检查、模型ID选择、Base URL填写、调用测试和鉴权失败排查,帮助用户完成从密钥到模型调用的配置流程。

2026.08.04

0

10

火山引擎API Key获取教程
火山引擎API Key获取教程

火山引擎API Key适合需要调用火山引擎云服务、AI模型、火山方舟接口或其他开放能力的开发者参考。本专题整理控制台入口、账号认证、服务开通、API Key创建、密钥复制保存、权限检查、调用测试和Key无效等常见问题排查。

2026.08.04

4

10

火山引擎API接入教程
火山引擎API接入教程

火山引擎API接入适合需要在应用、脚本、后台服务或AI工具中调用火山引擎能力的开发者参考。本专题整理控制台入口、服务开通、API Key获取、接口地址配置、请求参数填写、调用测试、权限设置、额度查询和常见接口报错排查。

2026.08.04

4

10

火山引擎DeepSeek API调用教程
火山引擎DeepSeek API调用教程

火山引擎DeepSeek API适合需要在应用、脚本、智能体或AI编程工具中调用DeepSeek模型的开发者参考。本专题整理火山引擎控制台入口、模型服务开通、API Key获取、Base URL配置、模型名称填写、调用测试、额度查询和常见接口报错排查。

2026.08.04

2

10

火山引擎控制台操作教程
火山引擎控制台操作教程

火山引擎控制台中常用功能包括API密钥管理、模型调用配置、云资源查看、账单明细、用量统计和权限分配。本专题整理控制台基础操作、服务开通流程、Key创建与保存、费用消耗查看、子账号权限设置和调用失败排查,方便开发者完成日常管理。

2026.08.04

3

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
扣子入门级教程
扣子入门级教程

共0课时 | 178人学习

扣子官方文档
扣子官方文档

共0课时 | 0人学习

PHP与Ajax极速入门
PHP与Ajax极速入门

共8课时 | 11.6万人学习