基本的な要素

テキスト、電子メール、電話などのフォームでよく使われる要素は、フォーム要素ペインの基本セクションにグループ化されています。これらの要素は、[フォーム要素] ペインの [全般] タブからフォーム キャンバスにドラッグ アンド ドロップすると、フォーム フィールドになり、編集することができます。

このトピックでは、基本的なフォーム要素とその設定について説明します。

テキスト

フォームにテキストフィールドを追加するにはText要素を使用します。この要素をフォームのタイトルに使用して、フォームの目的を説明することができます。例えば、「採用情報お問い合わせフォーム」や「お問い合わせ」などです。

セクション	アイテム	説明
詳細	Text	テキスト要素を追加したときにフォームのタイトルなどに表示されるテキスト。
	フィールド名	エレメントの名前。
	Html tag	テキストのHTMLタグを選択します。タグを追加するには、sitecore/System/Settings/Forms/Meta Data/Text Tagsに移動します。
スタイル	CSS class	フィールドのCSSクラスを定義します。
条件	編集条件	Web フォームのフィールドに条件付きアクションを適用します。条件を追加するには、[条件の編集] をクリックします。
拡張設定	保存を許可する	フォーム送信時に入力されたフィールドデータを保存することを有効または無効にします。
	パフォーマンスのトラッキング	フィールドのパフォーマンスに関するデータを記録する場合に選択します。トラッキングを機能させるためには、設定タブで、フォームのパフォーマンストラッキングチェックボックスも選択する必要があります。
	バリュープロバイダー	フィールドをリンクするソースを選択します。フォームのプリフィル値はこのソースから取得されます。
	値プロバイダパラメータ	フィールドに一致するキーを入力します。

ファイルアップロード

ファイルアップロード要素を使用して、Webフォームにファイルアップロードの可能性を追加します。訪問者が 1 つのファイルまたは複数のファイルを Web フォームに添付できるようにすることができます。例えば、履歴書、アバター、プロフィール写真などです。

注釈

ファイルのアップロードは、エクスポート フォームの CSV ファイル に表示されます。

フォームエディタでは、これらのファイルのサイズと形式を含めて、訪問者がアップロードできるファイルの数を決定することができます。

セクション	アイテム	説明
詳細	ラベル	特定のフォームフィールドがどのような情報を求めているかを連絡先に伝えるキャプション。
	ファイル名	エレメントの名前。
	ファイルサイズの制限	訪問者がアップロードできるファイルの最大ファイルサイズを決定します。デフォルトでは、訪問者は最大2GBを超えないファイルをアップロードできます。ファイルサイズバリデータチェックボックスが選択されている場合のみ適用されます。
	ファイル数の制限	訪問者がアップロードできるファイル数を決定します。このフィールドは必須です。File count validator チェックボックスが選択されている場合にのみ適用されます。
	ファイルの種類を制限する	許可されているファイル拡張子または MIME タイプを、カンマで区切って指定します。例えば、application/PDF , .pdf , pdf このフィールドが空の場合、訪問者は任意の形式でファイルをアップロードすることができます。 ファイルタイプバリデータチェックボックスが選択されている場合のみ適用されます。
バリデーション	ファイルサイズバリデータ	[Limit file size]フィールドで設定した値に従ってファイルサイズを検証する場合に選択します。
	ファイルカウントバリデータ	Limit number of files フィールドで設定した値に応じてファイル数を検証する場合に選択します。
	ファイル型バリデータ	制限されたファイルタイプフィールドで設定した値に従ってファイルタイプを検証する場合に選択します。
	フィールドの重要性	連絡先がフィールドに記入する必要があるかどうかを示します。オプションはオプションまたは必須です。
スタイル	CSSクラス	フィールドのCSSクラスを定義します。
	ラベル用CSSクラス	ラベルのCSSクラスを定義します。
条件	編集条件	Web フォームのフィールドに条件付きアクションを適用します。条件を追加するには、[条件の編集] をクリックします。
詳細設定	保存を許可する	フォーム送信時に入力されたフィールドデータを保存することを有効または無効にします。
	パフォーマンスのトラッキング	フィールドのパフォーマンスに関するデータを記録する場合に選択します。トラッキングを機能させるためには、設定タブで、フォームのパフォーマンストラッキングチェックボックスも選択する必要があります。
	バリュープロバイダー	フィールドをリンクするソースを選択します。フォームのプリフィル値はこのソースから取得されます。
	値プロバイダパラメータ	フィールドに一致するキーを入力します。

