WORDPRESS | Contact Form7 フォームのレイアウトを改良する

みなさんこんにちはALEXです。ただいまEFO改良キャンペーン中です。日々、ブログ更新に合わせ当社ブログサイトのフォームを改良していきますので、リアルタイムで使い勝手を試してください。

WORDPRESS | Contact Form7 メールアドレスの再入力チェック　

前回は、メールアドレスの再入力確認まで行いました。

そうはいっても、Contact form 7 をデフォルト画面で使うと、ちょっとEFOとは言えないような気がしますね。そこで、今回は以下の三つの改良を行いフォームのデザインを改良します。

・必須項目を目立たせる

・フォームにプレースホルダーを設置する

・オンカーソルで色を変化させる

では始めましょう。

必須項目を目立たせる

デフォルトの必須項目は「お名前（必須）」となっています。これでは必須なのか必須じゃないのかわからない！ということで「必須」の文字を際立たせましょう。

まずコンタクト画面の編集画面で以下の通りにラベル部分を変更します。「お名前」「メールアドレス」「メールアドレス（再入力）」「メッセージ本文」を以下の通り入力します。この部分をsytle指定しますので、table-res-formというクラス名を定義します。

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

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

メールアドレス <span class="requied">必須</span>
[email* your-email]

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


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

[submit "送信"]

</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;
}

上記の設定を行うと、画面表示は以下のように修正されます。

フォームにプレースホルダーを設置する

次は各入力フォームにプレースホルダーを表示させましょう。プレースホルダーとは、フォーム内に表示されている説明文のことです。ユーザーがフォームにカーソルを合わせるか、文字列を入力した時点で消えます。

コンタクトフォームの編集画面に入って、各項目欄を以下のように変更します。

<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]

[submit "送信"]

</div>

style.cssを修正する必要はありません。上記の設定を行うと、プレースホルダーが以下のように反映されます。

オンカーソルで色を変化させる

次に入力項目にカーソルを乗せた時に色が変化するように設定します。Style.cssに以下のタグを追加します。

.wpcf7 input[type="submit"]:hover {

box-shadow: 0 0 1px rgba(0,0,0,.2) inset;

}

この設定でオンカーソル時にカラーが変わります。

３機能追加後の編集画面とstyle.css

・必須項目を目立たせる、フォームにプレースホルダーを設置する、オンカーソルで色を変化させる

上記の三つの機能を追加した場合のフォームの編集画面は以下の通りです。

<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]

[submit "送信"]

</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;
}

上記の二つをコピペして頂いても結構です。

ただし、テーマによってはこの記事の通りに表示されない可能性がありますので注意してください。