Mẫu liên hệ 7 - thêm chức năng tùy chỉnh trên email gửi

Question

Chỉ cần chơi xung quanh với Wordpress/Contact Form 7.

Có thể thêm chức năng javascript tùy chỉnh vào sự kiện gửi email thành công không?

Answer 1

Viết này trong cài đặt thêm ở dưới cùng của trang cấu hình mẫu liên hệ:

on_sent_ok: "some js code here" 

UPDATE: Bạn có thể sử dụng nó để gọi chức năng như thế này:

on_sent_ok: "your_function();" 

Hoặc viết một số mã (trang này chuyển hướng đến trang cảm ơn):

on_sent_ok: "document.location='/thank-you-page/';" 

Answer 2

Ví dụ 1:

on_sent_ok: "location = 'http://mysite.com/thanks/';" 

Ví dụ 2: Ở dạng kịch bản:

<div id="hidecform"> 
<p>You name<br /> 
    [text* your-name] </p> 
... 
</div> 

Sau đó, ở dưới cùng của trang admin trong mục "Cài đặt bổ sung" đặt như sau:

on_sent_ok: "document.getElementById('hidecform').style.display = 'none';" 

Answer 3

Biểu mẫu liên hệ 7 phát ra một số sự kiện Javascript phát sinh đến đối tượng tài liệu. Trong phiên bản 4.1, chúng có thể được tìm thấy trong contact-form-7/includes/js/scripts.js. Nếu bạn đang sử dụng jQuery, bạn có thể truy cập vào những sự kiện như thế này:

$(document).on('spam.wpcf7', function() { 
    console.log('submit.wpcf7 was triggered!'); 
}); 

$(document).on('invalid.wpcf7', function() { 
    console.log('invalid.wpcf7 was triggered!'); 
}); 

$(document).on('mailsent.wpcf7', function() { 
    console.log('mailsent.wpcf7 was triggered!'); 
}); 


$(document).on('mailfailed.wpcf7', function() { 
    console.log('mailfailed.wpcf7 was triggered!'); 
}); 

Answer 4

thử điều này:

$(document).ajaxComplete(function(event,request, settings) { 
    if($('.sent').length > 0){ 
     console.log('sent'); 
    }else{ 
     console.log('didnt sent'); 
    } 

}); 

Answer 5

Chỉ cần một lưu ý nhanh chóng mà on_sent_ok bị phản đối.

Biểu mẫu liên hệ 7 hiện đang sử dụng trình xử lý sự kiện, như thế này;

<script type="text/javascript"> 
    document.addEventListener('wpcf7mailsent', function(event) { 
     if ('11875' == event.detail.contactFormId) { // if you want to identify the form 
     // do something 
     } 
    }, true); 
</script> 

Sau đó thêm điều này vào hành động wp_footer.

như thế này;

add_action('wp_footer', 'wp1568dd4_wpcf7_on_sent'); 

function wp1568dd4_wpcf7_on_sent() { 
    // the script above 
}