Contact Form 7 に確認画面と完了画面を追加する

スポンサーリンク
ビッグバナー728

Contact Form 7 確認画面と完了画面を追加

Contact Form 7 に確認画面と完了画面を追加する方法をご紹介します。

Contact Form 7 は問い合わせフォームを簡単に設置できる定番プラグインですが、メールフォームに入力した内容を確認するための機能や、完了画面(サンクスページ)に移行する機能がないので、確認画面や完了画面を別途で追加する必要があります。

確認画面の表示はjqueryを使う方法もありますが、初心者であればプラグイン「Contact Form 7 add confirm」を使うのが一番カンタンです。

完了画面は固定ページで送信完了ページを作成して、メール送信後に送信完了ページ(サンクスページ)へ移動させるためのコードを追記します。

Contact Form 7の使い方は以下で紹介しています。

関連記事 WordPressの問い合わせフォーム作成プラグイン Contact Form 7の使い方

スポンサーリンク

Contact Form 7 確認画面の追加

では、Contact Form 7に確認画面と完了画面を追加しましょう。まずは確認画面を追加するために Contact Form 7 add confirm をインストールします。

ダッシュボードから「プラグイン」→「新規追加」に進みます。

contactform7 add confirm インストール

右上の検索窓から「Contact Form 7 add confirm」と入力するとプラグインが表示されるので、「今すぐインストール」→「有効化」してください。

Contact Form 7 add confirm インストール

Contact Form 7 add confirm の設定

続いてContact Form 7 add confirm で確認画面を作成してみましょう。

ダッシュボードの「コンタクトフォーム」から確認画面を追加するフォームを選びます。

Contact Form 7 add confirm 設定

プラグインをインストールすると、Contact Form 7 のフォーム編集に「確認ボタン」と「戻って編集ボタン」が追加されています。

Contact Form 7 add confirm 設定

まずはフォームタグ生成で確認ボタンを作成します。ラベルを入力して、下で生成されたタグをフォームにコピペするか、「タグを挿入」をクリックします。

Contact Form 7 add confirm 確認ボタン作成

戻って編集ボタンも同様に作成して、フォームに追加します。

Contact Form 7 add confirm 戻って編集ボタン作成

送信ボタン・確認ボタン・戻って編集ボタンが3つ並んでいますね。保存して実際のフォームを確認してみましょう。

Contact Form 7 add confirm 設定

フォーム編集ではボタンが3つ並んでいましたが、実際のフォームでは確認ボタンだけ表示されています。

Contact Form 7 add confirm 入力画面

内容を入力して確認ボタンを押すと確認画面に移り、フォームの色が変わって、「送信」と「戻って確認」ボタンが表示されました。

Contact Form 7 add confirm 確認画面

確認画面で送信をクリックすると、メッセージが送信されます。もちろん、戻るボタンで再度入力画面に戻ることもできます。

Contact Form 7 add confirm メッセージ送信

Contact Form 7 add confirmは、入力画面と確認画面で表示するボタンを自動的に振り分けてくれます。でも、このままではちょっと味気ないですねぇ。

スポンサーリンク

確認画面の表示やデザインを変更する

Contact Form 7 add confirm を開発された方のサイトに、入力画面・確認画面・完了画面で表示する文言やタイトルを変更するための解説がありました。

参考サイト Contact Form 7に確認画面をものすごく簡単に付けられるプラグイン

フォームの編集画面で以下のclass要素を指定すると、各画面ごとに文章や画像を表示することができます。

  • 入力画面のみで表示する要素: 「wpcf7c-elm-step1」
  • 確認画面のみで表示する要素: 「wpcf7c-elm-step2」
  • 完了画面のみで表示する要素: 「wpcf7c-elm-step3」
  • これらの要素を使って、各画面の先頭に表示されるメッセージを追加してみましょう。フォームの編集で以下のサンプルコードを追加しました。

    <p class="wpcf7c-elm-step1" style="font-size:2.0em;">お問い合わせ内容を入力してください</p>
    <p class="wpcf7c-elm-step2" style="font-size:2.0em;">入力内容をご確認ください</p>
    <p class="wpcf7c-elm-step3" style="font-size:2.0em;">お問い合わせありがとうございます</p>

    Contact Form 7 add confirm コード追記

    入力画面では「お問い合わせ内容を入力してください」と表示されますが・・・

    Contact Form 7 add confirm 入力画面

    確認画面では「入力内容をご確認ください」になり、「送信ボタン」と「戻って編集ボタン」が表示されます。

    Contact Form 7 add confirm 確認画面

    送信すると「お問い合わせありがとうございます」になりました。

    Contact Form 7 add confirm 完了画面

    各入力項目に設定できるid属性やclass属性を使えば、ボタンの色や形も変更できます。

    Contact Form 7 add confirm ID属性を追加

    「戻って編集ボタン」のデザインを変更するため、タグにIDを追加して以下のCSSを追記しました。

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

    ご覧の通り、「戻って編集ボタン」の色と形が変更されましたね。

    Contact Form 7 add confirm ボタンデザイン変更

    HTMLやCSSの知識があれば、各画面に応じた表示やデザインが可能になります。

    完了画面(サンクスページ)を追加

    続いて完了画面(サンクスページ)を追加します。

    Contact Form 7 の送信完了メッセージはボタンの下に表示されて見づらいのですが、完了画面に移動させるとメールの送信完了がひと目でわかるようになります。

    送信完了画面は固定ページで作成します。内容はシンプルなもので構いません。

    Contact Form 7 送信完了ページ

    送信完了後にリダイレクトするためのコードを追加します。テーマファイルのヘッダー(header.php)に以下のコードを設置してください。設置場所は</head>タグの手前です。フッター(footer.php)に設置でもOKです。

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

    コード内「location」部分のURL「https://hogehoge.com/thankspage/」が、送信完了ページのURLです。

    確認画面と完了画面でメール送信の案内を

    Contact Form 7 は基本的に入力画面だけしかないので、確認画面と完了画面があるとメール送信のステップがわかりやすくなります。

    Contact Form 7 の確認画面は、プラグインを使って追加するのが一番簡単です。Contact Form 7 add confirm は設定もそれほど難しくないし、HTMLやCSSを追記すれば表示やデザインのカスタマイズも可能です。

    完了画面(サンクスページ)も、ページの作成と簡単なコードの追加だけで実現できます。どちらもそれほど難しくないので、ぜひチャレンジしてみてください。

    Contact Form 7 の関連記事です。よかったらこちらもご参考に・・・

    関連記事 WordPressの問い合わせフォーム作成プラグイン Contact Form 7の使い方

    関連記事 Contact Form 7 で送信完了ページ(サンクスページ)に移動させる方法

    関連記事 ContactForm7のスパムメール対策 reCAPTCHA設定方法

    スポンサーリンク
    PC用
    PC用

    フォローする