---
title: "ウォークスルー:レジスタページの作成"
slug: "walkthrough--creating-a-register-page"
abstract: "登録ユーザーのアクション項目やクラスの作成方法を学びましょう。"
---
# ウォークスルー:レジスタページの作成

このウォークスルーは「 [プリフィルフォーム」ウォークスルーシリーズ](https://doc.sitecore.com/xp/ja/developers/92/sitecore-experience-manager/prefilling-forms-walkthrough-series.html "Prefilling forms walkthrough series") の第1部で、登録ページの作成方法を説明しています。

このウォークスルーでは、以下の方法を説明します:

-   Visual Studioプロジェクトをセットアップします
-   レジスタユーザー提出アクションクラスを作成します
-   ユーザーアクションエディターの登録項目を作成する
-   テキストレンダリングパラメータを追加してください
-   登録ユーザー提出アクション項目を作成する
-   登録フォームを作成する
-   MVCレイアウトを作成する
-   ウェブページに登録フォームを追加してください

> !注このウォークスルーの例に従うには、Sitecore Rocks Visual Studioプラグインが必要です。このプラグインはVisual Studio 2019以前のバージョンと互換性があります。

## Visual Studioプロジェクトをセットアップします

まずはVisual Studioでサンプルプロジェクトを作成します。

Visual Studioプロジェクトを設定するには:

1.  Visual Studioでは、ASP.NETウェブプロジェクトを作成し、ValueProviderSampleと名付けます。
    
2.  以下の参考文献を加えます。
    
    -   Sitecore.ExperienceForms
    -   Sitecore.ExperienceForms.Mvc
    -   Sitecore.Kernel
    -   Sitecore.Analytics
    -   Sitecore.Mvc
    -   Sitecore.MVC.Analytics
    
    このプロジェクトは [プリフィルフォームシリーズ](https://doc.sitecore.com/xp/ja/developers/92/sitecore-experience-manager/prefilling-forms-walkthrough-series.html "Prefilling forms walkthrough series")のすべてのウォークスルーに使用されます。
    

## レジスタユーザー提出アクションクラスを作成します

次に、[すべてのカスタムサブミッション](https://doc.sitecore.com/xp/ja/developers/92/sitecore-experience-manager/walkthrough--creating-a-custom-submit-action.html "Walkthrough: Creating a custom submit action") アクション実装用のフォルダを作成します。

レジスタユーザー submit action classを作成するには:

1.  ValueProviderSampleプロジェクトで*SubmitActions*というフォルダを追加します。
    
2.  *SubmitActions*フォルダに別のフォルダを作成し、名前を*RegisterUser*にします。
    
3.  RegisterUserDataというクラスを作成し、*RegisterUser*フォルダに追加します。これは私たちのRegisterUser Submit Action実装で使われたデータ構造クラスです。
    
    public class RegisterUserData
     {
     public Guid EmailFieldId { get; set; }
    
     public Guid PasswordFieldId { get; set; }
    
     public Guid FullNameFieldId { get; set; }
    
     public string ProfileId { get; set; }
    }
    
4.  プロジェクトのルートに行き、*Helper*という名前のフォルダを作成します。
    
5.  静的FieldHelperクラスを作成し、作成したばかりの*Helper*フォルダに追加します。このヘルパークラスはフォームフィールドから値を取得するために使われます。
    
    public static class FieldHelper
    
        {
    
            public static
    IViewModel GetFieldById(Guid id, IList<IViewModel> fields)
    
            {
    
                return
    fields.FirstOrDefault(f => Guid.Parse(f.ItemId) == id);
    
            }
    
            public static string
    GetValue(object field)
    
            {
    
                return
    field?.GetType().GetProperty("Value")?.GetValue(field, null)?.ToString()
    ?? string.Empty;
    
            }
    
6.  RegisterUserクラスを作成し、*RegisterUser*フォルダに追加します。このクラスをSubmitActionBaseクラスから継承し、抽象Executeメソッドをオーバーライドします。
    
    public class RegisterUser : SubmitActionBase<RegisterUserData>
     {
     public RegisterUser(ISubmitActionData submitActionData) : base(submitActionData)
     {
     }
    
     protected override bool Execute(RegisterUserData data, FormSubmitContext formSubmitContext)
     {
     Assert.ArgumentNotNull(data, nameof(data));
     Assert.ArgumentNotNull(formSubmitContext, nameof(formSubmitContext));
    
     var fields = GetFormFields(data, formSubmitContext);
    
     Assert.IsNotNull(fields, nameof(fields));
    
     if (EmailOrPasswordFieldsIsNull(fields))
     {
     return AbortForm(formSubmitContext);
     }
    
     var values = fields.GetFieldValues();
    
     if (EmailOrPasswordsIsNull(values))
     {
     return AbortForm(formSubmitContext);
     }
    
     var result = Register(values.Email, values.Password, values.FullName, data.ProfileId);
    
     if (!result)
     {
     return AbortForm(formSubmitContext);
     }
    
     return true;
     }
    
     protected virtual bool Register(string email, string password, string name, string profileId)
     {
     Assert.ArgumentNotNullOrEmpty(email, nameof(email));
     Assert.ArgumentNotNullOrEmpty(password, nameof(password));
    
     try
     {
     var user = User.Create(Context.Domain.GetFullName(email), password);
     user.Profile.Email = email;
    
     if (!string.IsNullOrEmpty(profileId))
     {
     user.Profile.ProfileItemId = profileId;
     }
    
     user.Profile.FullName = name;
     user.Profile.Save();
     }
     catch (Exception ex)
     {
     Log.SingleError("Register user failed", ex);
     return false;
     }
    
     return true;
     }
    
     private RegisterUserFormFields GetFormFields(RegisterUserData data, FormSubmitContext formSubmitContext)
     {
     Assert.ArgumentNotNull(data, nameof(data));
     Assert.ArgumentNotNull(formSubmitContext, nameof(formSubmitContext));
    
     return new RegisterUserFormFields
     {
     Email = FieldHelper.GetFieldById(data.EmailFieldId, formSubmitContext.Fields),
     Password = FieldHelper.GetFieldById(data.PasswordFieldId, formSubmitContext.Fields),
     FullName = FieldHelper.GetFieldById(data.FullNameFieldId, formSubmitContext.Fields),
     };
     }
    
     private bool EmailOrPasswordFieldsIsNull(RegisterUserFormFields field)
     {
     Assert.ArgumentNotNull(field, nameof(field));
     return field.Email == null || field.Password == null;
     }
    
     private bool EmailOrPasswordsIsNull(RegisterUserFieldValues values)
     {
     Assert.ArgumentNotNull(values, nameof(values));
     return string.IsNullOrEmpty(values.Email) || string.IsNullOrEmpty(values.Password);
     }
    
     private bool AbortForm(FormSubmitContext formSubmitContext)
     {
     formSubmitContext.Abort();
     return false;
     }
    
     internal class RegisterUserFormFields
     {
     public IViewModel Email { get; set; }
     public IViewModel Password { get; set; }
     public IViewModel FullName { get; set; }
    
     public RegisterUserFieldValues GetFieldValues()
     {
     return new RegisterUserFieldValues
     {
     Email = FieldHelper.GetValue(Email),
     Password = FieldHelper.GetValue(Password),
     FullName = FieldHelper.GetValue(FullName)
     };
     }
     }
    
     internal class RegisterUserFieldValues
     {
     public string Email { get; set; }
     public string Password { get; set; }
     public string FullName { get; set; }
     }
     }

## ユーザーアクションエディターの登録項目を作成する

Register User Submitアクションアイテムを作成する前に、フォームフィールドをRegisterUserDataにマッピングするためのSPEAKコントロールエディターを作成しなければなりません。

> !注このウォークスルーの例では、Sitecore Rocks Visual Studioプラグインが必要です。このプラグインはVisual Studio 2019以前のバージョンに対応しています。

ユーザーアクションエディタの登録項目を作成するには:

1.  Visual Studioプロジェクトでフォルダを作成し、Scriptsと名付けてください。
    
2.  JavaScriptファイルを作成し、RegisterUser.jsと名付けます。このファイルは*Register User Action Editor*アイテムに使用されます。
    
    ![Select the file in Visual Studio](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/FORMS-register-user-scripts.png)
    
3.  以下のスクリプトをファイルにコピーします:
    
    (function (speak) {
    
     var parentApp = window.parent.Sitecore.Speak.app.findApplication('EditActionSubAppRenderer'),
    
     designBoardApp = window.parent.Sitecore.Speak.app.findComponent('FormDesignBoard');
    
     var getFields = function () {
    
     var fields = designBoardApp.getFieldsData();
    
     return \_.reduce(fields,
    
     function (memo, item) {
    
     if (item && item.model && item.model.hasOwnProperty("value")) {
    
     memo.push({
    
     itemId: item.itemId,
    
     name: item.model.name
    
     });
    
     }
    
     return memo;
    
     },
    
     
    
     {
    
     itemId: '',
    
     name: ''
    
     }
    
     ,
    
     this);
    
     };
    
     speak.pageCode("underscore",
    
     function (\_) {
    
     return {
    
     initialized: function () {
    
     this.on({
    
     "loaded": this.loadDone
    
     },
    
     this);
    
     this.Fields = getFields();
    
     this.MapRegisterUserForm.children.forEach(function (control) {
    
     if (control.deps && control.deps.indexOf("bclSelection") !== -1) {
    
     control.IsSelectionRequired = false;
    
     }
    
     });
    
     this.ItemTreeView.on("change:SelectedItem", this.changedSelectedItemId, this);
    
     if (parentApp) {
    
     parentApp.loadDone(this, this.HeaderTitle.Text, this.HeaderSubtitle.Text);
    
     parentApp.setSelectability(this, true);
    
     }
    
     },
    
     changedSelectedItemId: function () {
    
     parentApp.setSelectability(this, true, this.ItemTreeView.SelectedItemId);
    
     },
    
     setDynamicData: function (propKey) {
    
     var componentName = this.MapRegisterUserForm.bindingConfigObjectpropKey.split(".")0;
    
     var component = this.MapRegisterUserFormcomponentName;
    
     var items = this.Fields.slice(0);
    
     if (this.ParameterspropKey &&
    
     !\_.findWhere(items, { itemId: this.ParameterspropKey })) {
    
     var currentField = {
    
     itemId: this.ParameterspropKey,
    
     name: this.ParameterspropKey +
    
     " - " +
    
     (this.ValueNotInListText.Text || "value not in the selection list")
    
     };
    
     items.splice(1, 0, currentField);
    
     component.DynamicData = items;
    
     $(component.el).find('option').eq(1).css("font-style", "italic");
    
     } else {
    
     component.DynamicData = items;
    
     }
    
     },
    
     loadDone: function (parameters) {
    
     this.Parameters = parameters || {};
    
     \_.keys(this.MapRegisterUserForm.bindingConfigObject).forEach(this.setDynamicData.bind(this));
    
     this.MapRegisterUserForm.BindingTarget = this.Parameters;
    
     this.ItemTreeView.SelectedItemId = this.Parameters.profileId;
    
     },
    
     getData: function () {
    
     var formData = this.MapRegisterUserForm.getFormData(),
    
     keys = \_.keys(formData);
    
     keys.forEach(function (propKey) {
    
     if (formDatapropKey == null || formDatapropKey.length === 0) {
    
     if (this.Parameters.hasOwnProperty(propKey)) {
    
     delete this.ParameterspropKey;
    
     }
    
     } else {
    
     this.ParameterspropKey = formDatapropKey;
    
     }
    
     }.bind(this));
    
     this.Parameters.profileId = this.ItemTreeView.SelectedItemId;
    
     return this.Parameters;
    
     }
    
     };
    
     });
    
    })(Sitecore.Speak);
    
4.  Visual StudioでSitecoreエクスプローラーを開き、Sitecoreインスタンスへの接続を確立します。Sitecore Rocks Folder Syncを使って、RegisterUser.jsファイルを次のフォルダにあなたのウェブサイトにデプロイしてください: sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions。
    
    ![Path to Actions folder.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/FORMS-register-user-js.png)
    
5.  ユーザー *アクションエディタSitecore*登録を作成するには、Sitecoreエクスプローラーでコアデータベースを展開し、sitecore/shell/client/Applications/FormsBuilder/Layouts/Actionsに移動します。
    
6.  アクションを **右クリックし**、**追加**をクリックしてから **「新しいアイテム**」をクリックします。
    
7.  「**新しいアイテムを追加**」ダイアログボックスで「Speak-BasePage」を検索し、「*RegisterUser*」と名前を入力し、「**OK」**をクリックします。
    
    ![Select item](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/image2.png)
    
8.  作成した*RegisterUser*アイテムを右クリックして「 **タスク**」をクリックし、「 **デザインレイアウト**」をクリックしてください。
    
9.  追加したアイテムの **デザインレイアウト**タブで、**レイアウト** フィールドをSpeak-FlexLayoutに更新してください。
    
10.  左上で「 **レンダリングを追加**」をクリックし、PageCodeレンダリングを挿入します。
     
     ![Insert PageCode rendering](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/image5.png)
     
11.  PageCodeレンダリングのプロパティウィンドウを開きます。PageCodeScriptFileName値をRegisterUser.jsファイルのファイル位置に更新します。例えば:
     
     /sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/RegisterUser.js .
     
12.  SpeakCoreVersion値をSPEAK 2-xに更新してください。
     
     ![Specify SPEAK version](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/FORMS-register-user-speak.png)
     
13.  その後、**デザインレイアウト** ウィンドウでこれらのレンダリングに進みます。
     
     ![Renderings in the Design Layout window](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/FORMS-register-user-renderings.png)
     

## テキストレンダリングパラメータを追加してください

テキストレンダリングパラメータを追加すると:

1.  作成したRegisterUser Action Editorアイテムに移動し、PageSettingsアイテムを追加してください。
    
2.  PageSettingsアイテムに移動し、「テキストパラメータレンダリング」を検索してクリックし、「**追加**」をクリックすると、HeaderTitle、HeaderSubtitle、ValueNotInListTextの3つのアイテムが追加されます。
    
    > !注あなたはsitecore/client/Business Component Library/version2
    
3.  3つの項目それぞれをクリックして、以下のフィールドを編集してください:
    
    -   **IsVisible** – 選択解除
        
    -   本文を編集:
        
        HeaderTitle - フォームフィールドをユーザー登録データにマッピングする。
        
        HeaderSubtitle - フォーム内のフィールドをユーザープロファイルの詳細にマッピングします。
        
        ValueNotInListText - 選択リストにない値。
        
    
4.  PageSettingsアイテムに移動し、フォルダを追加し、名前をMapRegisterUserFormにしてください。
    
5.  Search FormDropList Parametersをクリックし、**追加**をクリックして追加します:
    
    -   メール
    -   パスワード
    -   フルネーム
6.  これらの項目のフィールド値は以下の表に従って更新してください:
    
    **FormDropList パラメータ**
    
    **ValueFieldName**
    
    **ディスプレイフィールドネーム**
    
    **フォームラベル**
    
    **BindingConfiguration**
    
    **メール**
    
    itemId
    
    名称
    
    メール
    
    emailFieldId/SelectedValue
    
    **パスワード**
    
    itemId
    
    名称
    
    パスワード
    
    passwordFieldId/SelectedValue
    
    **フルネーム**
    
    itemId
    
    名称
    
    フルネーム
    
    fullNameFieldId/SelectedValue
    
7.  Sitecore ExplorerでPageSettingsアイテムに移動し、**ItemTreeView Parameters**項目を追加し、*ItemTreeView*と名付けます。
    
8.  ItemTreeViewアイテムの**StaticData**フィールド値を「**Browse**」をクリックして更新してください。
    
9.  /sitecore/system/Setttings/Security/Profilesに移動し、Profilesフォルダをクリックして**OK**をクリックします。
    
    ![image10.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/image10.png)
    
10.  **データベース**フィールドの値を*コア*に設定してください。
     
11.  最後に、Page-Stylesheet-Fileアイテムを追加し、*Stylesheet*と名付けます。**スタイルシート**フィールドの値を/sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/Actions.cssに更新します。
     
     ![Add stylesheet](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/image11.png)
     

レンダリングリストは以下のようになります:

![What the rendering looks like](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/image12.png)

## 登録ユーザー提出アクションアイテムを作成してください

登録ユーザーを作成するには、アクションアイテムを送信してください:

1.  コンテンツエディターで*sitecore/System/Settings/Forms/Submit Actions*へ行ってください。
    
2.  右クリックで **「アクションを送信**」をクリックし、「 **挿入**」をクリックし、「**テンプレートから挿入**」をクリックします。
    
3.  /System/Forms/Submit Actionテンプレートをクリックし、**アイテム名**欄で名前*Register User*を入力し、「**挿入**」をクリックします。
    
    ![Insert submit action](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/image13.png)
    
4.  作成したアイテムにアクセスし、**設定** セクションの**Model Type**フィールドで値をRegisterUserクラスタイプ名に設定します:ValueProviderSample.SubmitActions.RegisterUser.RegisterUser
    
5.  **エラーメッセージ**欄に「*Register user failed!*」というエラーメッセージを入力してください。
    
6.  **エディター**フィールドで、作成したエディタをクリックしてください:RegisterUser。
    
    ![Insert editor](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/FORMS-register-user-field.png)
    
7.  アイテムを保存してください。
    

## 登録フォームを作成する

フォームを作成するには:

1.  フォームダッシュボードで **「作成**」をクリックします。
    
2.  以下のフィールドでフォームを作成します:
    
    種類
    
    レーベル
    
    フィールド名
    
    CSSクラス
    
    単行テキスト
    
    フルネーム
    
    フルネーム
    
    フォームコントロール
    
    メール
    
    メール
    
    メール
    
    フォームコントロール
    
    パスワード確認
    
    パスワード
    
    パスワード確認
    
    フォームコントロール
    
    送信ボタン
    
    登録
    
    送信ボタン
    
    BTN BTN-デフォルト
    
3.  オプションで、フォームフィールドをグループ化するためのセクションを追加することもできます:
    
    フィールド名
    
    フォームフィールド/セクション
    
    CSSクラス
    
    ユーザーデータセクション
    
    メールセクション、パスワードセクション
    
    フォームグループ col-MD-6
    
    メールセクション
    
    氏名、メールアドレス
    
    フォーム群
    
    パスワードセクション
    
    (パスワード確認)
    
    フォーム群
    
    サブミットセクション
    
    送信ボタン
    
    形態群 col-md-12
    
    フォームは次のようになります:
    
    ![View of the form](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/image15.png)
    
4.  フォームに「送信」ボタンを追加するには、「 **フォーム要素** 」ペインの **構造** セクションで「 **送信」ボタン** 要素をフォームにドラッグします。
    
5.  「 **アクションを送信** 」をクリックし、「 **ユーザー登録**」をクリックします。
    
    ![Add Submit action](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/image16.png)
    
6.  **Mapフォームの欄からユーザー登録データへの**ダイアログボックスで、対応するフォームフィールドを選択します。
    
7.  ツリービューを展開し、「**ユーザー**ノード」をクリックして**「OK」**をクリックします。
    
    ![Map form fieds to registration data](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/image17.png)
    
8.  フォームを保存し、名前を「 *Register Form*」と名付けてください。
    

## MVCレイアウトを作成する

フォームをウェブページに追加する前に、まずMVCレイアウトを作成しなければなりません。

MVCレイアウトを作成するには:

1.  ウェブサイトのViewsフォルダ内にフォルダを作成し、ValueProviderと名付けてください。
    
    ![ValueProvider folder](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/FORMS-register-user-view.png)
    
2.  コンテンツエディターで*Layout/Layouts*に移動し、レイアウトフォルダを挿入し、名前をValue Providerにします。
    
    ![Value Provider layout folder](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/FORMS-register-user-valueprovider.png)
    
3.  Value Providerフォルダを右クリックして「**挿入**」とレイアウト**MVC**をクリックします。
    
4.  レイアウト名MVC Layoutと名付け、先に作成したValue Providerフォルダに入れてください。
    
5.  Visual Studioプロジェクトに移動し、Viewsという名前のフォルダを作成してください。
    
6.  モデルを使わずに空のビューを作成してくださいMVC Layout.cshtml。ビューの名前は、コンテンツエディターで作成したMVCレイアウトの名前と同じでなければなりません。
    
    @using Sitecore.Mvc
    
    @{
    
    Layout = "~/Views/Mvc OuterLayout.cshtml";
    
    }
    
    <nav class="navbar navbar-inverse navbar-fixed-top">
    
    <div class="container">
    
    <div class="navbar-header">
    
    <a class="navbar-brand" href="https://doc.sitecore.com/xp/ja/developers/92/sitecore-experience-manager/walkthrough--creating-a-register-page.html#">@Html.Sitecore().Field("title")</a>
    
    </div>
    
    @RenderPage("~/Views/\_LoginPartial.cshtml")
    
    </div>
    
    </nav>
    
    <div class="container">
    
    <div class="row">
    
    @Html.Sitecore().Placeholder("main")
    
    </div>
    
    </div>
    
7.  \_LoginPartial.cshtmlという名前の別の空のビューを作成し、以下のコードをコピーします。
    
    @using Sitecore.Mvc
     @if (Request.IsAuthenticated)
     {
     var fullname = "Hello " + Sitecore.Context.User.Profile.FullName + "!";
     <ul class="nav navbar-nav navbar-right">
     <li>
     <a href="https://doc.sitecore.com/xp/ja/developers/92/sitecore-experience-manager/UserProfile">@fullname</a>
     </li>
     <li style="padding-top: 8px;">
     @Html.Sitecore().Placeholder("logout")
     </li>
     </ul>
     }a
     else
     {
    
     <ul class="nav navbar-nav navbar-right">
     <li>
     <a href="https://doc.sitecore.com/xp/ja/developers/92/sitecore-experience-manager/Login">Login</a>
     </li>
     <li>
     <a href="https://doc.sitecore.com/xp/ja/developers/92/sitecore-experience-manager/Register">Register</a>
     </li>
     </ul>
    
     }
    
8.  同じフォルダ内に「 Mvc OuterLayout.cshtml 」という名前のファイルを作成し、以下のコードをコピーします。
    
    @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()
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    
    @Html.RenderFormStyles()
    
    @Html.RenderFormScripts()
    
    </head>
    
    <body style="padding-top: 70px;">
    
    @RenderBody()
    
    </body>
    
    </html>
    
    あなたのViewsフォルダーはこんな感じです:
    
    ![The Views folder](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/FORMS-register-user-views-folder.png)
    
9.  すべてのViewsをViews/ValueProviderフォルダにRock Folder Syncを使って展開Sitecore
    

## ウェブページに登録フォームを追加してください

ウェブページに登録フォームを追加するには:

1.  */sitecore/Content*に移動し、**ホーム**を右クリックして「**挿入**」をクリックし、「**サンプルアイテム**」をクリックします。
    
2.  *Register*を入力して**OK**をクリックします。
    
3.  **プレゼンテーション**タブで「**詳細**」をクリックします。**レイアウト詳細**ダイアログボックスで、デフォルトのレイアウトをクリックして変更してください。
    
4.  **デバイスエディター**のダイアログボックスのドロップダウンリストからLayouts/MVC Layoutをクリックします。
    
5.  **コントロール**タブですべてのレンダリングを削除し、「**追加**」をクリックします。
    
6.  *Renderings/System/Forms*に行き、**Mvcフォーム**をクリックします。レンダリング**を選択する**ダイアログボックスの「**プレイスホルダーに追加**」欄で「*main*」を入力し、「**Select**」をクリックします。
    
7.  **コントロール**タブで**MVCフォーム**コントロールをクリックし、**編集**をクリックします。**データソース**フィールドで「**ブラウズ**」をクリックし、ページに追加したいフォームを選択します。この例では、「**フォーム登録**」をクリックします。
    
8.  前のステップで、フォーム、レイアウト、項目と子どもたちを公開してください。
    
    > !注アイテムのワークフロー状態が「 *Approved* 」状態であることを確認しましょう。
    
9.  ブラウザでレジスターページを読み込み、ユーザーを登録します。
    
    ![The Register form](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/92/sitecore-experience-manager/images/image21.png)
    

[次のウォークスルー](https://doc.sitecore.com/xp/ja/developers/92/sitecore-experience-manager/walkthrough--creating-a-login-page.html "Walkthrough: Creating a login page")でログイン・ログアウトページの作成方法を学びましょう。