サポート » プラグイン » 【contact form7】on_sent_ok廃止に伴うDOMイベントの複数設定について

  • 解決済 mikujin

    (@mikujin)


    お世話になります。
    コンタクトフォーム7のプラグインを使用しています。
    これまで、on_sent_okで、フォーム送信後、別ページへリダイレクトしていましたが、2017年度に非推奨になるようで、DOMイベントを変わりに使用するように言われました。

    そこで質問なのですが、以下のコードをfunctions.phpに記述しました。
    以下は、指定した固定ページかつ指定したコンタクトフォームのIDから、送信した場合に、指定したURLに飛ばすという内容です。
    動作確認済みです。

    function add_footer_script() {
    	if(is_page('entryform')){ //固定ページのパーマリンク
    		echo '<script type="text/javascript">
            document.addEventListener( \'wpcf7mailsent\', function( event ) {
              if ( \'1515\' == event.detail.contactFormId ) { //コンタクトフォームのID
                location = \'/sent_ok\'; //フォーム送信後の飛ばしたいリンク先
              }
            }, false );
          </script>';
    	}
    }
    add_action( 'wp_print_footer_scripts', 'add_footer_script', 100 );

    上記にプラスして、複数のコンタクトフォームがあり、フォーム送信後、飛ばしたいリンク先も複数あります。
    この場合、上記のコードをどのように追加すれば良いのでしょうか?
    色々試しましたが、エラーになりページが真っ白になってしまい、こちらで質問させて頂きました。

    ご教示頂ければ幸いです。宜しくお願いいたします。

    • このトピックはmikujinが2年、 5ヶ月前に変更しました。
    • このトピックはmikujinが2年、 5ヶ月前に変更しました。
    • このトピックはmikujinが2年、 5ヶ月前に変更しました。
    • このトピックはmikujinが2年、 5ヶ月前に変更しました。
4件の返信を表示中 - 1 - 4件目 (全4件中)
  • フォームがある固定ページを指定する箇所を

    if ( is_page( 'slug1' ) || is_page( 'slug2' || ・・・ ) ) {
    

    のように複数にして、フォームIDとリダイレクト先の組み合わせのif節を複数ならべればよいと思いますが。
    あるいは switch case にするとか。

    switch ( event.detail.contactFormId ) {
    	case \'123\':
    		location = \'url1\';
    		break;
    	case \'456\':
    		location = \'url2\';
    		break;
    }
    

    kazuyk様、ご返信頂きありがとうございます。
    早速、ご教示頂いた内容で以下のタグを作成しました。

    function add_footer_script() {
    if ( is_page( 'entryform' ) || is_page( 'entryform2' || ・・・ ) ) {
    		echo '<script type="text/javascript">
            document.addEventListener( \'wpcf7mailsent\', function( event ) {
    
              if ( \'1515\' == event.detail.contactFormId ) { //コンタクトフォームのID
                location = \'/sent_ok\'; //フォーム送信後の飛ばしたいリンク先
              }
            }, false );
    
     if ( \'1516\' == event.detail.contactFormId ) { //コンタクトフォームのID
                location = \'/sent_ok2\'; //フォーム送信後の飛ばしたいリンク先
              }
            }, false );
    
          </script>';
    	}
    }
    add_action( 'wp_print_footer_scripts', 'add_footer_script', 100 );

    更新したところ、ページは空白にはならなかったものの、送信後指定したリンク先へ飛ばす動作は確認出来ませんでした。
    IF節を並べて使用する箇所に記述方法の誤りがあるのでしょうか?

    再度、ご教示頂ければ大変助かります!
    宜しくお願いいたしますm(_ _)m

    最初のコード例でタイプミスしました、すみません。括弧の位置がおかしかったので訂正します。
    if ( is_page( 'slug1' ) || is_page( 'slug2' ) || ・・・ ) ) {

    なお、・・・と書いたのは、フォームを入れたページが3つ以上の場合に、同様に続くという意味で書いただけですので、2ページだけなら下記です。(念のため)
    if ( is_page( 'slug1' ) || is_page( 'slug2' ) ) {

    下記の部分が、「フォームが送信されたら〇〇を実行する」という機能を設定しています。

    document.addEventListener( 'wpcf7mailsent', function( event ) {
    	// (処理内容)
    }, false );
    

    function の波括弧 { } の中にif節を書く必要があります。

    kazuyk様、ご返信頂きありがとうございます。
    こちらのコードはそうだったのですね。
    if ( is_page( 'slug1' ) || is_page( 'slug2' ) || ・・・ ) ) {
    そうとは気づかず申し訳ありません。

    結果、複数のIDごとにそれぞれ異なるリンク先へ飛ばす設定を以下のコードで実装できました。

    
    function add_footer_script() {
    if ( is_page( 'entryform' ) || is_page( 'entryform2' )) {
    		echo '<script type="text/javascript">
            document.addEventListener( \'wpcf7mailsent\', function( event ) {
     if ( \'1515\' == event.detail.contactFormId ) {
                location = \'/sent_ok\';
              }
     if ( \'1516\' == event.detail.contactFormId ) {
                location = \'/sent_ok2\';
              }
    }, false );
          </script>';
    	}
    }
    add_action( 'wp_print_footer_scripts', 'add_footer_script', 100 );
    

    とても助かりました!ありがとうございます\(^o^)/

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「【contact form7】on_sent_ok廃止に伴うDOMイベントの複数設定について」には新たに返信することはできません。