注釈

あなたの訪問者が大きなファイルをアップロードできるようにしたい場合は、あなたのウェブサーバーが大きなファイルサイズを許可するように設定されていることを確認してください。そうしないと、訪問者がエラーメッセージを受け取る可能性があります。HTTP Error 413 Request Entity Too Large. ASP.NETのファイルアップロード設定は、Web.configファイルで調整することができます。

<httpRuntime maxRequestLength="your-desired-request-length" />。
<requestLimits maxAllowedContentLength="your-max-allowed-content-length" />

数

Number要素を使用して、数値を入力するフィールドを追加します。

セクション	アイテム	説明
詳細	ラベル	特定のフォームフィールドがどのような情報を求めているかを連絡先に伝えるキャプション。
	フィールド名	要素の名前。Field nameには必ず意味のある名前を使用してください。Field nameは、フォームフィールドのSitecore定義項目の実際のItem名です。
	標準値	初期値
	プレースホルダテキスト	期待される値を説明するためのヒントとして機能するフォームフィールド内のテキスト。プレースホルダテキストは、連絡先がフィールドをクリックすると消えます。例えば、ここにあなたの名前を入力してください。
	最小値	最小値を決定します。連絡先は、入力がこのフィールドで指定された値よりも低い場合、検証エラーメッセージを表示します。
	最大値	最大値を決定します。連絡先には、入力がこのフィールドで指定された値よりも高い場合、検証エラーメッセージが表示されます。
	ステップ	連絡先に偶数のみを記入させる場合など、数字の間隔を指定します。既定値は 1 です。
バリデーション	フィールドの検証	フィールドバリデーションを適用するかどうかを決定します。
	フィールドの重要性	訪問者がフィールドに記入する必要があるかどうかを示します。オプションはオプションまたは必須です。
スタイル	CSSクラス	フィールドのCSSクラスを定義します。
	ラベル用CSSクラス	ラベルのCSSクラスを定義します。
条件	編集条件	Web フォームのフィールドに条件付きアクションを適用します。条件を追加するには、[条件の編集] をクリックします。
詳細設定	保存を許可する	フォーム送信時に入力されたフィールドデータを保存することを有効または無効にします。
	パフォーマンスのトラッキング	フィールドのパフォーマンスに関するデータを記録する場合に選択します。トラッキングを機能させるためには、設定タブで、フォームのパフォーマンストラッキングチェックボックスも選択する必要があります。
	バリュープロバイダー	フィールドをリンクするソースを選択します。フォームのプリフィル値はこのソースから取得されます。
	値プロバイダパラメータ	フィールドに一致するキーを入力します。

シングルライン テキスト

1行のテキストを入力するフィールドを追加するには、1行テキスト要素を使用します。例えば、名前を入力するフィールドの場合。

セクション	アイテム	説明
詳細	ラベル	特定のフォームフィールドがどのような情報を求めているかを連絡先に伝えるキャプション。
	フィールド名	要素の名前。
	デフォルト値	初期値。
	プレースホルダテキスト	期待される値を説明するためのヒントとして機能するフォームフィールド内のテキスト。プレースホルダテキストは、連絡先がフィールドをクリックすると消えます。例えば、ここにあなたの名前を入力してください。
	最小テキスト長	1行テキスト要素の入力フィールドの最小テキスト長を決定します。連絡先の入力がこのフィールドで指定された文字数よりも短い場合、検証エラーメッセージが表示されます。
	最大テキスト長	1行テキスト要素の入力フィールドの最大テキスト長を決定します。連絡先の入力がこのフィールドで指定された文字数よりも長い場合、検証エラーメッセージが表示されます。
バリデーション	フィールドの検証	フィールドバリデーションを適用するかどうかを決定します。
	フィールドの重要性	連絡先がフィールドに記入する必要があるかどうかを示します。オプションはオプションまたは必須です。
スタイリング	CSSクラス	フィールドのCSSクラスを定義します。
	ラベル用CSSクラス	ラベルのCSSクラスを定義します。
