WORDPRESS | Contact Form7 の確認画面を追加する

みなさんこんにちはALEXです。現在EFO改善キャンペーン中です。今回で5作目、後半戦開始といったところです。これまで

の4記事を紹介させていただきました。Contact Form 7はデフォルトでは確認画面がなく、送信ボタンをポチするといきなり送信されてしまいます。はじめてのビジターの方が多いサイトではやはり確認画面がほしいところです。そこで今回はContact Form 7に確認画面を追加できるプラグイン「Contact Form 7 add confirm」をご紹介します。

Contact Form 7 add confirmについて

このプラグインは、とても簡単に確認画面機能を追加できるので使われていらっしゃる方も大変多いのではないでしょうか？このプラグインの長所は

・とても簡単に利用できる

・フォームのタグ修正はほんの少しですむ

・確認画面に「戻る」ボタンを追加できること。

です。

作者さんのご紹介

このプラグインはアイティーエー株式会社のゆいちさんが制作され無償配布されています。詳しい説明はゆいちさんの記事をご確認ください。

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

ご注意事項

この作業は、「Contact Form 7」の設定を済ませた上でフォームからメールを送信可能な状態にしている必要があります。

「Contact Form 7 add confirm」と「Contact Form 7」の開発者は別の方です。どちらかのプラグインのアップデートなどで正常に動作しなくなることも十分想定されます。この記事を基にプラグインを利用する際は自己責任で利用して下さい。

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

インストールも簡単です。管理画面から「プラグイン」－「新規追加」－「Contact Form 7 add confirm」で検索します。画面に表示されたらインストール、有効化で完了です。

コンタクトフォームの編集

さて、プラグインのインストールが完了したら、実際に使用してきましょう。コンタクトフォームを編集します。プラグインをインストールしただけでは、プラグインの機能は反映されません。以下の状態になっています。

コンタクトフォームを編集する必要があります。といってもとても簡単です。以下の三行に差し替えるだけです。

[confirm “確認画面へ”]

[submit “送信する”]

[back “編集し直す”]

画面確認

設定に問題なければ以下の通りに画面が遷移します。

入力時

確認画面

送信完了しました。

ここまでcontact form 7をモディファイしてきました。フォームの編集画面は以下の通りです。

<div class="table-res-form">

お名前 <span class="requied">必須</span>
[text* your-name placeholder "例）ALEX"]

メールアドレス <span class="requied">必須</span>
[email* your-email placeholder "例）alex@alexandcompany.net"]

メールアドレス（再入力)<span class="requied">必須</span>
[email* your-email_confirm]


メッセージ本文<span class="requied">必須</span>
[textarea your-message x4]

[confirm "確認画面へ"]
[submit "送信する"]
[back "編集し直す"]

</div>

また、style.cssの追加部分は以下の通りです。

.table-res-form .requied {
    font-size: 0.8em;
    color: #FFF;
    display: inline-block;
    padding: 0.3em 0.3em 0.2em;
    background: red;
    border-radius: 2px;
    margin-bottom: 8px;
}
.wpcf7 input[type="submit"]:hover {
 box-shadow: 0 0 1px rgba(0,0,0,.2) inset;
}