contactform7でサンクスページを作る方法!コピペだけで簡単に設定!

WordPressのプラグイン「contact form7」でお問い合わせフォームを作ったけれども、サンクスページが出てこないことがモヤっとしていました。

フォーム送信後に画面が切り替わって「ご予約ありがとうございます!」とか「お問い合わせありがとうございます!」とかって表示されて、しっかりお礼を伝えたいっ!と思うのに、実際に出てくるのは、フォームの1番最後に1行だけ。

 

 

くるみ
なにこれ?!見つけにくいわん!しかもダサイわん!

 

たった1行、ぺろっとサンクスメッセージが表示されるだけでは味気ないし、送信者が見落としてしまいますよね。

お相手が「きちんと送れたのかな…」と不安になってしまいます。

 

ということで、contact form7で、簡単にサンクスページを作る方法をご紹介します。

  • function.phpを触るなど難しい設定なし!
  • プラグインなし!

でできる、WordPress初心者さんでも、簡単に設定できる方法をご紹介します。

 

これからお伝えする設定方法は、
私がクライアント様のサイトにサンクスページを導入する際に、

  • テーマエディターを触るのがこわい(画面が真っ白になる危険あり)
  • プラグイン「Redirection for Contact Form 7」で設定しても上手に飛ばない
  • 追加CSSに書き込んでも上手に飛ばない

という経験を踏まえて、1番簡単にできた方法です。

 




 

固定ページにサンクスページを作る

まずは、固定ページにサンクスページを作ります。

フォーム送信後に、表示させたい画面(ページ)を用意しましょう。

コンタクトフォームを触る前に、
固定ページで表示させたいページを作るんです♪

 

sayaka
別の画面(ページ)へ飛ばすことを「リダイレクト」といいます。覚えなくてもいいですが、せっかくなので軽く触れました

 

 

設定場所:固定ページ→新規追加

パーマリンク(URL)は「thanks」「page-thanks」などにすると分かりやすくていいですね♪

サンクスページの文章ができたら「公開」してください。

 

sayaka
サンクスページのURLは設定の時に必要になるのでメモしておきましょう

 

サンクスページに書いておくと良い内容

サンクスページ には、

  • お問い合わせ/ご予約/お申し込みのお礼メッセージ
  • フォームの送信が完了したこと
  • 自動返信メールが届くこと
  • 自動返信メールが届かない場合の対処方法
  • 返答は誰からいつくるのか

などを書いておくのがおすすめです。

他には

  • 公式LINEへの登録
  • SNSフォロー

などを促す文章を書くのもいいですね。

コンタクトフォームにサンクスページを追加する(コピペでOK)

固定ページで、サンクスページ(表示させたいページ)が完成したら、フォーム送信後に自動でそのページに飛ぶように設定をしていきます。

フォーム部分に、サンクスページに飛ぶように追加するだけなので、簡単ですよ。

なお、contact form7のプラグインで、すでにフォームを作っていることが前提です。

設定場所:お問い合わせ→コンタクトフォーム→サンクスページを設定したいフォームの「編集」→フォーム

フォームの「送信ボタン」の後に、コードを追加します。

↓コードを追加するするのはここです

 

下記のコードをコピーして、貼り付けてください。

 

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

 

「https://example.com/」は、あなたが表示させたいURLを入れてくださいね!

 

sayaka
さっき作ったサンクスページ (固定ページ)のURLを入れるんですよ♪

 

コードを貼り付けたら「保存」します。

contact form7の公式サイトにも載っている方法なので、併せてご確認くださいね。
→contactform7「送信後に異なる URL にリダイレクトさせるには

コンタクトフォームのメッセージ表示を設定してスマートな流れを作る

contact form7の元々の設定によって、フォームの下にはメッセージがチラッと見えてしまいます。

そのメッセージ内容を、よりナチュラルなメッセージに変更することをおすすめします。

\完成イメージがこちら/

 

相手が送信ボタンを押すと、
送信時に「送信中…」が表示されます。

設定場所:コンタクトフォーム→メッセージ→「メッセージが正常に送信された」の欄

contact form7の設定上、元々「メッセージが正常に送信された」の欄には、メッセージが入っています。

こちらの文字を消して、フォーム送信中に表示させたいメッセージを入れます。

メッセージを変更したら「保存」を押して終わりです。

写真を使ってご説明すると…

メッセージ例

  • 送信中…
  • ただいま送信中です
  • 送信中なのでこのままお待ちください

 

以上で完成です。

きちんと機能するか、自分自身でテスト送信を必ず行なってくださいね♪

うまく機能しない場合

上記のとおり設定したのに、うまく機能しないという場合は、入力したコードを見直してください。

確認1

URLを入力する際に、スペースを入れている場合があります。


OK→location = ‘https://haconomiseonde.com/thanks/’;
NG→location = ‘ https://haconomiseonde.com/thanks/ ‘;

スペースが入ると機能しないことがあるので、気をつけてくださいね。

確認2

コードのコピペが上手にできていない場合があります。

公式サイトからコードをコピーしてください。

contactform7公式サイト
→「送信後に異なる URL にリダイレクトさせるには

 

くるみ
この記事がためになった♪楽しかった♪という方は
sayaka
LINE@のご登録をお願いします♪

 

北海道、石川、大阪…全国からご相談いただけて
新規の方に数ヶ月お待ちいただいている状況になれた方法をLINEでこっそりお伝えしています♪

 

▶︎「集客につながるホームページの秘密」が届くLINEを受け取る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)