使用联系表单 7 [Wordpress] 提交表单后触发 Elementor 的弹出窗口（提交后的事件）答案

【问题标题】：Trigger Elementor's popup after submitting form (Event after submit) with contact form 7 [Wordpress]使用联系表单 7 [Wordpress] 提交表单后触发 Elementor 的弹出窗口（提交后的事件）
【发布时间】：2021-04-06 19:53:19
【问题描述】：

我在我的 wordpress 网站上使用 Elementor 弹出窗口和联系表 7。我要做的是在提交联系表单 7 表单后触发 elementor 的弹出窗口。

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

我的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 时，它工作得很好并且会触发弹出窗口。但是我需要在提交表单后触发此弹出窗口。

有什么想法吗？谢谢

【问题讨论】：

你不是说onsubmit吗？
我试过 onsubmit 和 submit 但没有帮助。仅在设置 onclick 时才有效。 ://

标签： javascript html jquery wordpress

【解决方案1】：

所以我想通了。我对 CF7 文档进行了一些研究，发现联系表 7 不支持 HTML <form> 元素。所以我在我的代码中做了一些修改，以便在我的联系表单 7 提交后打开 Elementor 的弹出窗口，这是解决方案。

在联系表格 7 中，我使用的是默认添加到您的 cf7 中的经典提交按钮：

[submit "Send Mail"]

我使用 js 代码检查事件 wpcf7mailsent ，该事件在提交表单后列出，然后 elementor 弹出窗口由它的 ID 触发，您可以在 Elementor 的弹出窗口短代码中找到该 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
}

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

【讨论】：