在提交表单后触发元素弹出(提交后的事件)与联系人表7 [Wordpress]

Question

我使用元素弹出和联系形式7在我的wordpress网站。我要做的是在提交联系人表单7之后触发元素的弹出。

到目前为止，我所做的事情如下。我没有控制台错误。

我的html代码：

<form>
<input id="popup" onclick="return SubmitForm(this.form)" type="button"  name="elementor-popup-modal-1036"  value="Submit request" />
</form>

我的js密码：

document.getElementById("popup").submit= function(){
    elementorProFrontend.modules.popup.showPopup( { id: 1036 } );

}
function SubmitForm(frm) {
  wpcf7.submit(document.querySelector('.wpcf7-form'));
}

问题是，当我提交我的表单时，弹出不会被触发，但是表单会被成功地提交并发送给收件人。当我在js中使用.onclick而不是.submit时，效果很好，并且会触发弹出。但我只需要在提交表单后才能触发这个弹出。

有什么想法吗？谢谢

Answer 1

所以我想通了。我在CF7文档中做了一些研究，我得到了联系人表单7不支持<form>元素。因此，我已经做了一些修改，在我的联系表格7提交后，我的代码打开元素的弹出，这是解决方案。

在contanct 7中，我使用的是默认添加到cf7中的经典提交按钮：

[submit "Send Mail"]

我使用js代码来检查事件wpcf7mailsent，它是在提交表单之后列出的，然后元素弹出窗口是由它的ID触发的，您可以在元素的弹出短代码中找到该ID。

document.addEventListener( 'wpcf7mailsent', function( event ) {
         elementorProFrontend.modules.popup.showPopup( { id: 1036 } ); //your Elementor popup ID here
    }
, false );

这是完整的代码解决方案。代码转到子主题的functions.php主题

add_action( 'wp_footer', 'cf7_elementorpopup' );

function cf7_elementorpopup() {
    ?>
    <script type="text/javascript">
     document.addEventListener( 'wpcf7mailsent', function( event ) {
         elementorProFrontend.modules.popup.showPopup( { id: 1036 } ); //your Elementor popup ID here
    }
, false );
    </script>
    <?php
}

希望你们中的许多人会发现这个解决方案对你的项目有帮助。