条件	編集条件	Web フォームのフィールドに条件付きアクションを適用します。条件を追加するには、[条件の編集] をクリックします。
詳細設定	保存を許可する	フォーム送信時に入力されたフィールドデータを保存することを有効または無効にします。
	パフォーマンスのトラッキング	フィールドのパフォーマンスに関するデータを記録する場合に選択します。トラッキングを機能させるためには、設定タブで、フォームのパフォーマンストラッキングチェックボックスも選択する必要があります。
	バリュープロバイダー	フィールドをリンクするソースを選択します。フォームのプリフィル値はこのソースから取得されます。
	値プロバイダパラメータ	フィールドに一致するキーを入力します。

複数行テキスト

複数行テキスト要素を使用して、複数行のテキストを入力するフィールドを追加します。この要素は、住所やコメントや説明などの長い回答に使用することができます。

セクション	アイテム	説明
詳細	ラベル	特定のフォームフィールドがどのような情報を求めているかを連絡先に伝えるキャプション。
	フィールド名	要素の名前。
	デフォルト値	初期値。
	プレースホルダテキスト	期待される値を説明するためのヒントとして機能するフォームフィールド内のテキスト。プレースホルダテキストは、連絡先がフィールドをクリックすると消えます。例えば、ここにあなたの名前を入力してください。
	行数	利用可能な行数を決定します。
	最小テキスト長	複数行テキスト要素の入力フィールドの最小テキスト長を決定します。連絡先の入力がこのフィールドで指定された文字数よりも短い場合、検証エラーメッセージが表示されます。
	最大テキスト長	複数行テキスト要素の入力フィールドの最大テキスト長を決定します。連絡先には、入力がこのフィールドで指定された文字数よりも長い場合、検証エラーメッセージが表示されます。
バリデーション	フィールドの検証	フィールドバリデーションを適用するかどうかを決定します。
	フィールドの重要性	連絡先がフィールドに記入する必要があるかどうかを示します。オプションはオプションまたは必須です。
スタイリング	CSS クラス	フィールドのCSSクラスを定義します。
	ラベル用CSSクラス	ラベルのCSSクラスを定義します。
条件	編集条件	Web フォームのフィールドに条件付きアクションを適用します。条件を追加するには、[条件の編集] をクリックします。
詳細設定	保存を許可する	フォーム送信時に入力されたフィールドデータを保存することを有効または無効にします。
	パフォーマンスのトラッキング	フィールドのパフォーマンスに関するデータを記録する場合に選択します。トラッキングを機能させるためには、設定タブで、フォームのパフォーマンストラッキングチェックボックスも選択する必要があります。
	バリュープロバイダー	フィールドをリンクするソースを選択します。フォームのプリフィル値はこのソースから取得されます。
	値プロバイダパラメータ	フィールドに一致するキーを入力します。

電子メール

メールアドレスを入力するフィールドを追加するには、Email要素を使用します。

セクション	アイテム	説明
詳細	ラベル	特定のフォームフィールドがどのような情報を求めているかを連絡先に伝えるキャプション。
	フィールド名	要素の名前。
	デフォルト値	初期値。
	プレースホルダテキスト	期待される値を説明するためのヒントとして機能するフォームフィールド内のテキスト。プレースホルダテキストは、連絡先がフィールドをクリックすると消えます。例えば、ここにあなたの名前を入力してください。
	最小テキスト長	Email要素の入力フィールドの最小テキスト長を決定します。連絡先は、入力がこのフィールドで指定された文字数よりも短い場合、検証エラーメッセージを表示します。
	最大テキスト長	Email要素の入力フィールドの最大テキスト長を決定します。連絡先は、入力がこのフィールドで指定された文字数よりも長い場合、検証エラーメッセージを表示します。
バリデーション	フィールドの検証	フィールドバリデーションを適用するかどうかを決定します。オプションは Email Validator または String Length Validator です。
	フィールドの重要性	連絡先がフィールドに記入する必要があるかどうかを示します。オプションはオプションまたは必須です。
スタイリング	CSSクラス	フィールドのCSSクラスを定義します。
	ラベル用CSSクラス	ラベルのCSSクラスを定義します。
条件	編集条件	Web フォームのフィールドに条件付きアクションを適用します。条件を追加するには、[条件の編集] をクリックします。
詳細設定	保存を許可する	フォーム送信時に入力されたフィールドデータを保存することを有効または無効にします。
	パフォーマンスのトラッキング	フィールドのパフォーマンスに関するデータを記録する場合に選択します。トラッキングを機能させるためには、設定タブで、フォームのパフォーマンストラッキングチェックボックスも選択する必要があります。
	バリュープロバイダー	フィールドをリンクするソースを選択します。フォームのプリフィル値はこのソースから取得されます。
	値プロバイダパラメータ	フィールドに一致するキーを入力します。

