【Contact Form7】サンクスページへの遷移

はじめに

概要

このプラグインはフォームを構築する上で非常に便利です。自動返信メールの設定が簡単で、とても人気があります。しかし、このプラグインはサンクスページへの遷移する機能は基本的にできない仕様です。今回はプラグインを使わずに、送信した際にサンクスページへ遷移する方法を解説します。※実装はバックアップを取った上、テスト環境での実装をおすすめします。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

読者

Contact Form7サンクスページへの遷移(プラグインなし)は、最初にどこを理解するとよいですか？

木村

画面を作るだけでなく、必須項目の検証、送信結果、迷惑投稿対策までを一つの流れとして確認することが大切です。

読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

参考サイト

参考サイトでは、【Contact Form7】サンクスページへの遷移(プラグインなし) #3/3を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

この度の記事を書くにあたり、「じゅうぺいブログ」様のウェブサイトを参考にさせていただきました。特にこちらのページでは、貴重な情報を得ることができ、深い洞察につながりました。じゅうぺい様、素晴らしいコンテンツをありがとうございます。リンクはこちら

参考サイトで押さえたいポイント

参考サイトは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

参考サイトの確認方法

未入力・誤入力・正常入力の三つを試し、確認画面、完了画面、通知メール、管理側の記録まで確認します。スパム対策は表示の有無だけでなく、サーバー側で検証されているかも確認してください。

サンクスページの作成

サンクスページの作成では、【Contact Form7】サンクスページへの遷移(プラグインなし) #3/3を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

まずは固定ページにサンクスページを作成し、コンテンツを記述します。参考画像

ここではパーマリンクをthanksと記述しています。次に送信ボタンを押した際に、このページに遷移するようにfunctions.phpに以下を記述します。

functions.php

// Contact Form7の送信ボタンをクリックした後の遷移先設定
add_action('wp_footer', 'add_origin_thanks_page');
function add_origin_thanks_page()
{
    $thanks = home_url('/thanks/');
    echo <<< EOC
     <script>
       var thanksPage = {
         24: '{$thanks}'
       };
     document.addEventListener( 'wpcf7mailsent', function( event ) {
       location = thanksPage[event.detail.contactFormId];
     }, false );
     </script>
   EOC;
}

記述の変更が必要なところは以下の2点です。 – 5行目 $thanks = home_url(‘/thanks/’); – 9行目 24: ‘{$thanks}’

$thanks = home_url(‘/thanks/’);

こちらの「thanks」は遷移先のサンクスページで設定したパーマリンクを記述してください。

24: ‘{$thanks}’

上記の24というのはcontact form7の投稿IDになります。

【Contact Form7】サンクスページへの遷移(プラグインなし) #3/3の解説画像 1

少し分かりにくいかもしれませんが、上記のフォームタイトルではなく、応募フォームをマウスオーバーした際に画面下に表示されるpost24を入力することになります。これが投稿IDです。注意点としては、ショートコードのIDではないことを覚えておいてください。

デザインの調整

デザインの調整では、【Contact Form7】サンクスページへの遷移(プラグインなし) #3/3を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

これでサンクスページに遷移するようになりました。しかし、遷移する際に本来の送信完了メッセージのチラつきが発生してしまうため、このメッセージを非表示にする必要があります。これはCSSでクラスを指定し調整できます。 .wpcf7-form.sent .wpcf7-response-output 上記のクラスを指定することで送信完了メッセージを削除することができます。

/********************************
送信完了テキストの削除
*********************************/
.wpcf7-form.sent .wpcf7-response-output {
  display: none;
}

以上です。こちらはプラグインなしで実装でき、ユーザーアビリティが向上しますのでぜひ実装してみてください。なお、実装にはテスト環境を構築するか、子テーマでの実装とバックアップを取ることをおすすめします。

デザインの調整で押さえたいポイント

デザインの調整は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

デザインの調整の確認方法

実装前に確認しておきたいこと

ここでは、Contact Form7サンクスページへの遷移(プラグインなし)を実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。

作業の目的と変更範囲を決める

画面を作るだけでなく、必須項目の検証、送信結果、迷惑投稿対策までを一つの流れとして確認することが大切です。サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。

元の状態へ戻せるようにする

テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。

よくあるつまずきと確認方法

Contact Form7サンクスページへの遷移(プラグインなし)が期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。

変更が反映されない場合

保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。

公開前の最終確認

まとめ

Contact Form 7のデフォルト設定ではサンクスページへのページ遷移は行われない
プラグインを使用することで上記の設定が可能になる
プラグインの使用には互換性の問題も考慮しなければならない
プラグインを使用せずにページ遷移を行うことも可能である
テスト環境を構築し、子テーマでコードおよびバックアップを取ることが重要である
サンクスページの作成→functions.phpにコードを記述→デザインの調整といった流れになる
重要な箇所は、投稿IDの設定とサンクスページのパーマリンクの設定である

【Contact Form7】サンクスページへの遷移(プラグインなし) #3/3

目次