單擊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>