Ajax 单击 div 元素提交联系表格 7 表格

Question

我正在使用 Contact Form 7 插件来运行我网站上的一个简单表单，但我想设计提交按钮的样式以反映我网站上的其他按钮。这样做需要使用伪元素，这对于输入元素是不可能的。

我已经调整了表单标记以使用 div 作为提交按钮（如下），但由于它只是默认提交 onClick，它会刷新页面。有没有办法将其连接到 CF7 AJAX 提交而不是默认操作，以便执行方式与我使用 CF7 提交按钮（无页面刷新）相同？

<div class="main-btn" onClick="document.forms['general-contact'].submit()">
 <span>Submit</span>
</div>

** general-contact 是要提交的表格的名称 **

Answer 1

有几种方法 - 但通常只需通过 jQuery 触发表单的提交事件或提交按钮上的点击事件是最简单的

$(document.forms['general-contact']).trigger( "submit" );

或触发提交按钮的点击：

$(document.forms['general-contact']).find('input[type="submit"], input[type="image"]').trigger( "click" );

应该成功！

顺便说一句 - 如果在 onclick 属性中使用，您可能需要将 $ 更改为 jQuery，因为 WordPress 默认在无冲突模式下加载 jQuery： )

<div class="main-btn" onclick="jQuery(document.forms['general-contact']).trigger( "submit" );">
 <span>Submit</span>
</div>

Ajax submit contact form 7 form on click of div element