ウェブページにフォームを追加
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecoreフォームでは、新しい空白フォームを簡単に作成したり、テンプレートを使うことができます。コンテンツエディターやエクスペリエンスエディターを使って、フォームをウェブページに挿入できます。最初のステップは、デフォルトのサンプルレイアウトを自分で作成したMVCレイアウトに置き換えることです。その後、フォームをウェブページに挿入できます。
デフォルトで、Sitecoreフォームにはすべてのフォーム要素(Website/Views/FormBuilder/FieldTemplates)に対する基本的な.cshtml Razorファイルが付属しています。これらのファイルをカスタマイズしたり、必要に応じて新しいファイルを追加したりできます。
MVCレイアウトを追加してください
Sitecoreフォームを正しく動作させるには、まずMVCレイアウトを作成して追加する必要があります。 MVCとレンダリングを参照してください。
!重要フォームスクリプトやスタイルは
/sitecore modules/Web/ExperienceFormsフォルダに保存され、@Html.RenderFormScripts() や @Html.RenderFormStyles() ヘルパーによって読み込まれます。 フォームに関連付けられたスクリプトやスタイルを正しくレンダリングするためには、MVC Layout.cshtmlとMVC OuterLayout.cshtmlの2つのレイアウトを使用する必要があります。 MVC OuterLayoutはSitecore.ExperienceForms.Mvc.htmlへの参照を追加し、@Html.RenderFormStyles() および @Html.RenderFormScripts() ヘルパーを呼び出すために使われます。これにより、フォームのJavaScriptファイルやスタイルシートに必要な参照が追加されます。
MVCレイアウトを追加するには:
-
コンテンツエディターでsitecore/Layoutに行き、右クリック でレイアウトを右クリックし、「 挿入」をクリックし、「 レイアウトMVC」をクリックします。

-
ウィザード の名前ページで名前 を入力し、「 次へ」をクリックします。
-
ウィザードの 「ロケーション 」ページで、Sitecoreのコンテンツツリー内の新しいファイル用のフォルダを選択してください。例えば、Layouts、をクリックして 「次へ」をクリックします。
-
ファイル位置ページで、新しいファイルをSitecoreのWebrootファイル構造で保存する場所を選択し、「作成」をクリックします。
-
MVC Layout.cshtmlファイルを開き、Layout = MVC OuterLayout.cshtmlを追加します。MVC Layout.cshtmlファイルには以下のコードが含まれています。
@using Sitecore.Mvc @using Sitecore.Mvc.Analytics.Extensions
@{ Layout = "Mvc OuterLayout.cshtml";
}
@Html.Sitecore().Field("title")
Version:日本語翻訳に関する免責事項このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
@Html.Sitecore().Placeholder("main") -
MVC OuterLayout.cshtmlファイルを作成して、ウェブサイトのViewsフォルダに追加してください。以下のコードを含む必要があります:
@using Sitecore.Mvc @using Sitecore.ExperienceForms.Mvc.Html @using Sitecore.Mvc.Analytics.Extensions @{ Layout = null; }
@Html.Sitecore().VisitorIdentification() @Html.RenderFormStyles() @Html.RenderFormScripts() @RenderBody()
ウェブページにフォームを挿入する
MVCレイアウトを追加した後、ウェブページにフォームを挿入できます。
フォームをページに追加するには:
-
コンテンツエディターで、ウェブサイトにアクセスし、フォームを挿入したいページをクリックし、プレゼンテーション タブの「 詳細」をクリックしてください。
-
レイアウト 詳細 ダイアログボックスで、デフォルトのレイアウトをクリックして変更します(次の例では「サンプルレイアウト」)。

-
デバイスエディターのダイアログボックスのドロップダウンリストからLayouts/MVC Layoutをクリックします。

-
コントロールタブで既存のコントロールを削除し、追加をクリックします。
-
「 レンダリングを選択する 」ダイアログボックスでRenderings/System/Formsに移動し、MvcFormをクリックします。
-
「 プレースホルダーに追加 」欄でmainを入力し、「 選択」をクリックします。

-
デバイスエディターの コントロール タブで、MVCフォームコントロールをクリックし、編集をクリックします。
-
コントロールプロパティのダイアログボックスの**「データソース**」欄で、ページに追加したいフォームを選択し、OKをクリックします。

-
「OK」をクリックしてコントロールプロパティダイアログボックスを閉じ、OKをクリックしてデバイスエディターダイアログボックスを閉じ、最後にOKをクリックしてレイアウト詳細ダイアログボックスを閉じます。
-
変更を保存し、F9キーを押してサイトを公開してください。
!注公開するには、メインのプレースホルダー定義項目を作成し、ページが公開可能である必要があります。
エクスペリエンスエディターでウェブページにフォームを追加する
エクスペリエンスエディターでフォームをウェブページに挿入できます。これを行うには、ページにMVCレイアウトを使用し、プレースホルダーにはMvcフォームコントロールが許可されていることを確認してください。
エクスペリエンスエディターでウェブページにフォームを追加するには:
-
Mvcフォームコントロールをプレースホルダー設定に追加するには、コンテンツエディターでsitecore/Layout/Placeholder Settingsに移動し、例えばmainなどのプレースホルダーをクリックしてください。
-
データセクションの**「許可されたコントロール**」欄で「編集」をクリックします。
-
「 アイテム選択 」ダイアログボックスで、Mvcフォームをクリックして **「OK」**をクリックします。

-
変更を保存してください。
-
Experience Editorで該当するウェブページを開き、「 **新しいコンポーネントを追加」**をクリックします。

-
こちらをクリックしてください。
-
「 レンダリングの選択 」ダイアログボックスで「 Mvcフォーム」をクリックし、「 選択」をクリックします。

-
「関連コンテンツ選択」ダイアログボックスでフォームを選択し、「**OK」**をクリックします。

フォームはページに追加されます:
