フィールドタイプの説明と使い方

フィールドタイプの説明と使い方

FormNestで利用可能なすべてのフィールドタイプについて、詳しい説明と使い方を解説します。各フィールドの特徴、設定項目、使用例を確認して、最適なフォームを作成しましょう。

フィールドタイプ一覧

FormNestでは、以下の16種類のフィールドタイプが利用できます:

  • テキスト
  • メールアドレス
  • 電話番号
  • URL
  • テキストエリア
  • 数値
  • 日付
  • セレクトボックス
  • ラジオボタン
  • チェックボックス
  • ファイル
  • 郵便番号
  • 都道府県
  • 市区町村
  • 確認用メールアドレス
  • 同意チェック
  • 隠しフィールド

テキスト入力系フィールド

1. テキスト

用途: 1行のテキスト入力に使用します。名前、タイトル、会社名など、短いテキストの入力に適しています。

主な設定項目:

  • フィールド名:内部識別用の名前(英数字とアンダースコアのみ)
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • プレースホルダー:入力例を表示
  • 最大文字数:入力可能な最大文字数
  • 最小文字数:入力が必要な最小文字数
  • 文字種制限:半角英数、半角数字、半角英字、ひらがな、カタカナなど
  • 説明文:フィールドの下に表示される補足説明

使用例:

  • お名前:フィールドラベル「お名前」、必須項目、プレースホルダー「山田太郎」
  • 会社名:フィールドラベル「会社名」、任意項目、最大文字数50
  • ユーザーID:フィールドラベル「ユーザーID」、必須項目、文字種制限「半角英数」

💡 ヒント: 文字種制限を設定することで、入力ミスを防ぐことができます。例:ユーザーIDには「半角英数」、電話番号には「半角数字」を設定。

2. テキストエリア

用途: 複数行のテキスト入力に使用します。お問い合わせ内容、コメント、備考など、長い文章の入力に適しています。

主な設定項目:

  • フィールド名:内部識別用の名前
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • プレースホルダー:入力例を表示
  • 行数:表示される行数(デフォルト:4行)
  • 最大文字数:入力可能な最大文字数
  • 最小文字数:入力が必要な最小文字数
  • 説明文:フィールドの下に表示される補足説明

使用例:

  • お問い合わせ内容:フィールドラベル「お問い合わせ内容」、必須項目、行数5、最大文字数1000
  • 備考:フィールドラベル「備考」、任意項目、行数3、最大文字数500
  • ご意見・ご要望:フィールドラベル「ご意見・ご要望」、任意項目、行数6

💡 ヒント: 行数を適切に設定することで、ユーザーが入力しやすいフォームになります。長い文章を想定する場合は、行数を多めに設定しましょう。

メール・連絡先系フィールド

3. メールアドレス

用途: メールアドレスの入力に使用します。自動的にメールアドレスの形式をチェックします。

