contact form7でサンクスページへ遷移

概要
※contact form7でサンクスページに遷移したい。
※javascriptの「on_sent_ok」は2017年内に廃止予定。
※代替案としてfunction.phpに変更を加える。

通常、別ページへリダイレクトする場合

//functions.phpファイルに以下を記載
 
<?php
 
//ここから
add_action( 'wp_footer', 'mycustom_wp_footer' );
 
function mycustom_wp_footer() {
?>
<script type="text/javascript">
  if(jQuery('.wpcf7').length){ //formのclassが存在するか判定
    var wpcf7Elm = document.querySelector( '.wpcf7' );
    wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
     location.replace('遷移先のURL');
   }, false );
  }
</script>
<?php
}
 
//ここまで
 
?>

複数ページでリダイレクトを使用する場合

管理画面からページ作成

※例えばコンタクトフォームを「メール相談」と「予約フォーム」の2種類作ったとする。
メール相談のURLは
ドメイン名/contact/
そのページのサンクスページは
ドメイン名/contact/complete/

同様に予約フォームのURLは
ドメイン名/reserve/
そのページのサンクスページは
ドメイン名/reserve/complete/

fanction.phpを書き換え

コンタクトフォームを設置したページ、/contact/のページを開き
F12キーで「class="wpcf7"」のコード部分を確認。


同列のidをコピー
メール相談部分の下記コード内if(jQuery('#wpcf7-f145-p62-o1') を2箇所ずつ書き換える。
同様に予約フォームif(jQuery('#wpcf7-f175-p54-o1') もIDを調べて書き換える。
※書き換えるIDはフォーム毎に異なります。
//functions.phpファイルに以下を記載
 
<?php
//ここから


add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
?>
<script type="text/javascript">
// メール相談
  if(jQuery('#wpcf7-f145-p62-o1').length){ //formのIDが存在するか判定,#を書き換える
    var wpcf7Elm = document.querySelector( '#wpcf7-f145-p62-o1' );
    wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
     location.replace('ドメイン名/contact/complete/'); //サンクスページのURLに変更
   }, false );
  }
// 予約フォーム
  if(jQuery('#wpcf7-f175-p54-o1').length){ //formのIDが存在するか判定,#を書き換える
    var wpcf7Elm = document.querySelector( '#wpcf7-f175-p54-o1' );
    wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
     location.replace('ドメイン名/reserve/complete/'); //サンクスページのURLに変更
   }, false );
  }
</script>
<?php
}

 
//ここまで
?>
Spread the love
2018.02.22(木)