---
title: "フォームを設計する"
slug: "design-a-form"
abstract: "フォームデザイナーでフォーム要素を使ってフォームを作成する方法。"
---
# フォームを設計する

Sitecoreフォームは、標準的な要素を用いて迅速にフォームを作成できます。

-   保存や削除などの機能やコマンドに簡単にアクセスできるツールバー。
-   形を作るためのデザインキャンバス。
-   テンプレート **として保存**するなどの追加セーブオプションがあるドロップダウンメニュー。
-   フォーム作成に使える[フォーム要素](https://doc.sitecore.com/xp/ja/users/104/sitecore-experience-platform/the-form-elements.html "The Form elements")を含む**デザイン**タブです。
-   設定 **タブでは** 、スタイリング用のCSSクラスやサムネイル画像などの [フォーム設定](https://doc.sitecore.com/xp/ja/users/104/sitecore-experience-platform/the-form-settings.html "The form settings") を変更できます。条件、パフォーマンストラッキング、AJAX有効化、ロボット検出などの高度な設定にもアクセスできます。
-   フォームビュー、放棄率、エラー率の[統計](https://doc.sitecore.com/xp/ja/users/104/sitecore-experience-platform/analyzing-form-performance.html "Analyzing form performance")を提供する**パフォーマンス**タブ。

![Forms dashboard](https://doc.sitecore.com/api/markdown-image/xp/ja/users/104/sitecore-experience-platform/images/FormDesignerWithCallouts.png)

> !ヒントフォーム作成を始める前に、フォームの対象者が誰で、どんな情報を捉えたいのかを決めてください。次に、どの質問をするか、どのフォーム要素を含めるかを決めます。

## フォームを作成する

空白のフォームから始めることも、テンプレートを使ってフォームを作成することもできます。Sitecoreフォームにはあらかじめ定義されたテンプレートはありませんが、「 **テンプレートとして保存** 」コマンドを使って自分でテンプレートを作成できます。

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

1.  フォームダッシュボードで **「作成**」をクリックします。
    
2.  新しいフォームを一から作成するには、「 **空白フォーム**」をクリックし、フォームの基準となるテンプレートを選択してください。
    
    ![On the Forms dashboard, click blank form or click a form template.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/104/sitecore-experience-platform/images/CreateFormUsingTemplate.png)
    
    > !重要ダッシュボードにフォームが表示されない場合は、インスタンスのインストール時にインストール後の手順を完了したか必ず確認してください。Sitecoreフォームを正しく動作させるには、インストール後に検索インデックスを再構築する必要があります。
    

## フォームに要素を追加する

フォーム要素**のパネルから**フォームキャンバスにフォーム要素をドラッグしてフォームにフィールドを追加します。フォームキャンバスに要素を配置した後、**Form要素**ペインの**General**タブで設定を変更できます。

> !注フォーム要素の設定を定義する際には、意味のあるフィールド名を追加してください。フィールド名は、フォームフィールドのSitecore定義項目の実際のアイテム名です。フォーム要素に意味のある名前を与えることで、例えばフォームフィールドのパフォーマンストラッキングで区別しやすくなります。

フォームフィールドを追加するには:

1.  **フォーム要素**のペインで、追加したい要素をクリックしてフォームキャンバスにドラッグします。
    
    ![Drag the form to the canvas.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/104/sitecore-experience-platform/images/39F98EAE23084765B12D42FA2868F2F7.png)
    
    緑の線はフォームキャンバス上の要素の有効な位置を示します。
    
2.  フォーム要素の設定を指定するには、キャンバス上でその要素をクリックして選択します。
    
3.  フォームの変更を確認するには、**フォーム要素**のペインの**設定**タブでフォーム要素設定を定義し、**適用をクリックします。**
    
    > !注ウェブサイトに掲載する前にフォームをプレビューすることをお勧めします。Sitecoreフォームでのフォームの表示方法は、ウェブページ上のフォームの実際のスタイリングを反映していない場合があります。
    
4.  フォームにリストを追加するには、**フォーム要素** ペインの「 **リスト** 」セクションで、**ドロップダウンリスト** をフォームキャンバスにドラッグします。
    
    ![Dropdown list element](https://doc.sitecore.com/api/markdown-image/xp/ja/users/104/sitecore-experience-platform/images/FORMS-dropdownlist.png)
    
5.  フォームに「送信」ボタンを追加するには、「 **フォーム要素** 」の **「構造** 」セクションで、**送信ボタン** の要素をフォームキャンバスにドラッグしてください。
    
    ![Add the submit button to the form.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/104/sitecore-experience-platform/images/39F90160CC774CF799E56DEE92A88DC8.png)
    
6.  **詳細**セクションでボタン名を入力し、**ナビゲーションステップ**フィールドで「**送信**」を選択します。
    
7.  **詳細**セクションで「**Submit action**」の隣の![XM\_forms\_submitbuttonplus.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/104/sitecore-experience-platform/images/XM_forms_submitbuttonplus.png)をクリックし、適用するアクションを選択してください。追加のサブミッションアクションを追加したい場合は、このステップを繰り返してください。
    
8.  フォームの変更内容を見るには **、「適用** 」をクリックしてください。
    
9.  ツールバーには:
    
    -   新しいフォームを保存し名前を付けるには、「 **保存**」をクリックしてください。
    -   フォームのコピーを保存し名前を付けるには、ドロップダウンの矢印をクリックし、その後 **「名前を付けて保存**」をクリックしてください。
    -   フォームをテンプレートとして保存するには、ドロップダウンの矢印をクリックし、その後 **「テンプレートとして保存**」をクリックしてください。

## フォームフィールドを削除する

フォームフィールドを削除するには:

1.  **フォーム要素**のパネルで、削除したいフィールドをクリックします。
2.  ツールバーで **「削除**」をクリックします。