使用说明

快速开始

点击"创建新表单"按钮
填写表单标题和描述
添加需要的表单字段
分享表单链接或嵌入到您的页面
在"数据"页面查看提交的数据

创建表单

在首页点击"创建新表单"，填写：

表单标题 - 必填，表单的名称
表单描述 - 可选，简要说明表单用途

创建后会自动跳转到编辑页面，您可以开始添加字段。

编辑表单

编辑表单信息

在编辑页面顶部可以修改表单的标题和描述。

添加字段

在左侧卡片中填写字段信息后点击"添加字段"：

字段类型 - 选择字段类型（见下文）
字段标签 - 用户看到的标签
字段名称 - URL 参数中使用的名称
选项 - 单选、多选、下拉字段需要提供选项
必填 - 勾选后此字段为必填项

编辑字段

点击字段卡片上的"编辑"按钮，在弹出的模态框中修改字段信息。

删除字段

点击字段卡片上的"删除"按钮确认后删除。

字段类型

类型	说明	需要选项
单行文本	短文本输入	否
多行文本	长文本输入（textarea）	否
数字	数字输入，支持筛选时的数值比较	否
日期	日期选择器	否
日期时间	日期+时间选择器	否
单选	单选按钮组	是
多选	复选框组	是
下拉选择	下拉菜单	是

数据查看

在表单列表点击"数据"按钮进入数据查看页面。

筛选数据

点击"+ 添加筛选"按钮添加筛选条件
选择字段、筛选方式和筛选值
数字字段支持：等于、大于、小于
其他字段支持：包含、等于
点击"应用筛选"查看结果

排序数据

选择排序字段（提交时间或任意字段）
选择升序或降序
数字字段排序会按数值比较

在新页面查看结果

点击"在新页面查看结果"按钮，在新标签页中只显示数据表格，适合打印或分享。

列显示设置

点击"列设置"按钮可以配置要显示的列和顺序。

选择显示的列

勾选要显示的列，取消勾选的列会被隐藏。

调整列顺序

拖拽排序：拖动列表项调整顺序
按钮排序：使用 ↑↓ 按钮逐行调整

保存设置

设置会自动保存到浏览器本地存储，下次访问时自动应用。

导出数据

点击"导出 Excel"按钮将当前筛选后的数据导出为 Excel 文件。

文件名格式：{表单标题}_{日期}.xlsx
包含所有可见列
带表头和格式

表单嵌入

在表单列表点击"嵌入代码"按钮获取嵌入代码。

基础嵌入

<iframe src="https://muvocal.com/py/form/submit/form/<表单UUID>/view?embed=true" 
        width="100%" 
        height="500" 
        frameborder="0">
</iframe>

嵌入参数

embed=true - 启用嵌入模式，隐藏导航栏
hide_header=true - 隐藏表单标题和描述

数据绑定

方式一：URL 参数

直接在 URL 中传递参数，表单会自动填充：

http://127.0.0.1:5070/py/form/submit/form/<UUID>/view?name=Wang&score=100

多选字段用逗号分隔：

?hobbies=阅读,运动

方式二：postMessage（推荐）

使用 postMessage 进行双向通信，可以从您的页面动态填充数据。

完整示例

<iframe id="formFrame" 
        src="http://127.0.0.1:5070/py/form/submit/form/<UUID>/view?embed=true&hide_header=true"
        width="100%" 
        height="400" 
        frameborder="0">
</iframe>

<script>
// 您的业务变量
let total = 100;

// 监听表单消息
window.addEventListener('message', (event) => {
    if (event.data.type === 'formReady') {
        // 表单加载完成，填充数据
        document.getElementById('formFrame').contentWindow.postMessage({
            type: 'fillForm',
            payload: {
                score: total,      // 绑定到 score 字段
                name: 'Wang XX'    // 绑定到 name 字段
            }
        }, '*');
    } else if (event.data.type === 'submitSuccess') {
        console.log('提交成功', event.data);
        alert('提交成功！');
    } else if (event.data.type === 'submitError') {
        console.log('提交失败', event.data);
        alert('提交失败: ' + event.data.error);
    }
});
</script>

目录

表单应用使用说明