如何在Contact Form 7提交成功后触发magnificPopup弹窗

方法1：结合后端wpcf7_mail_sent钩子触发弹窗 #

你已经在functions.php里搭好了钩子框架，接下来只需要在这个函数里添加一段内联脚本，给前端传递“触发弹窗”的信号就行。这里推荐用wp_add_inline_script来确保触发代码在你的custom.js之后加载，避免执行顺序问题：

add_action( 'wpcf7_mail_sent', 'after_send_mail_from_contact_form' );
function after_send_mail_from_contact_form($contact_form){
    // 可选：只针对特定表单触发弹窗（替换成你的表单ID）
    $target_form_id = 123;
    if ( $contact_form->id() === $target_form_id ) {
        // 这里的"custom-script"是你注册custom.js时用的脚本句柄，要和实际一致
        wp_add_inline_script( 'custom-script', 'triggerSuccessPopup();' );
    }
}

注：如果你还没注册custom.js，可以在functions.php里加这段代码来注册（路径根据你的主题结构调整）：

wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true );

然后在你的custom.js里，新增一个触发弹窗的函数，同时保留原有的初始化代码：

// 保留你原有的magnificPopup初始化
$('.pay_for_course').magnificPopup({
    disableOn: 700,
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 160,
    preloader: false,
    fixedContentPos: false
});

// 添加弹窗触发函数
function triggerSuccessPopup() {
    $('.pay_for_course').magnificPopup('open');
}

方法2：直接用Contact Form 7前端事件（更简洁） #

其实CF7自带前端事件监听，不需要后端钩子也能实现，适合不需要额外后端逻辑的场景：

直接在custom.js里添加事件监听，表单提交成功时自动触发弹窗：

// 保留原有的magnificPopup初始化
$('.pay_for_course').magnificPopup({
    disableOn: 700,
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 160,
    preloader: false,
    fixedContentPos: false
});

// 监听CF7提交成功事件
document.addEventListener( 'wpcf7mailsent', function( event ) {
    // 可选：只针对特定表单触发（替换成你的表单ID）
    if ( event.detail.contactFormId === '123' ) {
        $('.pay_for_course').magnificPopup('open');
    }
}, false );

小提示 #

• 表单ID可以在CF7编辑页面的短代码里找到（比如[contact-form-7 id="123" title="我的表单"]里的123）
• 确保jQuery和magnificPopup脚本都已正确加载，没有冲突
• 如果用方法1，一定要保证wp_add_inline_script里的脚本句柄和你注册custom.js时的名称完全一致

内容的提问来源于stack exchange，提问作者Anubhav