WordPress : ContactForm7に送信完了ページを作る

WordPressの「ContactForm7」プラグインは簡単にメール送信フォームが作れるスグレモノですが、プラグイン標準では送信完了ページの作成に対応していません。

ContactForm7で作られたフォームで送信後に送信完了ページへ移動する方法を紹介します。

送信完了ページを作るメリット

ContactForm7が送信完了ページに対応していないのは開発者のポリシーのようなのですが、送信完了ページを作ることには明確なメリットがあります。

お問い合わせをした訪問者は以下のような変化が起きています。

  • Webサイトに求めるニーズや状況が変化している
  • お問い合わせに至る程度には内容を認知してもらえている
  • 「もっと知りたい」という意識が高まっている

訪問者属性が一歩進んでいるため、以下のようなことをしてもらうチャンスでもあります。

  • 資料などをダウンロードしてもらう
  • メルマガなどに登録してもらう
  • 関連するサービスを伝える

「お問い合わせをしたユーザー」に最適化したコンテンツを置けることが完了ページのメリットです。

送信完了ページを作る

WordPressの固定ページで送信完了ページを作ります。

送信完了ページ自体はContactForm7の機能は関係なく、自由な内容で作成してください。

前述の通り資料のダウンロードリンクやメルマガ登録フォームなどを置くと効果的です。

ContactForm7の設定

ContactForm7編集画面の「フォーム」タブで、以下のスクリプトを追記します。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'https://送信完了画面のURL';
}, false );
</script>

ContactForm7の送信イベント(wpcf7mailsent)に対応し、送信完了画面のURLへリダイレクトする作りになります。

違和感を無くす設定

ContactForm7のメールフォームは、エラー時や送信時にメッセージを表示します。

デフォルトではフォーム送信時に「送信されました」というメッセージが表示されますが、ページがリダイレクトされる直前にこのメッセージが一瞬表示されます。送信完了ページに移る前に「送信されました」と一瞬でも見えることに違和感があるため、このメッセージを変えます。

ContactForm7編集画面の「メッセージ」タブで、「メッセージが正常に送信された」時の文言を「送信中」などに変更しましょう。

以上でContactForm7の送信完了ページの作成は完了です。

AWSを利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様