如何在成功提交联系表单 7 后打开弹出窗口

Question

我正在使用Wordpress和Contact Form 7。 我需要使用 magnificPopup js 显示一个弹出窗口，该弹出窗口将在成功提交联系表单后出现。 为wpcf7_mail_sent添加了一个钩子，但是我如何调用弹出窗口来显示使用javascript。

例：

在函数中.php

add_action( 'wpcf7_mail_sent', 'after_send_mail_from_contact_form' );
function after_send_mail_from_contact_form($contact_form){
// what to do here 
}

在自定义.js文件中

$('.pay_for_course').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});

Answer 1

试试这个 #create 引导模式弹出窗口，然后在函数中添加此功能.php

<?php add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '34' == event.detail.contactFormId ) { // Change 34 to the ID of the form 
jQuery('#myModal2').modal('show'); //this is the bootstrap modal popup id
}
}, false );
</script>
<?php  } ?>

#OR

add_action('wpcf7_mail_sent', function ($cf7) {
// Run code after the email has been sent
$wpcf = WPCF7_ContactForm::get_current();
$wpccfid=$wpcf->id;
// if you wanna check the ID of the Form $wpcf->id
if ( '34' == $wpccfid ) { // Change 34 to the ID of the form 
echo '
<div class="modal fade in formids" id="myModal2" role="dialog" style="display:block;" tabindex="-1">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content no_pad text-center">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<div class="modal-header heading">
<h3 class="modal-title">Message Sent!</b></h3>
</div>
<div class="modal-body">

<div class="thanku_outer define_float text-center">
<h3>Thank you for getting in touch!</h3>
</div>
</div>
<div class="modal-footer">
</div>
</div>

</div>
</div>
';
}
});

Answer 2

$('.wpcf7-mail-sent-ok').change(function(){ $('#form_success').fadeIn(400).addClass('modal-show').find('.modal-content-block-title').text($(this).text()); });

Answer 3

将此代码放在自定义 js 文件中，并创建一个 Bootstrap 弹出窗口。代码将在 4 秒后自动隐藏弹出窗口。

document.addEventListener(
"wpcf7mailsent",
function (event) {
if ("7" == event.detail.contactFormId) {
//place your contact form id number
jQuery("#myModal").modal("show");
}
setTimeout(function () {
jQuery("#myModal").modal("hide");
}, 4000);
},
false
);

Answer 4

请查看我开发的插件，以在联系人表单 7 消息上添加自定义样式，该消息专为设置消息的自定义样式而开发， 即使您可以手动管理联系人表单 7 消息的整个样式，我希望该插件适合您。

从 Github 上的以下链接下载插件，并按照自述文件.txt 文件中提供的说明了解更多详情。

https://github.com/basirebadi/contact-form-7-Messages-Styles