【0から学ぶWordPress】Contact Form 7でメール送信後に送信完了ページへ移動させる

まいど！ドスブイサポート高橋しゃちょーです。

今回はとても便利で、ワードプレスならほぼ導入されていると思われるプラグイン「Contact Form 7」の一部機能をご紹介したいと思います。

Contact Form 7とは

ワードプレスのプラグインでサイト内にメールフォームを簡単に設置できる
日本語対応のプラグインとなります。

標準のままだと完了ページには飛ばすに、ページ内に
送信完了しました。のメッセージだけなので、Googleアナリティクスのゴール設定的に、ここはやはり完了ページに移動させたいところです

今回はユーザーが送信したら自動的にサンクスページへ移動する方法の解説を行いたいと思います。

Contact Form 7で送信後サンクスページへ移動する方法

ありがとうございます。メッセージは送信されました。
だけではユーザーはちゃんと送れたんか？と不安にもなる場合もあるので
ページを移動して、さらにフォームを外し、メッセージだけのページ（サンクスページ）にメッセージ送信後移動させます。

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

固定ページを制作してください。
私はHTMLエディターでコードを書いてCSSで編集しておりますので下のような画像になってますが、本来は文章だけなので単純でも良いと思います。

ここで重要なのはURLスラッグです。
このスラッグの設定は忘れずに設定してください。

今回はURLスラッグを例として
「thanks」としました

手順②　設定した固定ページをリダイレクトする

固定ページを作成したら、Contact Form 7 で送信したらサンクスページにリダイレクトするように設定します。

コンタクトフォームの送信イベントに対して固定ページへのリダイレクトとなるのでコードの書き方はこうなります。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'ワードプレスのURL/thnaks/';
}, false );
</script>

このコードを「お問い合わせ」コンタクトフォームの転送させたいフォーム内に記述します。

ここで先ほどのURLスラッグの登場です。お使いのワードプレスのURL「/」の後ろに「thanks」が記載されてますね
これがURLスラッグの設定です。

手順③　最後にリダイレクトされる前の手直し

リダイレクトされるまでに若干時間がかかるために
通常の「ありがとうございます。メッセージは送信されました。」のメッセージが一瞬出てしまうので、これを手直ししましょう。

一瞬なので、私の場合は既に送信はされてはいるのですが

コンタクトフォームのお問い合わせ、対処のフォームでメッセージタブに切り替えて「ありがとうございます。メッセージは送信されました。」を「送信中」という文面に変えてユーザーが困惑しないようにしております。

以上

お仕事のご依頼やお問い合わせはフォームやツイッターにてお気軽にお問い合わせ下さい。

お問い合わせフォーム

» 高橋しゃちょー (@osaka_dos) | Twitter