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の送信完了ページの作成は完了です。
