1. Sitecoreフォーム

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

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

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

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

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

メモ

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

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

MVCレイアウトを追加する

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

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

  1. コンテンツ エディターでsitecore/Layoutに移動し、Layoutsを右クリックしてInsertをクリックし、MVC Layoutをクリックします。

    Layouts Insert MVC Layout

  2. ウィザードのNameページで、名前を入力してNextをクリックします。

  3. ウィザードのLocationページで、新しいファイルのフォルダー ( Layoutsなど) を選択し、Createをクリックして、Closeをクリックします。

  4. MVC Layout.cshtmlファイルを作成し、WebサイトのViewsフォルダーに追加します。

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

    MVC Layout path

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

    手記

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

    フォームスクリプトとスタイルは <root>/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
 	
<!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()
</head>
<body>
    <h1>@Html.Sitecore().Field("title")</h1>
     <div>
         @Html.Sitecore().Placeholder("main")
     </div>
     @Html.RenderFormStyles()
     @Html.RenderFormScripts()
</body>
</html>

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

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

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

  1. コンテンツエディターで、Webサイトに移動し、フォームを挿入するページをクリックして、PresentationタブでDetailsをクリックします。

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

    Insert a form in a web page

  3. Device Editorダイアログボックスの「Layouts」タブで、ドロップダウンリストをクリックし、「Layouts/MVC Layout」を選択します。

    MVC layout

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

  5. Select a Renderingダイアログボックスで、「 Renderings/System/Forms」に移動し、「 Mvc Form」をクリックします。

  6. Add to Placeholderフィールドにmainと入力し、Selectをクリックします。

    Add to placeholder

  7. Device Editorで、Controlsタブで、Mvc Formコントロールをクリックして選択し、Editをクリックします。

  8. Control PropertiesダイアログボックスのData Sourceフィールドで、「Browse」をクリックし、ページに追加するフォームを選択して、「OK」をクリックします。

    Add the data source

  9. OKをクリックしてControl Propertiesダイアログ ボックスを閉じ、OKをクリックしてDevice Editorダイアログ ボックスを閉じ、OKをクリックしてLayout Detailsダイアログ ボックスを閉じます。

  10. 変更を保存し、F9キーを押してサイトを公開します。

    手記

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

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

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

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

  1. Mvc FormコントロールをPlaceholder Settingsに追加するには、コンテンツ エディターでsitecore/Layout/Placeholder Settingsに移動し、プレースホルダー (mainなど) をクリックします。

    Add the MVC control to the placeholder settings.

  2. DataセクションのAllowed Controlsフィールドで、Editをクリックします。

  3. Select Itemsダイアログボックスで、Layout/Renderings/System/Formsに移動し、Mvc FormをダブルクリックしてSelectedリストに移動し、OKをクリックします。

  4. 変更を保存します。

  5. エクスペリエンス エディターで関連するWebページを開き、Add a new componentをクリックします。

    In the Experience Editor, click add a new component.

  6. 「 Add here」をクリックします。

  7. Select a Renderingダイアログボックスで、「 Mvc Form」をクリックし、「 Select」をクリックします。

    Select the Mvc Form component

  8. Select the Associated Contentダイアログボックスで、フォームを選択し、「OK」をクリックします。

    Select your form and click OK.

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

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