Web

【超簡単】しまった!を防ぐフォームの必須マークを作ろう– はじめてのWordPress

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
【超簡単】しまった!を防ぐフォームの必須マークを作ろう– はじめてのWordPress

お問い合わせや申込みフォームで送信ボタンを押すと、「入力に不備があります。必須項目に入力してください」などと表示され、慌てた経験が皆さんあるのではないでしょうか。

必須項目とはフォームで必ず入力しないと送信できない項目をいいます。

よく「*は必須項目です。」とあるフォームがありますが、見落としてしまいがちです。

WordPressプラグインMW WP Form 必須項目マーク表示例

よくある必須項目表示例

利用者としては必須どうかがひと目で判別できるとうれしいですよね。

そこで、簡単なCSSを使って、下図のような目立つ必須マークを作ってみましょう。

WordPressプラグインMW WP Form 必須項目マーク表示例

必須項目マーク表示例

WordPressでは、プラグイン(Contact Form 7・MW WP Formなど)を利用すれば簡単にお問い合わせや申込みフォームを作ることができます。

せっかく作ったフォームですから、使いやすく見た目もカッコよくしてみましょう。

CSSの解説もしますので、自分なりにサイズや色をカスタマイズしてみてください。

なお、ここで紹介する画面のキャプチャ画像は、テーマ「Lightning」、フォーム作成プラグイン「MW WP Form」を利用した画面です。利用するテーマ、プラグイン、設定等によって画面表示が異なりますので、あらかじめご承知おきください。


MW WP Formついてはこちらを参照ください。
MW WP Formで問合せフォームを作る
MW WP Formよく使うフォームタグを深堀り
MW WP Formデータベース保存と問い合わせ番号

Contact Form 7ついてはこちらを参照ください。
Contact Form 7基本的な使い方
Contact Form 7カスタマイズ「項目を追加」
Contact Form 7カスタマイズ「サンクスページを作ろう」


必須マークをつける項目名にHTMLコードを追記する

フォームの編集画面で、テキストモードに切り替えます。

下記のコードを追加することで、必須マークが表示されるようになります。

以下のコードをコピーしてお使いいただけます。「項目名」の部分を変更してお使いください。
<span class="required">項目名</span>

WordPressプラグインMW WP Form 必須項目マークを表示させるclass名指定コード

必須項目マークを表示させるclass名指定コード

項目名をspanタグで囲み、cssのクラス名(この例ではクラス名を「required」(必須の英訳)としています)を指定します。

CSSを追記する

WordPressの「追加CSS」機能を使い、必要なCSSを入力します。

以下のコードをコピーしてお使いいただけます。
.required::after {
content: "必須";
color: #ffffff;
background: #cc0000;
font-size: 0.8em;
padding: 0.3em;
border-radius: 0.5em;
margin-left:0.3em;
}

CSS追記手順

  1. 管理画面のメニューから外観>カスタマイズを開きます。

    WordPressプラグインMW WP Form 管理画面の外観>カスタマイズメニュー

    管理画面の外観>カスタマイズメニュー

  2. 追加CSSを開きます。

    WordPressプラグインMW WP Form カスタマイズメニュー

    カスタマイズメニュー

  3. 以下のCSSを追記し、公開ボタンを押し保存します。

    WordPressプラグインMW WP Form 必須項目マークを表示させるCSS追加

    必須項目マークを表示させるCSS追加

実際に表示してみましょう。

CSSの解説

設定したCSSの説明をします。

① .required::after  —————–項目名の後に指定したテキストを挿入
② content: “必須”; —————–””(ダブルクォーテーション)で囲ったテキストが挿入
③ color: #ffffff; ———————-文字色
④ background: #cc0000; ———背景色
⑤ font-size: 0.8em; —————-挿入されるテキストのサイズ
⑥ padding: 0.3em; —————–背景色の余白
⑦ border-radius: 0.5em;———-背景色の4コーナー角丸サイズ
⑧ margin-left:0.3em;—————項目名と必須マークの間の余白

各サイズを指定するのには、項目名のフォントサイズを基準として指定する方法をとっています。

項目名のフォントサイズが14pxの場合、0.5emでは7px、1.2emでは16.8pxとなります。

以下に詳しく解説します。参考にして自分のサイトのデザインや雰囲気に合わせ、文字サイズや色などカスタマイズをしてください。

① .required::after 
項目名の「後」に指定したテキストを挿入する。挿入テキストはcontentプロパティで指定。
::before とすると「前」に挿入される。

【::beforeとした表示例】
お名前

 

② content:”必須”
””(ダブルクォーテーション)で囲ったテキストが挿入される。

【content:”穏やか暮らし”と変更した表示例】
お名前

 

③ color: #ffffff;
文字色を指定。ここでは白色#ffffffを指定。

【黒色#000000に変更した表示例】
お名前

 

④ background: #cc0000;
背景色を指定。ここではすこし落ち着いた赤色#cc0000を指定。

【青色#0000ffとした表示例】
お名前

 

⑤ font-size:0.8em
挿入されるテキストのサイズ指定。項目名の文字サイズより小さく(0.8倍)する。小さめにした方がバランスが良くなります。

【1.2emとしたの表示例】
お名前

 

⑥ padding: 0.3em;
背景色の余白指定。ここでは文字サイズの0.3倍の大きさの余白を指定。
数字を大きくすると余白が広がる。

【0.8emとしたの表示例】
お名前

 

⑦ border-radius: 0.5em;
背景の4コーナーの角丸のサイズを指定。ここでは文字サイズの0.5倍のサイズを指定。
数字を大きくすると角丸が大きくなる。

【0.8emとしたの表示例】
お名前

 

⑧ margin-left:0.3em;
項目名と必須マークの間の余白指定。必須マークの左側に文字サイズの0.3倍のサイズの余白を開ける。余白を設けることにより見やすくなる。
数字を大きくすると余白が広がる。

【余白がない場合の表示例】
お名前

必須項目にする?しない?

どの項目を必須にするかは管理者次第ですが、内容によっては配慮も必要です。

例えば、マーケティングを考えると、自身の商品、サービスに興味を持ってくれた方の性別や年齢、メールアドレスなど詳しく知りたいと思います。

反対に利用者としては、個人情報を与えるのに抵抗を感じる場合もあります。

特に性別は答えたくない方もいらっしゃいます。

必須にするなら「無回答」などの選択肢を用意するなどの配慮をしましょう。

まとめ

フォームのページは凝ったデザインにする必要はないですが、わかりやすさは大切です。

WordPressのフォーム作成プラグイン(Contact Form 7・MW WP Formなど)では、初心者でも簡単に本格的なフォームがつくれますが、そのままではなく入力しやすいフォームにする工夫をしてみましょう。

あわせて、今回はCSSについて説明をしましたので、CSS初心者の方も色やサイズを変更してカスタマイズに挑戦してください。

ここで紹介したCSSは必須マークのみならず、いろいろな場面で使える手法です。

CSSを勉強するキッカケにしていただけたらと願っています。