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

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

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

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

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

> !重要フォームスクリプトやスタイルは <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レイアウトを追加するには:

1.  コンテンツエディターでsitecore/Layoutに行き、右クリック **でレイアウト**を右クリックし、「 **挿入**」をクリックし、「 **レイアウトMVC**」をクリックします。
    
    ![Layouts Insert MVC Layout](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/91/sitecore-experience-manager/images/FORMS-insert-MVC.png)
    
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";
    
    }
    
    <h1>@Html.Sitecore().Field("title")</h1>
    <div>
     @Html.Sitecore().Placeholder("main")
    </div>
    
6.  MVC OuterLayout.cshtmlファイルを作成して、ウェブサイトの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>

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

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

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

1.  コンテンツエディターで、ウェブサイトにアクセスし、フォームを挿入したいページをクリックし、**プレゼンテーション** タブの「 **詳細**」をクリックしてください。
    
2.  レイアウト **詳細** ダイアログボックスで、デフォルトのレイアウトをクリックして変更します(次の例では「サンプルレイアウト」)。
    
    ![Insert a form in a web page](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/91/sitecore-experience-manager/images/537A8732A3B342748D16277934F53850.png)
    
3.  **デバイスエディター**のダイアログボックスのドロップダウンリストからLayouts/MVC Layoutをクリックします。
    
    ![MVC layout](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/91/sitecore-experience-manager/images/DeviceEditor_MVCLayout.png)
    
4.  **コントロール**タブで既存のコントロールを削除し、**追加をクリックします。**
    
5.  「 **レンダリングを選択する** 」ダイアログボックスでRenderings/System/Formsに移動し、**MvcForm**をクリックします。
    
6.  「 **プレースホルダーに追加** 」欄でmainを入力し、「 **選択**」をクリックします。
    
    ![Add to placeholder](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/91/sitecore-experience-manager/images/A1C6184C6DCB4CD4BDB2F85E949FC398.png)
    
7.  デバイスエディターの **コントロール** タブで、MVCフォームコントロールをクリックし、**編集**をクリックします。
    
8.  **コントロールプロパティ**のダイアログボックスの**「データソース**」欄で、ページに追加したいフォームを選択し、**OK**をクリックします。
    
    ![Add the data source](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/91/sitecore-experience-manager/images/ControlPropertiesDataSourceForForms.png)
    
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.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/91/sitecore-experience-manager/images/PlaceholderMain.png)
    
4.  変更を保存してください。
    
5.  Experience Editorで該当するウェブページを開き、「 **新しいコンポーネントを追加」**をクリックします。
    
    ![In Experience Editor, click add a new component.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/91/sitecore-experience-manager/images/9F296C11BA164BF6BE96E6168C463026.png)
    
6.  **こちらをクリックしてください**。
    
7.  「 **レンダリングの選択** 」ダイアログボックスで「 **Mvcフォーム**」をクリックし、「 **選択**」をクリックします。
    
    ![Select the Mvc Form component](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/91/sitecore-experience-manager/images/B28C549F3F0A4C90A55D1D1D9F667AD8.png)
    
8.  **「関連コンテンツ選択**」ダイアログボックスでフォームを選択し、「**OK」**をクリックします。
    
    ![Select your form and click OK.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/91/sitecore-experience-manager/images/EE6283AE2A9047888656841693942D2E.png)
    
    フォームはページに追加されます:
    
    ![Form displays on page.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/91/sitecore-experience-manager/images/AA8D1826B5C0404BB8FCB21D41E34DB0.png)