javascript - Formstack 嵌入：WordPress 的 HTML 与 JS 问题

Question

我正在运行 Beaver Builder 主题的 WordPress 站点上实现 Formstack 表单。

我们正在尝试将 Google Analytics 连接到此表单。Google Analytics 插件是通过 Formstack 安装的。在 Google Analytics 上，我们可以看到它确实是连接的，但它并没有抓取提交动作。Formstack 告诉我们，这是因为表单是通过 iFrame embed 实现的，因此要使用 JS embed。我们走哪条路对我来说并不重要，但这是我对每一条路的问题：

首先，iFrame。所以，问题又是它无法抓住提交按钮。相反，我们可以通过使用感谢页面来计算表单提交。但是，点击提交按钮后的重定向会在 iFrame 中打开感谢页面，并且它不会被计入 Google Analytics（分析）。这是 iFrame 代码 - 它是通过使用 Beaver Builder 的 HTML 模块实现的：

<iframe src="https://samplename.formstack.com/forms/stayintouchform_new" title="NEW- Stay in touch (Constant-Contact)" width="600" height="400"></iframe>

使用 JS 嵌入将使我们不必担心重定向 iFrame 问题，只需使用提交按钮或感谢页面（或两者）。但是，我们使用 iFrame 嵌入的原因是因为我们收到 1,000 多个控制台警告说：“无法在 'Document' 上执行 'write'：无法从异步加载的外部脚本写入文档除非它被明确打开”。该表单也不会显示在私人浏览器窗口中（它会出现在非私人窗口中）。我试图通过将其与 postscribe 一起使用来绕过此警告：https ://gist.github.com/matt-bailey/994357a41f39d06b82644c4f429547fa我确实还从此处在页面标题中包含了 postscribe 脚本：https ://github.com /krux/postscribe

我的代码：

<div class="webform">
    <!-- Empty div (must have a unique ID), into which the form will be loaded -->
    <div id="formstack-subscribe-form"></div>
    <script type="text/javascript">// <![CDATA[
    // Only run the code below when jQuery says the document is ready
    (function($) {
      // Process the form using postscribe:
      // 1. Must reference the unique ID of the div above
      // 2. Must contain the embed URL from Formstack
      // 3. Must contain the selectBoxes() function in the `done` callback to style any select lists in the form
      postscribe('#formstack-subscribe-form', '<script src="https://samplename.formstack.com/forms/js.php/stayintouchform_new?nojquery=1&nojqueryui=1&nomodernizr=1&no_style=1&no_style_strict=1"><\/script>', {
        done: function() {
          // Style select lists
          $('.webform select').selectBoxes();
        }
      });
    })(jQuery);
    // ]]></script>
</div>

我得到的不是一个漂亮的嵌入式表单，而是 "', { done: function() { // 样式选择列表 $('.webform select').selectBoxes(); } }); })(jQuery); // ] ]>" 作为表单应该存在的文本。

我非常感谢任何指导！

标签： javascriptjquerywordpressiframeformstack