wordpress - お問い合わせフォーム7-メール送信にカスタム機能を追加

Question

で遊んでWordpress / Contact Form 7ください。

成功したメール送信イベントにカスタムJavaScript関数を追加することは可能ですか？

Answer 1

Contact Form 7 は、ドキュメント オブジェクトにバブリングする多数の Javascript イベントを発行します。バージョン 4.1 では、contact-form-7/includes/js/scripts.js にあります。jQuery を使用している場合は、次のようにこれらのイベントにアクセスできます。

$(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 2

お問い合わせフォーム設定ページの下部にある追加設定にこれを書き込みます。

on_sent_ok: "some js code here"

更新: 次のような関数を呼び出すために使用できます。

on_sent_ok: "your_function();"

または、いくつかのコードを記述します (これは、ありがとうページにリダイレクトされます)。

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

Answer 3

例 1:

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

例 2: フォーム スクリプト内:

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

次に、管理ページの下部にある [追加設定] の下に次のように入力します。

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