React中监听嵌入CognitoForms表单的Save按钮并获取保存URL

我用Cognito Forms在iframe中嵌入了表单，表单自动生成了Save和Submit两个按钮。我需要实现：点击Save按钮时，获取Cognito生成的已保存表单访问URL，并通过console.log输出。

初始嵌入代码 #

<div class="cognito">
  <script src="https://services.cognitoforms.com/s/VSqLsE7970G2a-Ir3-x6cg"></script>
  <script>Cognito.load("forms", { id: "96" });</script>
</div>

尝试过程及问题 #

我添加了自定义脚本但未生效，Cognito.load能正常运行，但触发了ReactJS语法错误：

Unexpected token, expected "}"

尝试的错误代码 #

<>
 <script src="https://www.cognitoforms.com/f/seamless.js" data-key="mydatakey" data-form="24"></script>
 <script>Cognito.load("forms", { id: "24" },
  { 
          success: function() 
          { 
              console.log("form loaded sucessfully");
              ExoJQuery(function() 
              {
                    ExoJQuery(document).on('afterSubmit.cognito', function(e,data) 
                    {
                         console.log(data);
                    });
               });
           } 
   }); 
 </script>
</>

解决方案 #

错误原因 #

你之前的代码语法错误在于Cognito.load的参数传递：该方法只接受两个参数（加载类型、配置对象），你错误地把success回调作为第三个独立参数传入，导致语法解析失败。

修正后的代码 #

<div class="cognito">
  <script src="https://services.cognitoforms.com/s/VSqLsE7970G2a-Ir3-x6cg"></script>
  <script>
    Cognito.load("forms", { 
      id: "96", // 替换为你的表单ID
      success: function() {
        console.log("表单加载成功");
        // 监听保存完成事件（区别于Submit的afterSubmit事件）
        ExoJQuery(document).on('afterSave.cognito', function(e, data) {
          // 已保存表单的访问URL在data.entryUrl字段中
          console.log("已保存表单URL:", data.entryUrl);
          // 可打印完整data对象，确认所有返回字段
          console.log("保存返回完整数据:", data);
        });
      }
    });
  </script>
</div>

关键说明 #

• 使用afterSave.cognito事件专门监听Save按钮的操作，不要用afterSubmit（后者对应Submit按钮）。
• 已保存表单的访问链接存储在回调参数data的entryUrl属性中，若字段有差异，可打印完整data对象确认具体结构。
• 确保使用表单对应的官方嵌入脚本地址，不要混用不同表单的脚本链接。

内容的提问来源于stack exchange，提问作者sfhasfasf