【contact form7】on_sent_ok廃止に伴うDOMイベントの複数設定について

解決済 mikujin
(@mikujin)

6年、 4ヶ月前
お世話になります。
コンタクトフォーム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が6年、 4ヶ月前に変更しました。
- このトピックはmikujinが6年、 4ヶ月前に変更しました。
- このトピックはmikujinが6年、 4ヶ月前に変更しました。
- このトピックはmikujinが6年、 4ヶ月前に変更しました。

4件の返信を表示中 - 1 - 4件目 (全4件中)

kazuyk
(@kazuyk)

6年、 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;
}
```
トピック投稿者 mikujin
(@mikujin)

6年、 4ヶ月前
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
kazuyk
(@kazuyk)

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

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

下記の部分が、「フォームが送信されたら〇〇を実行する」という機能を設定しています。
```
document.addEventListener( 'wpcf7mailsent', function( event ) {
	// (処理内容)
}, false );
```
function の波括弧 { } の中にif節を書く必要があります。
トピック投稿者 mikujin
(@mikujin)

6年、 4ヶ月前
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イベントの複数設定について」には新たに返信することはできません。