主な設定項目:

  • フィールド名:内部識別用の名前(通常はemail
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • プレースホルダー:入力例を表示(例:example@email.com)
  • 説明文:フィールドの下に表示される補足説明

バリデーション:

  • 自動的にメールアドレスの形式をチェック
  • @マークが含まれているか
  • ドメイン部分が正しい形式か

使用例:

  • メールアドレス:フィールドラベル「メールアドレス」、必須項目、プレースホルダー「example@email.com」
  • 連絡先メールアドレス:フィールドラベル「連絡先メールアドレス」、必須項目

💡 ヒント: メールアドレスフィールドは、自動返信メールの送信先として使用されます。必ず必須項目に設定することを推奨します。

4. 確認用メールアドレス

用途: メールアドレスの再入力確認に使用します。入力ミスを防ぐために使用します。

主な設定項目:

  • フィールド名:内部識別用の名前(通常はemail_confirm
  • フィールドラベル:ユーザーに表示されるラベル(例:「メールアドレス(確認用)」)
  • 必須項目:通常は必須
  • プレースホルダー:入力例を表示
  • 確認対象フィールド:確認対象となるメールアドレスフィールドを選択

バリデーション:

  • 確認対象のメールアドレスフィールドと一致するかチェック
  • メールアドレスの形式もチェック

使用例:

  • メールアドレス(確認用):フィールドラベル「メールアドレス(確認用)」、必須項目、確認対象「メールアドレス」フィールド

💡 ヒント: 重要なフォームでは、メールアドレスの入力ミスを防ぐために確認用フィールドを追加することを推奨します。

5. 電話番号

用途: 電話番号の入力に使用します。日本の電話番号形式に対応しています。

主な設定項目:

  • フィールド名:内部識別用の名前(通常はtel
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • プレースホルダー:入力例を表示(例:090-1234-5678)
  • 説明文:フィールドの下に表示される補足説明

バリデーション:

  • 日本の電話番号形式をチェック
  • ハイフンあり・なしの両方に対応

使用例:

  • 電話番号:フィールドラベル「電話番号」、任意項目、プレースホルダー「090-1234-5678」
  • 携帯電話番号:フィールドラベル「携帯電話番号」、必須項目

💡 ヒント: 電話番号は任意項目にすることが多いですが、連絡が必要な場合は必須項目に設定しましょう。

URL・数値系フィールド

6. URL

用途: ウェブサイトのURL入力に使用します。http://やhttps://で始まるURLを自動チェックします。

主な設定項目:

  • フィールド名:内部識別用の名前(通常はurl
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • プレースホルダー:入力例を表示(例:https://example.com)
  • 説明文:フィールドの下に表示される補足説明

バリデーション:

  • URLの形式をチェック
  • http://またはhttps://で始まるか

使用例:

  • ウェブサイトURL:フィールドラベル「ウェブサイトURL」、任意項目、プレースホルダー「https://example.com」
  • ブログURL:フィールドラベル「ブログURL」、任意項目

7. 数値

用途: 数値のみの入力に使用します。年齢、数量、金額など、数値データの入力に適しています。

主な設定項目:

  • フィールド名:内部識別用の名前(通常はnumber
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • 最小値:入力可能な最小値
  • 最大値:入力可能な最大値
  • 小数点:小数点の入力を許可するか
  • マイナス値:マイナス値の入力を許可するか
  • プレースホルダー:入力例を表示

バリデーション:

  • 数値のみの入力をチェック
  • 最小値・最大値の範囲内かチェック
  • 小数点の有無をチェック
  • マイナス値の有無をチェック

使用例:

  • 年齢:フィールドラベル「年齢」、必須項目、最小値0、最大値120、小数点なし、マイナス値なし
  • 数量:フィールドラベル「数量」、必須項目、最小値1、最大値1000、小数点なし
  • 金額:フィールドラベル「金額」、必須項目、最小値0、小数点あり

💡 ヒント: 年齢や数量など、整数のみの場合は小数点を無効にしましょう。金額など、小数点が必要な場合は小数点を有効にします。

8. 日付

用途: 日付の選択に使用します。カレンダーから日付を選択できます。

主な設定項目:

  • フィールド名:内部識別用の名前(通常はdate
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • 日付フォーマット:日付の表示形式(例:YYYY-MM-DD、YYYY/MM/DD)
  • 最小日付:選択可能な最小日付
  • 最大日付:選択可能な最大日付
  • 説明文:フィールドの下に表示される補足説明

バリデーション:

  • 日付の形式をチェック
  • 最小日付・最大日付の範囲内かチェック

使用例:

  • 生年月日:フィールドラベル「生年月日」、必須項目、日付フォーマット「YYYY-MM-DD」、最大日付「今日」
  • 希望日:フィールドラベル「希望日」、必須項目、最小日付「今日」、最大日付「1年後」
  • イベント日:フィールドラベル「イベント日」、必須項目、最小日付「今日以降」

💡 ヒント: 過去の日付を選択させたくない場合は、最小日付を「今日」に設定しましょう。

選択系フィールド

9. セレクトボックス

用途: プルダウンから1つの選択肢を選ぶ場合に使用します。選択肢が多い場合に適しています。

主な設定項目:

  • フィールド名:内部識別用の名前
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • 選択肢:選択可能な項目のリスト(1行に1つずつ入力)
  • デフォルト値:初期表示される選択肢
  • 説明文:フィールドの下に表示される補足説明

選択肢の設定方法:

  1. フィールド設定画面の「選択肢」欄を開く
  2. 1行に1つずつ選択肢を入力
  3. 「追加」ボタンで選択肢を追加
  4. 順序はドラッグ&ドロップで変更可能

使用例:

  • 都道府県:選択肢「北海道、青森県、岩手県…」(47都道府県)
  • お問い合わせ種別:選択肢「商品について、サービスについて、その他」
  • 年齢層:選択肢「10代、20代、30代、40代、50代、60代以上」

💡 ヒント: 選択肢が多い場合は、セレクトボックスを使用します。選択肢が少ない場合は、ラジオボタンの方が見やすい場合があります。

10. ラジオボタン

用途: 複数の選択肢から1つを選ぶ場合に使用します。選択肢が少ない場合に適しています。

主な設定項目:

  • フィールド名:内部識別用の名前
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • 選択肢:選択可能な項目のリスト
  • デフォルト値:初期選択される選択肢
  • レイアウト:横並び・縦並びの選択
  • 説明文:フィールドの下に表示される補足説明

使用例:

  • 性別:選択肢「男性、女性、その他」、レイアウト「横並び」
  • ご希望の連絡方法:選択肢「メール、電話、FAX」、レイアウト「縦並び」
  • お問い合わせの緊急度:選択肢「緊急、通常、不急」、レイアウト「縦並び」

💡 ヒント: 選択肢が3〜5個程度の場合は、ラジオボタンが適しています。選択肢が多い場合は、セレクトボックスを使用しましょう。

11. チェックボックス

用途: 複数の選択肢から複数を選ぶ場合に使用します。興味のある分野、希望するサービスなど、複数選択が必要な場合に適しています。

主な設定項目:

  • フィールド名:内部識別用の名前
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか(最低1つは選択が必要)
  • 選択肢:選択可能な項目のリスト
  • デフォルト値:初期選択される選択肢
  • レイアウト:横並び・縦並びの選択
  • 最小選択数:最低選択が必要な数
  • 最大選択数:最大選択可能な数
  • 説明文:フィールドの下に表示される補足説明

使用例:

  • 興味のある分野:選択肢「Webデザイン、プログラミング、マーケティング、その他」、レイアウト「縦並び」、最小選択数1
  • 希望するサービス:選択肢「資料請求、メールマガジン、セミナー参加」、レイアウト「縦並び」
  • お知らせの希望:選択肢「新商品情報、セール情報、イベント情報」、レイアウト「横並び」

💡 ヒント: 複数選択が必要な場合は、チェックボックスを使用します。1つだけ選択する場合は、ラジオボタンを使用しましょう。

住所系フィールド

12. 郵便番号

用途: 郵便番号の入力に使用します。入力すると自動的に住所が補完されます。

主な設定項目:

  • フィールド名:内部識別用の名前(通常はpostal_code
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • プレースホルダー:入力例を表示(例:123-4567)
  • 説明文:フィールドの下に表示される補足説明

バリデーション:

  • 郵便番号の形式をチェック(123-4567形式)
  • ハイフンあり・なしの両方に対応

自動補完機能:

  • 郵便番号を入力すると、都道府県・市区町村が自動的に補完されます
  • 都道府県フィールドと市区町村フィールドと連動

使用例:

  • 郵便番号:フィールドラベル「郵便番号」、必須項目、プレースホルダー「123-4567」

💡 ヒント: 郵便番号フィールドは、都道府県フィールドと市区町村フィールドと組み合わせて使用すると便利です。

13. 都道府県

用途: 都道府県の選択に使用します。日本の47都道府県から選択できます。

主な設定項目:

  • フィールド名:内部識別用の名前(通常はprefecture
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • デフォルト値:初期選択される都道府県
  • 説明文:フィールドの下に表示される補足説明

連動機能:

  • 市区町村フィールドと連動し、選択した都道府県に応じて市区町村の選択肢が変わります
  • 郵便番号フィールドと連動し、郵便番号入力時に自動選択されます

使用例:

  • 都道府県:フィールドラベル「都道府県」、必須項目

14. 市区町村

用途: 市区町村の選択に使用します。都道府県に応じて選択肢が変わります。

主な設定項目:

  • フィールド名:内部識別用の名前(通常はcity
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • 連動フィールド:連動する都道府県フィールドを選択
  • 説明文:フィールドの下に表示される補足説明

連動機能:

  • 都道府県フィールドと連動し、選択した都道府県に応じて選択肢が変わります
  • 郵便番号フィールドと連動し、郵便番号入力時に自動選択されます

使用例:

  • 市区町村:フィールドラベル「市区町村」、必須項目、連動フィールド「都道府県」

💡 ヒント: 住所入力フォームでは、郵便番号→都道府県→市区町村の順に配置すると、ユーザーが入力しやすくなります。

ファイル・その他フィールド

15. ファイル

用途: ファイルのアップロードに使用します。画像、PDF、Word文書などのファイルをアップロードできます。

主な設定項目:

  • フィールド名:内部識別用の名前(通常はfile
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:必須かどうか
  • 許可ファイルタイプ:アップロード可能なファイル形式(例:jpg, png, pdf)
  • 最大ファイルサイズ:アップロード可能な最大サイズ(例:5MB)
  • 説明文:フィールドの下に表示される補足説明

バリデーション:

  • ファイルタイプをチェック
  • ファイルサイズをチェック
  • MIMEタイプをチェック

使用例:

  • 画像アップロード:フィールドラベル「画像をアップロード」、許可ファイルタイプ「jpg, png, gif」、最大ファイルサイズ「5MB」
  • 資料添付:フィールドラベル「資料を添付」、許可ファイルタイプ「pdf, doc, docx」、最大ファイルサイズ「10MB」
  • 履歴書:フィールドラベル「履歴書をアップロード」、必須項目、許可ファイルタイプ「pdf」、最大ファイルサイズ「5MB」

💡 ヒント: ファイルサイズは、サーバーの設定(upload_max_filesize、post_max_size)も確認してください。大きなファイルをアップロードする場合は、サーバーの設定も調整が必要な場合があります。

16. 同意チェック

用途: 利用規約やプライバシーポリシーへの同意確認に使用します。チェックボックス形式で表示されます。

主な設定項目:

  • フィールド名:内部識別用の名前(通常はagreement
  • フィールドラベル:ユーザーに表示されるラベル
  • 必須項目:通常は必須(デフォルトで必須)
  • 同意文:表示される同意文(例:「利用規約に同意します」)
  • リンクURL:利用規約やプライバシーポリシーのページURL
  • リンクテキスト:リンクに表示されるテキスト(例:「利用規約」)
  • 説明文:フィールドの下に表示される補足説明

バリデーション:

  • チェックが入っているか確認
  • 必須項目の場合は、チェックが必須

使用例:

  • 利用規約への同意:同意文「利用規約に同意します」、リンクURL「/terms」、リンクテキスト「利用規約」
  • プライバシーポリシーへの同意:同意文「プライバシーポリシーに同意します」、リンクURL「/privacy」、リンクテキスト「プライバシーポリシー」

💡 ヒント: 個人情報を扱うフォームでは、必ず同意チェックフィールドを追加しましょう。リンクURLを設定することで、ユーザーが規約を確認しやすくなります。

17. 隠しフィールド

用途: ユーザーには見えないが、フォーム送信時に値が含まれるフィールドです。フォームの識別や、システム側で必要な情報を渡すために使用します。

主な設定項目:

  • フィールド名:内部識別用の名前
  • フィールドラベル:管理画面での識別用(ユーザーには表示されません)
  • :送信時に含まれる値
  • 説明文:管理画面での説明(ユーザーには表示されません)

使用例:

  • フォームバージョン:フィールド名「form_version」、値「1.0」
  • 参照元URL:フィールド名「referrer」、値「{動的に設定}」
  • キャンペーンID:フィールド名「campaign_id」、値「summer2024」

💡 ヒント: 隠しフィールドは、フォームの分析や追跡に使用できます。ただし、ユーザーが開発者ツールで確認できるため、機密情報は含めないでください。

フィールドタイプの選び方

適切なフィールドタイプを選ぶためのガイドです。

入力内容推奨フィールドタイプ理由
名前、タイトルなど短いテキストテキスト1行で入力できる
お問い合わせ内容など長いテキストテキストエリア複数行で入力できる
メールアドレスメールアドレス形式の自動チェック
電話番号電話番号形式の自動チェック
ウェブサイトURLURL形式の自動チェック
年齢、数量など数値数値数値のみの入力、範囲チェック
生年月日、希望日など日付日付カレンダーから選択
都道府県都道府県47都道府県から選択
住所(郵便番号から)郵便番号 + 都道府県 + 市区町村自動補完機能
選択肢が多く1つ選択セレクトボックススペースを節約
選択肢が少なく1つ選択ラジオボタン見やすく選択しやすい
複数選択チェックボックス複数選択可能
ファイル添付ファイルファイルアップロード機能
利用規約への同意同意チェックチェックボックス形式

よくある質問

Q: フィールドタイプを後から変更できますか?

A: フィールドタイプは変更できません。変更したい場合は、フィールドを削除して新しいフィールドタイプで追加してください。ただし、データが失われる可能性があるため、注意が必要です。

Q: 1つのフォームに同じフィールドタイプを複数追加できますか?

A: はい、可能です。ただし、フィールド名は重複しないように注意してください。例:メールアドレス1、メールアドレス2など。

Q: フィールドの順序を変更できますか?

A: はい、ドラッグ&ドロップまたは上下ボタンで順序を変更できます。

Q: フィールドを必須項目に設定する必要はありますか?

A: フォームの目的によって異なりますが、重要な情報(名前、メールアドレスなど)は必須項目に設定することを推奨します。

Q: プレースホルダーは必須ですか?

A: 必須ではありませんが、入力例を表示することで、ユーザーが入力しやすくなります。特に形式が決まっているフィールド(メールアドレス、電話番号など)には設定することを推奨します。

まとめ

FormNestでは、17種類のフィールドタイプが利用できます。各フィールドタイプには特徴があり、適切に選択することで、ユーザーが入力しやすいフォームを作成できます。

フィールドタイプを選ぶ際のポイント:

  • 入力内容に適したフィールドタイプを選択
  • バリデーション機能を活用して入力ミスを防ぐ
  • 必須項目を適切に設定
  • プレースホルダーで入力例を表示
  • 説明文で補足情報を提供

詳細な設定方法については、「基本的なフォームの作成方法」の記事を参照してください。問題が解決しない場合は、ヘルプページの「よくある問題と解決方法」セクションを確認するか、サポートにお問い合わせください。