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

Question

I'm using the Contact Form 7 plugin to run a simple form on my site, but I'd like to style the submit button to reflect the other buttons on my site. Doing so requires the use of pseudo elements, which isn't possible with input elements.

I've adjusted the form markup to use a div as a submit button (below), but as it's just a default submit onClick, it refreshes the page. Is there a way to hook this in to the CF7 AJAX submit rather than the default action so that executes the same way as if I were using the CF7 submit button (no page refresh)?

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

** general-contact is the name of the form to be submitted **

Answer 1

There's a couple of ways - but usually just triggering the submit event for the form or click event on the submit button via jQuery are the simplest

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

or triggering a click on the submit button:

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

Should do the trick!

By the way - if using in an onclick attribute you may need to change the $ to jQuery as WordPress loads jQuery in noconflict mode by default :)

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