パーツの種類と設定方法

各パーツの項目や設定方法についてご説明します。

名前パーツ

フォームに名前の入力欄を表示するパーツです

  • 項目名 … 実際のフォームに項目名として表示されます。
  • 必須項目チェック … 「名前」をフォーム上で必須入力にしたいは場合チェックを入れます。
  • フリガナ … フリガナ(全角カナ)の入力欄を設けたい場合はチェックをいれます。
  • フォーム選択
    1. 同一フィールド … 入力欄をひとつのテキストフィールドにします。
    2. 姓名別 … 入力欄を姓と名で分けます。

住所パーツ

フォームに住所の入力欄を表示するパーツです

  • 項目名 … 実際のフォームに項目名として表示されます。
  • 郵便番号 … 郵便番号の入力欄を表示する場合は「項目を追加する」にチェックを入れます。
  • フォーム選択
    1. 同一フィールド … 入力欄をひとつのテキストフィールドにします。
    2. 項目別 … 入力欄を都道府県や市区町村ごとに区切ります。

必須入力にする場合は、それぞれの項目にチェックを入れます。

電話番号パーツ

フォームに電話番号の入力欄を表示するパーツです

  • 項目名 … 実際のフォームに項目名として表示されます。
  • 必須項目チェック … 電話番号を必須入力にする場合はチェックを入れます。
  • フォーム選択
    1. 同一フィールド … 入力欄をひとつのテキストフィールドにします。
    2. 通常 … 入力欄を市外局番や市内局番ごとに区切ります。
  • 補足テキスト … デフォルトで補足が入力されています。不要な場合は削除するか、任意の文言に変更してください。
  • 補足テキスト表示位置 … 補足テキストの表示位置を上・右横・下から選択します。
  • 補足テキスト文字色 … 補足テキストの色を変更します。

メールアドレスパーツ

フォームにメールアドレスの入力欄を表示するパーツです

  • 項目名 … 実際のフォームに項目名として表示されます。
  • 重複登録制御 … 重複登録を許可しない場合はチェックを外します。詳細は下記をご覧ください。
  • 共用 … PC/携帯問わず、メールアドレスの入力欄を表示します。
  • PCメール … PC用のメールアドレス入力欄を表示します。
  • 携帯メール … 携帯用のメールアドレス入力欄を表示します。
  • 補足テキスト … デフォルトで補足が入力されています。不要な場合は削除するか、任意の文言に変更してください。
  • 補足テキスト表示位置 … 補足テキストの表示位置を上・右横・下から選択します。
  • 補足テキスト文字色 … 補足テキストの色を変更します。

必須入力にする場合は、それぞれの項目にチェックを入れます。
メールアドレスの入力欄は、確認用に必ず2行表示されます。
 

■ 重複登録を許可する とは

「重複登録を許可する」のチェックを外して登録すると、そのフォームに対し同一のメールアドレスからの受付ができなくなります。
(フォーム入力→確認時点でエラーチェックに引っかかります)
これは、アンケート等で複数投稿を許可しない場合に利用する想定です。
通常の問い合わせフォームなど、同じユーザーから複数の受付が想定される場合は「重複登録を許可する」にチェックを入れます。

URLパーツ

フォームにURLの入力欄を表示するパーツです

  • 項目名 … 実際のフォームに項目名として表示されます。
  • 必須項目チェック … URLを必須入力にする場合はチェックを入れます。
  • ガイド表示 … 「http://」を入力欄に表示する場合はチェックを入れます。
  • リンク表示 … 入力したURLにリンクを貼り、確認画面でアクセス出来るようにする場合はチェックを入れます。
  • 補足テキスト … URLの入力に関する補足があれば、このテキストフィールドに入力します。
  • 補足テキスト表示位置 … 補足テキストの表示位置を上・右横・下から選択します。
  • 補足テキスト文字色 … 補足テキストの色を変更します。

URLを必須入力にしない場合は、ガイド表示をしない設定にしておくことをおすすめします。
※あらかじめ入力欄に「http://」が入っていると、未入力の場合にエラーチェックに引っかかるため

自由入力パーツ

フォームに備考など任意のテキストの入力欄を表示するパーツです

  • 項目名 … 実際のフォームに項目名として表示されます。
  • 必須項目チェック … 自由入力を必須入力にする場合はチェックを入れます。
  • フォーム選択
    1. テキスト … 入力欄を1行のみ表示します。
    2. テキストエリア … 入力欄を任意の行数で表示します。
  • 入力制御 … 入力できる文字種を制限する場合は該当の項目にチェックを入れます。
    1. 全て … 全ての文字種を入力できます。
    2. カタカナのみ … カタカナ(全角カナ)のみ入力できます。
    3. 半角英数 … 半角英数のみ入力できます。
    4. 数字のみ … 数字のみ入力できます。
    5. 日付 "yyyy/mm/dd" … 日付のみ入力できます。
  • サイズ(テキスト)… テキストフィールドの横幅(%)を設定します。
  • サイズ(テキストエリア)… テキストエリアの縦幅(行数)と横幅(%)を設定します。
  • 補足テキスト … 入力に関する補足があれば、このテキストフィールドに入力します。
  • 補足テキスト表示位置 … 補足テキストの表示位置を上・右横・下から選択します。
  • 補足テキスト文字色 … 補足テキストの色を変更します。

択一・複数選択パーツ

