【WordPress】Contact Form 7 送信完了ページ追加する方法

WordPressのコンタクトフォームは非常に簡単にお問合せフォームを作成することができます。
ここでは、送信ボタンを押したのち確認画面そして送信完了ページの作成方法をご案内します。

例えば、送信完了ページがあることにより、コンバージョンの測定等の活用ができます。

※また、ページ遷移するお問合せフォームは「MW WP Form」というプラグインがあります。

スポンサーリンク

Contact Form 7 add confirmをインストールする

確認画面は、「Contact Form 7 add confirm」プラグインを使います。

Contact Form 7 add confirm
"Contact Form 7 add confirm" can add confirm step to "Contact Form 7".

管理画面 > プラグイン > 新規追加の画面にて

キーワード検索 : 『 Contact Form 7 add confirm 』を検索

今すぐインストール > 有効化

お問合せフォームを作成

Contact Form 7 の画面に、「確認ボタン」「戻って編集ボタン」が追加されます。

フォームに以下に入力する。

順番は、

  1. [confirm “確認”]
  2. [back “戻る”]
  3. [submit “送信”]

ラベルであったり、idなど自由に設定できます。

[confirm id:kakunin “確認”][back id:modoru “戻る”][submit “送信”][submit id:soshin “送信”]

送信完了のページを作成する

固定ページを新規で、送信完了ページを作成します。

functions.phpにコードを追加する。

ページを遷移するコードをfunctions.phpに追加します。

add_action( 'wp_footer', 'add_thanks_page' );
function add_thanks_page() {
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'https://hogehoge.com/thankspage/'; 
}, false );
</script>
EOD;
}

上記のコードの

location = 'https://hogehoge.com/thankspage/';

の部分を先ほど作成した、送信完了ページのURLを指定してください。

特定のページだけjavascriptを反映させたい

送信完了ページだけに、コンバージョンの測定等でタグを追加したい場合など、特定のページだけjavascriptを追加させたい場合があります。

特定のページの場合

<?php if( is_page( '42' ) ) : ?>
  <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/myscript.js" ></script> 
<?php endif; ?>

 

特定のカテゴリーの場合

<?php if( in_category( array('12','14','33') ) ) : ?> 
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/myscript.js" ></script> 
<?php endif; ?>
<?php if( in_category( array('12','14','33') ) ) : ?> 

上記の・・・ array(’12’,’14’,’33’) ・・・ の数字の部分に反映させたい、カテゴリーIDを記入する。

 

参考にさせて頂きました。ありがとうございます。

Contact Form 7で確認画面と完了画面(サンクスページ)を追加する方法 | HPcode
Contact Form 7で確認画面と完了画面を追加する方法について紹介します! ただし、確認画面については一般的なイメージとは異なりページの遷移はしません。 ※ ページ遷移するお問い合わせフォームがほしい場合は、「MW WP Form」をお試しください。 参考 → 確認画面、完了画面を作りたいなら「MW WP Fo...
特定のページだけでJavaScriptの読み込みした方がいんでない?
前回、独自に作ったJavaScriptをfooter.phpで読み込むことに成功した初心者まちるだ。 JavaScriptからCSS変数の値書き換えの成功に歓喜する裏側で、 とある迷いが生じていたのだ・・・   ...
送信後に異なる URL にリダイレクトさせるには
まず、これから書こうとしている内容は 99.99% のユーザーにとって必要のないものであり、実際、使用を推奨し…
条件分岐タグ - WordPress Codex 日本語版

 

タイトルとURLをコピーしました