Question

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

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

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter</artifactId>
        <exclusions>
            <exclusion>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-logging</artifactId>
            </exclusion>
        </exclusions>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-log4j2</artifactId>
    </dependency>
</dependencies>

** 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默认情况下会在noconflict模式下加载jQuery：）

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

Ajax在点击div元素时提交联系表格7表格

1 个答案: