web-dev-qa-db-ja.com

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

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

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

wordpresswordpress-plugincontact-form-7
9
Iladarsda

お問い合わせフォームの設定ページの下部にある追加の設定でこれを記述します。

on_sent_ok: "some js code here"

更新：これを使用して、次のような関数を呼び出すことができます。

on_sent_ok: "your_function();"

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

on_sent_ok: "document.location='/thank-you-page/';"
27
Igor Jerosimić

Contact Form 7は、ドキュメントオブジェクトにバブルアップする多数のJavascriptイベントを発行します。バージョン4.1では、contact-form-7/include/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!');
});
26
likesalmon

これを試して：

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

});
3
Erez Lieberman

例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';"
2
Clevelus

On_sent_okは非推奨になっていることに注意してください。

お問い合わせフォーム7は現在、次のようなイベントリスナーを使用しています。

<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>

次に、これをwp_footerアクションに追加します。

このような;

add_action( 'wp_footer', 'wp1568dd4_wpcf7_on_sent' );

function wp1568dd4_wpcf7_on_sent() { 
  // the script above
}
1
Chris Pink