Contact Form 7に完了画面を作成する簡単な方法

前職はトヨタ自動車株式会社、現在は複数のweb制作会社のパートナーとしてCMS・ECサイト構築を担当しております。

• CMS・ECサイト構築歴2年以上
• 制作実績件数200件以上
• 15以上のキーワードで検索結果の5位以内を獲得

• Contact Form 7に完了画面を簡単に作成する方法も知りたいな！

• MW WP Formに乗り換えたら、完了画面がデフォルトの機能で備わっているけれど、普段はMW WP Formを使わないし、乗り換えが面倒だな….

• コピペでササッと使える、簡単で分かりやすいコードを記載してほしいな！

と疑問を抱えている方の悩みを解決できる記事になってます。

この記事を読み終えることで、WordPress初心者の方でも、『Contact Form 7に完了画面を作成する方法』を理解することができます。

Contact Form 7に完了画面を作成する簡単な方法

１）完成後のイメージの共有

本題に入る前に、『Contact Form 7の完了画面』のイメージを共有します。

完了画面の内容は、シンプルに『お問い合わせへのお礼』と『トップページに戻るリンク』を表示させます。

では早速、Contact Form 7に完了画面を作成する方法をご紹介しますね！

２）固定ページに『完了画面』のページを作る

まずはじめに、固定ページに『完了画面』のページを作ります。

1. 管理画面に入る
2. 『固定ページ』をクリック
3. 『新規追加』をクリック
   
4. 『タイトル』を入力（例：お問い合わせ（完了））
5. 『本文』を入力
   （例： この度はお問い合わせありがとうございます……）
6. パーマリンク（URL）を入力
   『thanks』や『finish』などの分かりやすい英数字に設定する
7. 『公開（更新）』をクリック
   

３）Contact Form 7 にコードを追加する

次に、Contact Form 7 の設定画面より、以下のコードを追加してください。

<script>
  document.addEventListener('wpcf7mailsent', function(event) {
    location = 'https://renkosaka.com/thanks/';
  }, false );
</script>

コードを追加する位置はどこでも良いですが、最下部に追加すれば問題ないかと。

このコードを追加することで、送信後に『管理画面ページ』にリダイレクトさせております。

詳しく知りたい方は、以下の記事をご覧になってください。
送信後に異なる URL にリダイレクトさせるには

4）Contact Form 7 にコードを追加したURLを書き換える

先程、追加したコードをご自身の環境に書きえます。

書き換える箇所は、location = ‘〇〇〇〇〇〇’;　の部分です。

例：『完了画面』のページのパーマリンク（URL）が『thanks』
ホームページのURLが、https://renkosaka.com/　の時

location = ‘https://renkosaka.com/thanks/’;

というように書き換えてください。

＊以下のように相対パスでも可能ですが、固定ページの子ページに設定した場合は、パスを間違えないようにしてください。

<script>
  document.addEventListener('wpcf7mailsent', function(event) {
    location = '/thanks/';
  }, false );
</script>

５）動作確認（バグチェック）

最後に『完了画面』が正しく表示されるかを確認します。

正しく表示されていればOKです！

『ありがとうございます。メッセージは送信されました。』をカスタマイズする方法

完了画面ページにリダイレクトする直前に、『ありがとうございます。メッセージは送信されました。』が一瞬表示されるかと思います。

今回は完了画面にリダイレクトするため、意味合いが不自然ですので、２通りの方法でカスタマイズしたいと思います。

解決方法①　『メッセージ』の文言を書き換える

Contact Form 7 の設定画面より、『ただいま送信中です。』というような文言に書き換えます。

＊はみ出ていますが下にスクロールして、『保存』ボタンをクリックしてください。

書き換えるとこのようになります。

解決方法②　『ありがとうございます。メッセージは送信されました。』を非表示にする

以下のコードをCSSに追加することで、非表示にすることが可能です！

.wpcf7-form.sent .wpcf7-response-output {
  display: none;
}

まとめ

今回は、Contact Form 7 に完了画面を作成する方法をご紹介しました。

以上です！