Contact From7に確認画面と送信完了画面を作成する方法

今回はお問い合わせフォームを作成するWordPressプラグイン「Contact From7」で、お問い合わせ内容の確認画面と送信が完了した時に表示される送信完了画面を作成する方法を紹介します。

Contact From7はお問い合わせフォームこそ簡単に設置できるものの、確認画面や送信完了画面(サンクスページ)は別途作成する必要があります。

流れとしては、別のプラグインで確認画面をサクッと作成し、送信完了画面は固定ページで作成します。

 

 Contact Form 7 add confirm をインストール

確認画面を作成するにはやり方はいくつかありますが、今回は Contact Form 7 add confirm というプラグインを使います。

いつものようにプラグインをインストールし、有効化してください。

 

 Contact Form 7 add confirm の設定

では確認画面を作成していきます。

ダッシュボード→お問い合わせ→コンタクトフォームと進み、確認画面を追加したいお問い合わせフォームを選択します。

Contact Form 7 add confirm を有効化するとContact From7のフォーム編集画面に「確認ボタン」と「戻って編集ボタン」が追加されています。

 

まずは確認ボタンをクリックして項目を入力していきます。

ラベルには表示したい文章を入力してください。IDやクラスは後から指定したいスタイルがないなら空欄で大丈夫です。

そうしたら「タグを挿入」をクリックしましょう。

同じように戻って編集ボタンもクリックして、ラベルを書いたら「タグを挿入」をクリックします。

 

編集画面で確認ボタンと戻って編集ボタンの両方が表示されていましたが、実際にお問い合わせフォームを確認すると「入力内容を確認する」というボタンしか表示されていないと思います。

これはこのボタンをクリックした後に「送信」ボタンと「戻って編集する」ボタンが表示されるようになっただけです。不具合とかではないので安心してください。

「送信」ボタンをクリックするとお問い合わせが送信され、「戻って編集する」ボタンをクリックするとフォームに戻ります。

 

スタイルを指定する

確認ボタンや戻って編集するボタンの編集画面で、IDやクラスを入力する欄があったと思います。

ここでIDやクラスを指定して、そこにCSSを記述するとスタイルを指定することができます。

例えば以下のような感じです。「戻って編集するボタン」のIDに「modoru」を指定してみます。

#modoru{
background: #0000ff;
border: none;
display: inline-block;
color: #FFFFFF;
padding: 15px 23px 15px 23px;
border-radius: 5px;
font-size: 13px;
}

 

フォームに戻って確認するときちんとスタイルが適用されているのが確認できます。

 

送信完了画面(サンクスページ)を作成する

確認画面が作成できたので、お次はサンクスページを作成します。

サンクスページを別に作っておくことで、お問い合わせフォームを送信したということが格段にわかりやすくなります。

作成自体は難しくなく、ページもシンプルなもので構いません。

 

固定ページを新規作成し、表示したい文章や画像などを入力します。

次に、送信完了後にリダイレクトをするようにコードを記述します。header.phpの</head>タグの直前に以下のコードをコピペしてください。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'https://hogehoge.com/thankspage/';
}, false );
</script>

 

「https://hogehoge.com/thankspage/」の部分は先ほど作成したサンクスページのURLを入力してください。

これでフォームが送信されたらサンクスページにリダイレクトするようになります。試しに一度フォームを送って確認してみるといいかもしれません。

 

まとめ

Contact From7を使うとお問い合わせフォームを始め、確認画面やサンクスページも簡単に作ることができます。

別途スタイルも指定できるし、使い方も難しくないので初心者でも設置しやすいと思います。