1. Sitecoreフォーム

ウェブページにフォームを追加

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

このページの翻訳は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レイアウトを追加するには:

  1. コンテンツエディターでsitecore/Layoutに行き、右クリック でレイアウトを右クリックし、「 挿入」をクリックし、「 レイアウトMVC」をクリックします。

    Layouts Insert MVC Layout
  2. ウィザード の名前ページで名前 を入力し、「 次へ」をクリックします。

  3. ウィザードの 「ロケーション 」ページで、Sitecoreのコンテンツツリー内の新しいファイル用のフォルダを選択してください。例えば、Layouts、をクリックして 「次へ」をクリックします。

  4. ファイル位置ページで、新しいファイルをSitecoreのWebrootファイル構造で保存する場所を選択し、「作成」をクリックします。

  5. 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")
  6. 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レイアウトを追加した後、ウェブページにフォームを挿入できます。

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

  1. コンテンツエディターで、ウェブサイトにアクセスし、フォームを挿入したいページをクリックし、プレゼンテーション タブの「 詳細」をクリックしてください。

  2. レイアウト 詳細 ダイアログボックスで、デフォルトのレイアウトをクリックして変更します(次の例では「サンプルレイアウト」)。

    Insert a form in a web page
  3. デバイスエディターのダイアログボックスのドロップダウンリストからLayouts/MVC Layoutをクリックします。

    MVC layout
  4. コントロールタブで既存のコントロールを削除し、追加をクリックします。

  5. 「 レンダリングを選択する 」ダイアログボックスでRenderings/System/Formsに移動し、MvcFormをクリックします。

  6. 「 プレースホルダーに追加 」欄でmainを入力し、「 選択」をクリックします。

    Add to placeholder
  7. デバイスエディターの コントロール タブで、MVCフォームコントロールをクリックし、編集をクリックします。

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

    Add the data source
  9. 「OK」をクリックしてコントロールプロパティダイアログボックスを閉じ、OKをクリックしてデバイスエディターダイアログボックスを閉じ、最後にOKをクリックしてレイアウト詳細ダイアログボックスを閉じます。

  10. 変更を保存し、F9キーを押してサイトを公開してください。

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

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

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

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

  1. Mvcフォームコントロールをプレースホルダー設定に追加するには、コンテンツエディターでsitecore/Layout/Placeholder Settingsに移動し、例えばmainなどのプレースホルダーをクリックしてください。

  2. データセクションの**「許可されたコントロール**」欄で「編集」をクリックします。

  3. 「 アイテム選択 」ダイアログボックスで、Mvcフォームをクリックして **「OK」**をクリックします。

    Add the MVC control to the placeholder settings.
  4. 変更を保存してください。

  5. Experience Editorで該当するウェブページを開き、「 **新しいコンポーネントを追加」**をクリックします。

    In Experience Editor, click add a new component.
  6. こちらをクリックしてください。

  7. 「 レンダリングの選択 」ダイアログボックスで「 Mvcフォーム」をクリックし、「 選択」をクリックします。

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

    Select your form and click OK.

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

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