1. Sitecoreフォーム

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

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

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

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

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

!注FieldTemplatesフォルダの内容はリリースごとに変わります。

Default form elements for the website shown in the File Explorer.

MVCレイアウトを追加してください

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

MVCレイアウトを追加するには:

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

    Layouts Insert MVC Layout

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

  3. ウィザードの 「ロケーション 」ページで、新しいファイルのフォルダを選択してください。例えば、Layoutsして 「作成」をクリックし、「 閉じる」をクリックしてください。

  4. MVC Layout.cshtmlファイルを作成して、ウェブサイトのViewsフォルダに追加してください。

  5. コンテンツツリーでMVC Layoutアイテムをクリックし、データセクションのコンテンツタブでパスをMVC Layout.cshtmlファイルを参照するように変更してください。

    MVC Layout path

  6. フォームに関連付けられたスクリプトやスタイルを正しくレンダリングするには、MVC Layout.cshtmlファイル内にSitecore.ExperienceForms.Mvc.htmlへの参照を追加し、クロージングタグの前に@Html.RenderFormStyles()と@Html.RenderFormScripts()ヘルパーを追加します。これによりフォームJavaScriptファイルやスタイルシートに必要な参照が追加されます。

    !注スクリプトおよびスタイルヘルパーのコードは、フォームがレンダリングされるプレースホルダーの後に置く必要があります。

    フォームスクリプトやスタイルは /sitecore modules/Web/ExperienceForms/scriptsフォルダに保存され、@Html.RenderFormScripts() や @Html.RenderFormStyles() ヘルパーによって読み込まれます。

    MVC Layout.cshtmlファイルには以下のコードが含まれています。

    @using Sitecore.ExperienceForms.Mvc.Html @using Sitecore.Mvc @using Sitecore.Mvc.Analytics.Extensions

    @Html.Sitecore().VisitorIdentification()

    @Html.Sitecore().Field("title")

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

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

    @Html.Sitecore().Placeholder("main")
    @Html.RenderFormStyles() @Html.RenderFormScripts()

ウェブページにフォームを挿入する

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

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

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

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

    Insert a form in a web page

  3. デバイスエディターのダイアログボックスのレイアウトタブで、ドロップダウンリストをクリックし、Layouts/MVC Layoutを選択します。

    MVC layout

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

  5. 「 レンダリングを選択する 」ダイアログボックスで、Renderings/System/Formsに行き、Mvcフォームをクリックします。

  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」に移動し、例えばメインのようなプレースホルダーをクリックしてください。

    Add the MVC control to the placeholder settings.

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

  3. 「 アイテム選択 」ダイアログボックスで、Layout/Renderings/System/Formsに移動し、Mvcフォーム をダブルクリックして 「選択 済みリスト」に移動し、「 **OK」**をクリックします。

  4. 変更を保存してください。

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

    In the 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.
この記事を改善するための提案がある場合は、 お知らせください!