WordPressのプラグイン「contact form7」でお問い合わせフォームを作ったけれども、サンクスページが出てこないことがモヤっとしていました。
フォーム送信後に画面が切り替わって「ご予約ありがとうございます！」とか「お問い合わせありがとうございます！」とかって表示されて、しっかりお礼を伝えたいっ！と思うのに、実際に出てくるのは、フォームの１番最後に１行だけ。
たった１行、ぺろっとサンクスメッセージが表示されるだけでは味気ないし、送信者が見落としてしまいますよね。
お相手が「きちんと送れたのかな…」と不安になってしまいます。
ということで、contact form7で、簡単にサンクスページを作る方法をご紹介します。
- function.phpを触るなど難しい設定なし！
- プラグインなし！
でできる、WordPress初心者さんでも、簡単に設定できる方法をご紹介します。
これからお伝えする設定方法は、
私がクライアント様のサイトにサンクスページを導入する際に、
- テーマエディターを触るのがこわい（画面が真っ白になる危険あり）
- プラグイン「Redirection for Contact Form 7」で設定しても上手に飛ばない
- 追加CSSに書き込んでも上手に飛ばない
という経験を踏まえて、１番簡単にできた方法です。
この記事の内容
固定ページにサンクスページを作る
まずは、固定ページにサンクスページを作ります。
フォーム送信後に、表示させたい画面（ページ）を用意しましょう。
コンタクトフォームを触る前に、
固定ページで表示させたいページを作るんです♪
設定場所：固定ページ→新規追加
パーマリンク（URL）は「thanks」「page-thanks」などにすると分かりやすくていいですね♪
サンクスページの文章ができたら「公開」してください。
サンクスページに書いておくと良い内容
サンクスページ には、
- お問い合わせ／ご予約／お申し込みのお礼メッセージ
- フォームの送信が完了したこと
- 自動返信メールが届くこと
- 自動返信メールが届かない場合の対処方法
- 返答は誰からいつくるのか
などを書いておくのがおすすめです。
他には
- 公式LINEへの登録
- SNSフォロー
などを促す文章を書くのもいいですね。
コンタクトフォームにサンクスページを追加する（コピペでOK）
固定ページで、サンクスページ（表示させたいページ）が完成したら、フォーム送信後に自動でそのページに飛ぶように設定をしていきます。
フォーム部分に、サンクスページに飛ぶように追加するだけなので、簡単ですよ。
なお、contact form7のプラグインで、すでにフォームを作っていることが前提です。
設定場所：お問い合わせ→コンタクトフォーム→サンクスページを設定したいフォームの「編集」→フォーム
フォームの「送信ボタン」の後に、コードを追加します。
↓コードを追加するするのはここです
下記のコードをコピーして、貼り付けてください。
<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location = ‘https://haconomiseonde.com/thanks/’;
}, false );
</script>
「https://example.com/」は、あなたが表示させたいURLを入れてくださいね！
コードを貼り付けたら「保存」します。
contact form7の公式サイトにも載っている方法なので、併せてご確認くださいね。
→contactform7「送信後に異なる URL にリダイレクトさせるには」
コンタクトフォームのメッセージ表示を設定してスマートな流れを作る
contact form7の元々の設定によって、フォームの下にはメッセージがチラッと見えてしまいます。
そのメッセージ内容を、よりナチュラルなメッセージに変更することをおすすめします。
＼完成イメージがこちら／
相手が送信ボタンを押すと、
送信時に「送信中…」が表示されます。
設定場所：コンタクトフォーム→メッセージ→「メッセージが正常に送信された」の欄
contact form7の設定上、元々「メッセージが正常に送信された」の欄には、メッセージが入っています。
こちらの文字を消して、フォーム送信中に表示させたいメッセージを入れます。
メッセージを変更したら「保存」を押して終わりです。
写真を使ってご説明すると…
↓
↓
メッセージ例
- 送信中…
- ただいま送信中です
- 送信中なのでこのままお待ちください
以上で完成です。
きちんと機能するか、自分自身でテスト送信を必ず行なってくださいね♪
うまく機能しない場合
上記のとおり設定したのに、うまく機能しないという場合は、入力したコードを見直してください。
確認１
URLを入力する際に、スペースを入れている場合があります。
例
OK→location = ‘https://haconomiseonde.com/thanks/’;
NG→location = ‘ https://haconomiseonde.com/thanks/ ‘;
スペースが入ると機能しないことがあるので、気をつけてくださいね。
確認２
コードのコピペが上手にできていない場合があります。
公式サイトからコードをコピーしてください。
contactform7公式サイト
→「送信後に異なる URL にリダイレクトさせるには」
北海道、石川、大阪…全国からご相談いただけて
新規の方に数ヶ月お待ちいただいている状況になれた方法をLINEでこっそりお伝えしています♪
▶︎「集客につながるホームページの秘密」が届くLINEを受け取る