フォームにアンケートなどの選択欄を表示するパーツです

  • 項目名 … 実際のフォームに項目名として表示されます。
  • 必須項目チェック … 自由入力を必須入力にする場合はチェックを入れます。
  • フォーム選択 … 選択肢の表示方法を設定します。
    1. ラジオボタン … ラジオボタンで表示します。選択肢は択一選択のみとなります。
    2. チェックボックス … チェックボックスで表示します。選択肢は複数選択となります。
    3. プルダウン … プルダウンで表示します。選択肢は択一選択のみとなります。
  • 選択項目表示 … 選択肢を横に並べるか縦に並べるか選択します。
    (プルダウンを設定した場合は選択できません。)
    1. 横に並べる … 選択肢を横並びで表示します。
    2. 縦に並べる … 選択肢を縦並びで表示します。
  • 選択項目 … 選択肢を一行ずつ入力します。改行ごとに区切られます。
  • 補足テキスト … 入力に関する補足があれば、このテキストフィールドに入力します。
  • 補足テキスト表示位置 … 補足テキストの表示位置を上・右横・下から選択します。
  • 補足テキスト文字色 … 補足テキストの色を変更します。

日付/時間パーツ

フォームに日時の選択欄を表示するパーツです

  • 項目名 … 実際のフォームに項目名として表示されます。
  • 必須項目チェック … 自由入力を必須入力にする場合はチェックを入れます。
  • 当日デフォルト表示 … 入力欄に日付を表示します。(日付のみ)
  • 表示形式 … 日付を FROM〜TO 形式で表示します。
  • 表示項目 … フォームに表示する項目を設定します。
    1. 日付 … フォームに日付の入力欄のみ表示します。
    2. 時間 … フォームに時間の入力欄のみ表示します。
    3. 日付&時間 … フォームに日付と時間の入力欄を表示します。
  • 表示時間間隔 … 前項で「日付」または「日付&時間」を選択した場合のみ設定できます。
    1. 10分 … 時間を10分間隔で選択できます。
    2. 15分 … 時間を15分間隔で選択できます。
    3. 30分 … 時間を30分間隔で選択できます。
  • 補足テキスト … 入力に関する補足があれば、このテキストフィールドに入力します。
  • 補足テキスト表示位置 … 補足テキストの表示位置を上・右横・下から選択します。
  • 補足テキスト文字色 … 補足テキストの色を変更します。

ファイルアップロードパーツ

フォームからファイルをアップロード出来るパーツです

  • 項目名 … 実際のフォームに項目名として表示されます。
  • 必須項目チェック … ファイルアップロードを必須にする場合はチェックを入れます。
  • 拡張子による制限
    1. 全て許可 … 全ての拡張子のアップロードを許可します。
    2. 指定した拡張子のみ許可 … 次項で許可する拡張子を設定します。 
  • 許可する拡張子 … 前項で「指定した拡張子のみ許可」を選択した場合、アップロードを許可する拡張子を設定します。設定しなかった拡張子はアップロードできなくなります。
  • 補足テキスト … アップロードに関する補足があれば、このテキストフィールドに入力します。
  • 補足テキスト表示位置 … 補足テキストの表示位置を上・右横・下から選択します。
  • 補足テキスト文字色 … 補足テキストの色を変更します。

画像認証パーツ

フォームに画像認証欄を表示し本人認証を行うパーツです

通常の画像認証

  • 項目名 … 実際のフォームに項目名として表示されます。
  • 補足テキスト … アップロードに関する補足があれば、このテキストフィールドに入力します。
  • 補足テキスト表示位置 … 補足テキストの表示位置を上・右横・下から選択します。
  • 補足テキスト文字色 … 補足テキストの色を変更します。
  • reCAPTCHA … より高度な画像認証を使用します。

reCAPTCHAによる認証

前項で reCAPTCHA を「使用する」にした場合、さらに下記の項目が表示されます。
 

  • Site key … Google APIキーを取得し、発行されたキーを入力します。
  • Secret key … Google APIキーを取得し、発行されたキーを入力します。

参照:画像認証でreCAPCHAを設定する方法

案内文パーツ

フォームに案内文を表示するパーツです

  • 項目名 … 実際のフォームに項目名として表示されます。
  • 文字色 … 案内文の文字色を設定します。
  • テキスト … 案内文を入力します。

罫線パーツ

フォームに装飾として罫線を表示するパーツです

  • 罫線の太さ … 罫線の太さを設定します。
  • 罫線色 … 罫線の色を設定します。

設定例

bingo!CMS公式サイトお問い合わせフォームの構成です

  • ▼ お問い合わせ情報 … 案内文パーツを使用しています。
     ご用件 … 択一・複数選択パーツ(チェックボックス/縦に並べる)を使用しています。
     ご用件の詳細 … 自由入力パーツ(テキストエリア)を使用しています。
  • ▼ ご担当者様情報 … 案内文パーツを使用しています。
     社名・団体名 … 自由入力パーツ(テキスト)を使用しています。
     部署名 … 自由入力パーツ(テキスト)を使用しています。
     役職名 … 自由入力パーツ(テキスト)を使用しています。
     お名前 … 名前パーツ(フリガナ追加/姓名別)を使用しています。
     住所 … 住所パーツ(郵便番号追加/項目別)を使用しています。
     電話番号 … 電話番号パーツ(通常)を使用しています。
     メールアドレス … メールアドレスパーツ(PCメール)を使用しています。
  • ▼ お時間があればアンケートにご協力をお願いします。… 案内文パーツを使用しています。
     bingo!CMSを知ったきっかけ … 択一・複数選択パーツ(チェックボックス/縦に並べる)を使用しています。
  • ▼ 項目を確認し、チェックしてください。… 案内文パーツを使用しています。
     画像認証 … 画像認証パーツ(reCAPTCHA)を使用しています。
     赤字のテキスト … 案内文パーツ(文字色)を使用しています。
     プライバシーポリシー … 択一・複数選択パーツ(チェックボックス/縦に並べる)を使用しています。

ページトップ