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

Question

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

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

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

** 一般联系方式是要提交的表格的名称**

Answer 1

有两种方法-但通常最简单的方法是触发表单的Submit事件或通过jQuery提交按钮上的click事件

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

或触发“提交”按钮的点击：

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

应该做的把戏！

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

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