---
title: "フォームを設計する"
slug: "design-a-form"
abstract: "Form要素を使ってフォームを構築する方法。"
---
# フォームを設計する

Sitecoreフォームは標準的な要素を使って素早くフォームを作成できます。フォーム作成を始める前に、連絡先に何を尋ねたいか、含めたいフォームフィールドを決める必要があります。

## フォームを作成する

空白のフォームから始めるか、テンプレートを使ってフォームを作成することができます。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/91/sitecore-experience-platform/images/CreateFormUsingTemplate.png)
    
    > !重要ダッシュボードにフォームが表示されない場合は、インスタンスのインストール時にインストール後の手順を完了したか必ず確認してください。Sitecoreフォームを正しく動作させるには、インストール後に検索インデックスを再構築する必要があります。
    

## フォームフィールドを追加する

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

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

1.  **フォーム要素**のペインで、追加したい要素をクリックしてフォームキャンバスにドラッグします。
    
    ![Drag the form to the canvas.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/91/sitecore-experience-platform/images/39F98EAE23084765B12D42FA2868F2F7.png)
    
    緑色の線は、フォームキャンバス上の要素の位置を示します。
    
2.  フォーム要素の設定を変更するには、キャンバス上でその要素をクリックして選択し、**フォーム要素** のペインで変更を適用してください。例えば、フィールドにCSSクラスを追加してスタイルを付けます。
    
3.  設定の変更が終わったら、「 **適用** 」をクリックしてフォームの変更を確認してください。
    
    > !注ウェブサイトに公開する前にフォームをプレビューすることをお勧めします。フォームアプリケーションでの表示方法は、ウェブページの実際のフォームのスタイルを反映していない場合があります。
    
4.  フォームにリストを追加するには、Form要素パネルの **「Lists** 」セクションで、**ドロップダウンリスト** をフォームにドラッグします。
    
    必ず意味のある **フィールド名**を追加してください。フィールド名は、フォームフィールドのSitecore定義項目の実際のアイテム名です。フォーム要素に意味のある名前を与えることで、例えばフォームフィールドのパフォーマンストラッキングで区別しやすくなります。
    
    ![Dropdown list element](https://doc.sitecore.com/api/markdown-image/xp/ja/users/91/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/91/sitecore-experience-platform/images/39F90160CC774CF799E56DEE92A88DC8.png)
    
6.  **詳細**セクションでボタン名を入力し、**ナビゲーションステップ**フィールドで「**送信**」を選択します。
    
7.  **詳細**セクションで「**Submit action**」の隣の![XM\_forms\_submitbuttonplus.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/91/sitecore-experience-platform/images/XM_forms_submitbuttonplus.png)をクリックし、適用するアクションを選択してください。追加のサブミッションアクションを追加したい場合は、このステップを繰り返してください。
    
8.  フォームの変更点を見るには **「応募」** をクリックしてください。
    
    > !注時々、フォームからフィールドを削除したいことがあります。フォームフィールドを削除するには、削除したいフィールドをクリックしてから削除をクリックします。
    
9.  フォームを保存するために:
    
    -   新しいフォームを保存し、名前を付けるために **「保存** 」をクリックしてください。
    -   **選択したフォームを保存**して、フォームのコピーを保存し名前を付けます。
    -   フォームを **テンプレートとして保存** するには「フォームを保存」をクリックしてください。