メールでの確認

メールアドレスの誤送信を防ぐために、メールの確認欄の利用を検討してみてはいかがでしょうか。

Section	Item	Description
Details	Email label	Caption that tells your contacts what information a particular form field is asking for.
	Confirm email label	Caption that tells your contacts what information a particular form field is asking for.
	Field name	Name of the element.
	Default value	Initial value.
	Email placeholder text	Text in a form field that functions as a hint to describe the expected value. The placeholder text disappears when the contact clicks the field. For example, Enter your email address here.
	Confirm email placeholder text	Text in a form field that functions as a hint to describe the expected value. The placeholder text disappears when the contact clicks the field. For example, Re-type your email address here. For this setting to apply, you must select the String Length Validator check box in the Field validation field.
	Minimum text length	Determines the minimum text length for the input field of the Email element. Contacts see a validation error message if their input is shorter than the number of characters specified in this field. For this setting to apply, you must select the String Length Validator check box in the Field validation field.
	Maximum text length	Determines the maximum text length for the input field of the Email element. Contacts see a validation error message if their input is longer than the number of characters specified in this field.
Validation	Field validation	Determines whether field validation is applied. The options are Email Validator or String Length Validator.
	Field importance	Indicates whether the contact must fill in the field. The options are Optional or Mandatory.
Styling	CSS class	Defines the CSS class of the field.
	CSS class for label	Defines the CSS class of the label.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settings tab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the field.

電話番号

電話番号を入力するフィールドを追加するには、Telephone要素を使用します。

Section	Item	Description
Details	Label	Caption that tells your contacts what information a particular form field is asking for.
	Field name	Name of the element.
	Default value	Initial value.
	Placeholder text	Text in a form field that functions as a hint to describe the expected value. The placeholder text disappears when the contact clicks the field. For example, Enter your first name here,
	Minimum text length	Determines the minimum text length. Contacts see a validation error message if their input is shorter than the number of characters specified in this field.
	Maximum text length	Determines the maximum text length. Contacts see a validation error message if their input is longer than the number of characters specified in this field.
Validation	Field validation	Determines whether field validation is applied. The options are Phone Number Validator or String Length Validator.
	Field importance	Indicates whether the contact must fill in the field. The options are Optional or Mandatory.
Styling	CSS class	Defines the CSS class of the field.
	CSS class for label	Defines the CSS class of the label.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settings tab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the field.

チェックボックス

Checkbox要素を使用して、ユーザーがトグルしてオプションを選択できるようにするチェックボックスを表示します。

Section	Item	Description
Details	Label	Caption that tells your contacts what information a particular form field is asking for.
	Field name	Name of the element.
	Checked	Determines the check box value that is preselected by default.
Validation	Field importance	Indicates whether the contact must fill in the field. The options are Optional or Mandatory.
Styling	CSS class	Defines the CSS class of the field.
	CSS class for label	Defines the CSS class of the label.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settings tab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the field.

日付

Date要素を使用して、日付を入力するフィールドを追加します。

Section	Item	Description
Details	Label	Caption that tells your contacts what information a particular form field is asking for.
	Field name	Name of the element.
	Selected date	Specifies the date selected by default.
	Start date	Specifies the date range start date.
	End date	Specifies the date range end date.
Validation	Field importance	Indicates whether the contact must fill in the field. The options are Optional or Mandatory.
Styling	CSS class	Defines the CSS class of the field.
	CSS class for label	Defines the CSS class of the label.
Conditions	Edit conditions	Apply conditional actions to fields in web forms. Click Edit conditions to add a condition.
Advanced settings	Allow save	Enables or disables saving the filled-in field data upon form submission.
	Performance tracking	Select to record data about how the field performs. For tracking to work, on the Settings tab, the Performance tracking checkbox for the form must also be selected.
	Value provider	Select the source that you want to link the field to. The prefill value of the form will be fetched from this source.
	Value provider parameters	Enter the key to match the

注釈

Sitecore フォームは、<input type=date> HTML5要素を使用して日付フィールドをレンダリングします。この要素はIE11とMac OS Safariブラウザではサポートされていません。これらのブラウザでdatetime picker要素を使用して日付フィールドを取得するには、カスタム要素の実装を検討してください。

ちなみに

https://doc.sitecore.com/users/93/sitecore-experience-platform/en/the-basic-elements.html