在同一页面上两次使用相同的 gform
Use the same gform twice on the same page
我在一个需要在同一页面上多次显示相同表单的网站上工作。
构建表单的插件是Gravity Forms。
我已经研究了所提供的文档,但我找不到任何可以完成这项工作的操作。
我想我需要创建一个函数,将创建的每个表单的 ID 存储在一个数组中,并对每个新表单进行比较,这样我就可以更改表单元素的 ID(? ??).
有什么猜测吗?
通过在 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>
我在一个需要在同一页面上多次显示相同表单的网站上工作。
构建表单的插件是Gravity Forms。
我已经研究了所提供的文档,但我找不到任何可以完成这项工作的操作。
我想我需要创建一个函数,将创建的每个表单的 ID 存储在一个数组中,并对每个新表单进行比较,这样我就可以更改表单元素的 ID(? ??).
有什么猜测吗?
通过在 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>