web-dev-qa-db-ja.com

お問い合わせフォーム7の送信時にJavaScript関数を呼び出す

私はWordpressのContactForm 7を使用しており、SkinBeautyをテーマにしています。私がやりたいのは、作成したフォームが送信されたときに特定のJavaScript関数を呼び出すことです。

私のHTMLコードでは、次のようなフォームを作成しています。

<form onsubmit="checkvalue()">
...
</form>

そして、HTMLコードの本文の最後に、フォームで実行したい検証を使用してJavaScript関数を作成しています。

<script language="JavaScript" type="text/javascript">
   function checkvalue() {
   ...
   }
</script>

別のテーマ（Twenty Thirteen）のコードをContact Form 7で試しましたが、奇妙なことに、問題はありませんでした。

Twenty Thirteenテーマで正しく実行される理由を誰かに教えてもらえますが、Skin Beautyではそうではありませんか？フォームのonsubmitでJavaScript関数を使用する方法はありますか？

wordpresscontact-form-7
4
Nikos K

承認された回答は、セキュリティ/コードの潜在的な脆弱性の理由で非推奨になりました。ContactForm7の作成者は制御できません。詳細はこちら： https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

代わりに、DOMイベントwpcf7submitをインターセプトする必要があります-詳細はここにあります： https://contactform7.com/dom-events/

特定の例では、ショートコードのIDであるフォームのIDを見つけます。数が123であると想像してみましょう（おそらくそうではありませんが）。

document.addEventListener( 'wpcf7submit', function( event ) {
    if ( '123' == event.detail.contactFormId ) {
        alert( "The contact form ID is 123." );
        // do something productive
    }
}, false );

上記の例のように。 2つの問題があります。1つは、フォーム値がこのリスナーに渡される場所がわからないことと、この時点でフォーム値が表示されなくなる可能性があることです。これは、（2番目の問題）このイベントは送信後に発生し、送信前にイベントを実行する必要があるため、onsubmitイベントはおそらく適切なトリガーではないためです。フォームの送信は、「送信」ボタンがクリックされた後に行われます。ここで承認された回答： jQueryのフォーム7呼び出し送信イベントに連絡 フォーム全体が送信される前に、ボタンがクリックされた時点でDOMをインターセプトします。これが私がとるアプローチです。

次のように、リスナーをfunctions.phpに追加できることを忘れないでください。

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
    ?>
    <script type="text/javascript">
        var wpcf7Elm = document.querySelector( '.wpcf7' );

        wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
            alert( "Fire!" );
        }, false );
    </script>
    <?php
}
4
Simon Brown

送信する前に何かをしたい場合は、jQueryのSubmit（）関数を使用できます。 jQueryのドキュメントによると、「これは実際の送信前に発生します」。ボタンではなく、フォーム要素にアタッチする必要があります。

$('.wpcf7-form').submit(function() {
    //your code here
});
1
Ben

編集：参照されているオプションが廃止された（および削除された）ため、この回答は古くなっています。最新の方法については、 サイモンの答え を参照してください。

Twenty 13についてはよくわかりませんが、Contact Form 7を使用してフォームを送信するときに関数を呼び出す正しい方法は、 にon_submitオプションを追加することです。追加設定 フォームのセクション。

これにより、コードがContact Form 7のルーチンに適切にフックされ、適切なタイミングで呼び出されるようになります。

外観は次のとおりです。

enter image description here

これらの追加設定のいずれか、または両方を含めることができます。

ドキュメントによると：

on_sent_ok:の後に1行のJavaScriptコードを設定すると、メールが正常に送信されたときに実行する必要のあるコードを連絡先フォームに伝えることができます。同様に、on_submit:を使用すると、結果に関係なく、フォームが送信されたときに実行する必要があるコードを指定できます。

また、独自の<form>タグを作成するべきではないことに注意してください。ショートコード（例：[contact-form-7 id="10"]）を介してフォームを含めると、Contact Form 7がこれを行い、独自のタグを作成すると意図しない結果が生じます。

検証に興味があるので、Contact Form 7についても読むことをお勧めします プラグイン可能なサーバー側の検証オプション （この場合、クライアント側の検証を行おうとしていることはわかっていますが） 。

0
Tim Malone

footer.phpファイルの最後にjavascript関数を追加しました：

<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
  //Your code here
  }, false );
</script>

これは、Webサイト内に単一のフォームがある場合にのみ機能します。

0
Christian