在同一页面上使用相同的 gform 两次答案

【问题标题】：Use the same gform twice on the same page在同一页面上使用相同的 gform 两次
【发布时间】：2019-04-15 03:08:18
【问题描述】：

我的网站需要在同一页面上多次显示相同的表单。

构建表单的插件是Gravity Forms。

我已经对所提供的文档进行了研究，但找不到任何可以完成这项工作的操作。

我想我需要创建一个函数，将创建的每个表单的 ID 存储在一个数组中，并对每个新表单进行比较，这样我就可以更改表单元素的 ID（？？？ )。

有什么猜测吗？

【问题讨论】：

标签： php jquery wordpress gravityforms

【解决方案1】：

通过在 noscript 标记内打印 GravityForm 并在需要表单时从该标记中删除来解决问题。

看例子：

var $formContainer = $(".formContainer");
function hide_form($container) {
  $container.slideUp();
  var add_noscript_tag = "<noscript>" + $container[0].innerHTML + "</noscript>";
  $container.empty();
  $container.append(add_noscript_tag);
}
function show_form($container) {
  var remove_noscript_tag = $container[0].innerHTML
    .replace("<noscript>", "")
    .replace("</noscript>", "");
  $container.empty();
  $container.append(remove_noscript_tag);
  $container.slideDown();
}
$("button").click(function() {
  var $FormContainer = $(this).next();
  if ($FormContainer.is(":visible")) {
    hide_form($FormContainer);
  } else {
    var $otherForm = $(".formContainer:visible");
    if ($otherForm.length > 0) {
      hide_form($otherForm);
    }
    show_form($FormContainer);
  }
});

button {
  margin: 20px 0;
}
.formContainer {
  display: none;
  background: #eee;
}
.formContainer form {
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button>open form 1</button>
  <div class="formContainer">
    <noscript>
      <form>
        <input type="text" value="Name"/>
        <input type="text" value="Phone"/>
        <input type="text" value="Email"/>
      </form>
    </noscript>
  </div>
</div>
<div>
  <button>open form 2</button>
  <div class="formContainer">
    <noscript>
      <form>
        <input type="text" value="Name"/>
        <input type="text" value="Phone"/>
        <input type="text" value="Email"/>
      </form>
    </noscript>
  </div>
</div>

【讨论】：