---
title: "ウェブページにフォームを追加"
slug: "add-a-form-to-a-webpage"
abstract: "コンテンツエディターまたはエクスペリエンスエディターを使って、ウェブページにフォームを挿入してください。"
---
# ウェブページにフォームを追加

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

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

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

![Default form elements for the website shown in the File Explorer.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FieldTemplates.png)

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

Sitecoreフォームを正しく動作させるには、まずMVCレイアウトを作成して追加する必要があります。 [MVCとレンダリング](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/mvc-and-renderings.html "MVC and renderings")を参照してください。

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

1.  コンテンツエディターで*sitecore/Layout*に行き、右クリック **でレイアウト**を右クリックし、「 **挿入**」をクリックし、「 **レイアウトMVC**」をクリックします。
    
    ![Layouts Insert MVC Layout](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/FORMS-insert-MVC.png)
    
2.  ウィザード **の名前ページで名前** を入力し、「 **次へ**」をクリックします。
    
3.  ウィザードの **「ロケーション** 」ページで、新しいファイルのフォルダを選択してください。例えば、*Layouts*して **「作成**」をクリックし、「 **閉じ**る」をクリックしてください。
    
4.  MVC Layout.cshtmlファイルを作成して、ウェブサイトのViewsフォルダに追加してください。
    
5.  コンテンツツリーで*MVC Layout*アイテムをクリックし、**データ**セクションの**コンテンツ**タブでパスをMVC Layout.cshtmlファイルを参照するように変更してください。
    
    ![MVC Layout path](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/MvcPath.png)
    
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>

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

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

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

1.  コンテンツエディターで、自分のウェブサイトにアクセスし、フォームを挿入したいページをクリックし、**プレゼンテーション** タブの「 **詳細**」をクリックしてください。
    
2.  レイアウト **詳細** ダイアログボックスで、デフォルトのレイアウトをクリックして変更してください(この例ではサンプルレイアウトです)。
    
    ![Insert a form in a web page](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/537A8732A3B342748D16277934F53850.png)
    
3.  **デバイスエディター**のダイアログボックスの**レイアウト**タブで、ドロップダウンリストをクリックし、Layouts/MVC Layoutを選択します。
    
    ![MVC layout](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/DeviceEditor_MVCLayout.png)
    
4.  **コントロール**タブで既存のコントロールを削除し、**追加をクリックします。**
    
5.  「 **レンダリングを選択する** 」ダイアログボックスで、*Renderings/System/Forms*に行き、**Mvcフォーム**をクリックします。
    
6.  「 **プレイスホルダーに追加** 」欄で「main」を入力し、「 **選択**」をクリックします。
    
    ![Add to placeholder](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/A1C6184C6DCB4CD4BDB2F85E949FC398.png)
    
7.  **デバイスエディター**の**コントロール**タブで、**Mvcフォーム**コントロールをクリックして選択し、その後**編集**をクリックします。
    
8.  **コントロールプロパティ**のダイアログボックスの**データソース**フィールドで、「**ブラウズ」**をクリックし、ページに追加したいフォームを選択して「**OK」**をクリックします。
    
    ![Add the data source](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/ControlPropertiesDataSourceForForms.png)
    
9.  **「OK**」をクリックして**コントロールプロパティ**ダイアログボックスを閉じ、**OK**をクリックして**デバイスエディター**ダイアログボックスを閉じ、最後に**OK**をクリックして**レイアウト詳細**ダイアログボックスを閉じます。
    
10.  変更を保存し、F9キーを押してサイトを公開してください。
     
     > !注公開するには、メインのプレースホルダー定義項目を作成し、ページが公開可能である必要があります。
     

## エクスペリエンスエディターでウェブページにフォームを追加してください

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

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

1.  **Mvcフォーム**コントロールを**プレースホルダー設定**に追加するには、コンテンツエディターの「*sitecore/Layout/Placeholder Settings*」に移動し、例えば*メイン*のようなプレースホルダーをクリックしてください。
    
    ![Add the MVC control to the placeholder settings.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/PlaceholderMain.png)
    
2.  **データ**セクションの**「許可されたコントロール**」欄で「**編集**」をクリックします。
    
3.  「 **アイテム選択** 」ダイアログボックスで、*Layout/Renderings/System/Forms*に移動し、**Mvcフォーム** をダブルクリックして **「選択** 済みリスト」に移動し、「 **OK」**をクリックします。
    
4.  変更を保存してください。
    
5.  Experience Editorで該当するウェブページを開き、「 **新しいコンポーネントを追加」**をクリックします。
    
    ![In the Experience Editor, click add a new component.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/9F296C11BA164BF6BE96E6168C463026.png)
    
6.  **こちらをクリックしてください**。
    
7.  「 **レンダリングの選択** 」ダイアログボックスで「 **Mvcフォーム**」をクリックし、「 **選択**」をクリックします。
    
    ![Select the Mvc Form component](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/B28C549F3F0A4C90A55D1D1D9F667AD8.png)
    
8.  **「関連コンテンツ選択**」ダイアログボックスでフォームを選択し、「**OK」**をクリックします。
    
    ![Select your form and click OK.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/EE6283AE2A9047888656841693942D2E.png)
    
    フォームはページに追加されます:
    
    ![Form displays on page.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/AA8D1826B5C0404BB8FCB21D41E34DB0.png)