Contact Form 7では、メールアドレス入力欄を自由にカスタマイズすることができます。
「必須項目にしたい」「入力欄の幅を広げたい」「ヒントとなるプレースホルダーを表示したい」といった細かい調整も可能です。
本記事では、フォームタグ生成ダイアログを使った基本的な設定方法に加えて、タグを手動で編集することでサイズを調整する方法まで、初心者の方にもわかりやすく解説します。
フォームタグ生成ダイアログで設定できる項目
必須入力の項目
項目タイプの「必須入力の項目」にチェックを入れることで、入力が必須になります。
未入力のまま送信しようとするとエラーメッセージが表示されます。
チェックしない場合は任意入力になります。
項目名（name属性）
この欄で設定した内容が、メールフォームの入力項目を識別する name 属性として使用されます。
メール送信時の本文や、入力データの識別に活用されます。
クラス属性の追加（class属性）
入力欄に特定のクラス名を付与することで、CSSでフォームのデザインやレイアウトを調整できます。
複数のクラス名をスペース区切りで設定することも可能です。
長さの下限と上限（minlength・maxlength）
入力できる文字数の最小値・最大値を設定できます。
入力制限を設けることで、無効なアドレスや過剰な入力を防げます。
- 下限：
minlength属性で最小入力文字数を指定します。 - 上限：
maxlength属性で最大入力文字数を指定します。
デフォルト値とプレースホルダーの設定
デフォルト値には、入力欄に初期表示されるテキストを設定できます。
この値はユーザーが変更せず送信した場合、そのまま送信されます。
また、「このテキストを項目のプレースホルダーとして使用する」にチェックを入れることで、入力欄にプレースホルダーとして表示されます。
プレースホルダーは入力のヒントを示すグレーの補助テキストで、入力開始時に自動的に消えます。
フォームタグ生成ダイアログでは設定できない内容（手動編集が必要）
サイズの設定（size属性による入力欄の幅指定）
入力欄の横幅（見た目のサイズ）は、フォームタグを手動で編集することで指定できます。
たとえば size:50 のように設定すると、約50文字分の入力欄の幅になります。
この設定はフォームタグ生成ダイアログでは対応していないため、フォームタグ内に直接 size: 属性を追加する必要があります。
よく使うタグのサンプル一覧
| 内容 | フォームタグ例 |
|---|---|
| 通常の入力欄 | [email email-sample-1 class:email-sample] |
| プレースホルダーあり（必須） | [email* email-sample-2 class:email-sample placeholder "sample@take-it-easy.site"] |
| デフォルト値あり（必須） | [email* email-sample-3 class:email-sample "sample@take-it-easy.site"] |
| 最小・最大文字数を設定（必須） | [email* email-sample-4 class:email-sample minlength:10 maxlength:50 placeholder "sample@take-it-easy.site"] |
| サイズ指定あり（必須） | [email* email-sample-5 class:email-sample size:50 placeholder "sample@take-it-easy.site"] |
実際の表示イメージ
よくある質問（FAQ）
- Qフォームタグ生成ダイアログと手動編集、どちらを使えばいいですか？
- A
基本的な設定（必須項目、プレースホルダー、文字数制限など）はフォームタグ生成ダイアログで十分対応できます。
一方で、入力欄の見た目の幅を調整したいなど、より細かいカスタマイズをしたい場合は、手動でタグを編集する必要があります。
- Qタグを手動で編集しても大丈夫？フォームが壊れたりしませんか？
- A
正しい形式で編集すれば問題ありませんが、タグの文法ミスはフォームエラーの原因になります。
不安な場合は、編集前のタグをコピーしてメモ帳などに控えておくと安心です。
- Qプレースホルダーとデフォルト値の違いは何ですか？
- A
プレースホルダーは入力欄に薄いグレーのヒント文字として表示され、入力を始めると消えます。
デフォルト値はあらかじめ入力された状態になる値で、ユーザーが変更しなければそのまま送信されます。
ヒントだけ表示したい場合は、プレースホルダーの利用がおすすめです。
- Q入力欄の幅をCSSで調整するのと、size属性で調整するのは何が違いますか？
- A
size属性は文字数の目安に基づいた横幅を設定しますが、正確な見た目の調整にはCSSの方が柔軟です。
見た目にこだわる場合やレスポンシブ対応をしたい場合は、class属性を使ってCSSで制御する方法が推奨されます。
- Qメールアドレス欄を複数設置することはできますか？
- A
はい、可能です。たとえば「確認用メールアドレス」の欄を追加することで、入力ミスを減らすことができます。
ただし、2つのアドレス欄の一致チェックを行うにはJavaScriptの追加が必要になるため、Contact Form 7単体では実現が難しい点に注意してください。
まとめ
Contact Form 7では、メールアドレス入力欄をフォームタグ生成ダイアログを使って直感的にカスタマイズできます。
プレースホルダーや必須設定、文字数の制限など、基本的な設定はダイアログから簡単に行えます。
さらに、入力欄の幅を調整したい場合などは、タグを手動で編集することでより細かい調整も可能です。
まずは必要な設定から少しずつ試して、ユーザーが使いやすいフォームを作っていきましょう。
本記事がその第一歩になれば幸いです。
その他のフォームのカスタム方法
「テキスト」のカスタマイズ
「メールアドレス」のカスタマイズ
「URL」のカスタマイズの方法
「電話番号」のカスタマイズ
「数値」のカスタマイズ
「日付」のカスタマイズ
「テキストエリア」のカスタマイズ
「ドロップダウンメニュー」のカスタマイズ
「チェックボックス」のカスタマイズ
「ラジオボタン」のカスタマイズ
「承認確認」のカスタマイズ
「クイズ」のカスタマイズ
「ファイル」のカスタマイズ
「送信ボタン」のカスタマイズ
