Sitecoreフォーム

Webページにフォームを追加する

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Sitecore Formsでは、新しい空白のフォームを簡単に作成したり、テンプレートを使用したりできます。その後、コンテンツエディターまたはエクスペリエンスエディターを使用して、フォームをWebページに挿入できます。最初のステップは、デフォルトのサンプルレイアウトを作成したMVCレイアウトに置き換えることです。その後、フォームをWebページに挿入できます。

デフォルトでは、Sitecore Formsには、すべてのフォーム要素 (Website/Views/FormBuilder/FieldTemplates) の基本的な .cshtml Razorファイルが付属しています。これらのファイルをカスタマイズしたり、必要に応じて新しいファイルを追加したりできます。

MVCレイアウトを追加する

Sitecore Formsを正しく機能させるには、まずMVCレイアウトを作成して追加する必要があります。「MVCとレンダリング」を参照してください。

大事な

フォームスクリプトとスタイルは <root>/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に移動し、Layoutsを右クリックしてInsertをクリックし、MVC Layoutをクリックします。
ウィザードのNameページで、名前を入力してNextをクリックします。
ウィザードのLocationページで、Sitecoreコンテンツツリーで新しいファイルのフォルダー ( Layoutsなど) を選択し、Nextをクリックします。
File Locationページで、Sitecoreウェブルートファイル構造で新しいファイルを保存する場所を選択し、Createをクリックします。

MVC Layout.cshtmlファイルを開き、Layout = MVC OuterLayout.cshtmlを追加します。MVC Layout.cshtmlファイルには、次のコードが含まれています。

@using Sitecore.Mvc
@using Sitecore.Mvc.Analytics.Extensions

@{
    Layout = "Mvc OuterLayout.cshtml";

}

<h1>@Html.Sitecore().Field("title")</h1>
<div>
    @Html.Sitecore().Placeholder("main")
</div>

MVC OuterLayout.cshtmlファイルを作成して、WebサイトのViewsフォルダーに追加します。次のコードが含まれている必要があります。

@using Sitecore.Mvc
@using Sitecore.ExperienceForms.Mvc.Html
@using Sitecore.Mvc.Analytics.Extensions
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@Html.Sitecore().Field("title", new { DisableWebEdit = true })</title>
    @Html.Sitecore().VisitorIdentification()
    @Html.RenderFormStyles()
    @Html.RenderFormScripts()
</head>
<body>
    @RenderBody()
</body>
</html>

Webページにフォームを挿入する

MVCレイアウトを追加したら、フォームをWebページに挿入できます。

フォームをページに追加するには:

コンテンツエディターで、Webサイトに移動し、フォームを挿入するページをクリックして、PresentationタブでDetailsをクリックします。
Layout Detailsダイアログボックスで、デフォルトのレイアウトをクリックして変更します(次の例では「サンプルレイアウト」)。
Device Editorダイアログボックスで、ドロップダウンリストからLayouts/MVC Layoutをクリックします。
Controlsタブで、既存のコントロールを削除し、Addをクリックします。
Select a Renderingダイアログボックスで、「 Renderings/System/Forms」に移動し、「 MvcForm」をクリックします。
Add to Placeholderフィールドにmainと入力し、Selectをクリックします。
デバイスエディタのControlsタブで、MVCフォームコントロールをクリックし、Editをクリックします。
Control Propertiesダイアログボックスの「Data Source」フィールドで、ページに追加するフォームを選択し、「OK」をクリックします。
OKをクリックしてControl Propertiesダイアログボックスを閉じ、OKをクリックしてデバイスエディターダイアログボックスを閉じ、OKをクリックしてLayout Detailsダイアログボックスを閉じます。
変更を保存し、F9キーを押してサイトを公開します。

メモ

公開するには、メインのプレースホルダ定義アイテムを作成し、ページが公開可能である必要があります。

エクスペリエンスエディターでWebページにフォームを追加する

エクスペリエンスエディターでフォームをWebページに挿入できます。これを行うには、ページにMVCレイアウトを使用していること、およびプレースホルダーに対してMvcフォームコントロールが許可されていることを確認する必要があります。

エクスペリエンスエディターでウェブページにフォームを追加するには:

Mvcフォームコントロールをプレースホルダ設定に追加するには、コンテンツエディタでsitecore/Layout/Placeholder Settingsに移動し、プレースホルダ ( mainなど) をクリックします。
DataセクションのAllowed Controlsフィールドで、Editをクリックします。
Select Itemsダイアログボックスで、Mvcフォームをクリックし、「OK」をクリックします。
変更を保存します。
エクスペリエンスエディターで関連するWebページを開き、Add a new componentをクリックします。
「 Add here」をクリックします。
Select a Renderingダイアログボックスで、「 Mvc Form」をクリックし、「 Select」をクリックします。
Select the Associated Contentダイアログボックスで、フォームを選択し、「OK」をクリックします。

フォームがページに追加されます。

この記事を改善するための提案がある場合は、お知らせください!

Webページにフォームを追加する

MVCレイアウトを追加する

Webページにフォームを挿入する

エクスペリエンス エディターでWebページにフォームを追加する

エクスペリエンスエディターでWebページにフォームを追加する