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

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

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

 

  • Contact Form 7に完了画面を簡単に作成する方法も知りたいな!
  • MW WP Formに乗り換えたら、完了画面がデフォルトの機能で備わっているけれど、普段はMW WP Formを使わないし、乗り換えが面倒だな….

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

 

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

 

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

 

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

1)完成後のイメージの共有

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

 

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

 

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

 

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

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

 

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

 

3)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>

 

5)動作確認(バグチェック)

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

 

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

 

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

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

 

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

 

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

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

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

 

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

 

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

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

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

 

まとめ

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

 

以上です!

SNSでもご購読できます。