> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# フォームを設計する

> Widget Studioで入力、ドロップダウン、トグル、チェックボックスなどのフォーム要素を追加・設定し、カスタマイズされたデータ収集フォームを作成します。

Widget Studioでウィジェットを作成したら、要素を追加してフォームを構築します。

## 利用可能なフォーム要素

左メニューをクリックして要素を追加します。

下にスクロールして **Form** セクションを見つけます。複数の要素タイプが利用できます。これらを組み合わせて、パーソナライズされたインタラクティブなフォームを作成できます。

* **Button**: 特性を編集できるボタン
* **Input**: 訪問者から **string** データを収集できる、完全にカスタマイズ可能なテキスト入力。
* **Date**: 訪問者から日付を要求するフィールド。クリックすると日付ピッカーパネルが開きます。
* **Time**: 訪問者から時刻を要求するフィールド。クリックすると時刻選択パネルが開きます。
* **Toggle**: 2つの状態（たとえば **ON** と **OFF**）を追加できるトグル。
* **Checkbox**: テキスト要素を追加できるチェックボックス。
* **RadioButton**: テキスト要素を追加できるラジオボタン。
* **Select**: さまざまな選択可能なオプションを入力できる、完全にカスタマイズ可能なドロップダウン。
* **Textarea**: プレースホルダーを含む、完全にカスタマイズ可能なテキストボックス。
* **Range input**: 訪問者が特定の範囲内の値を選択できる、完全に編集可能なスライダー。
* **Hidden input**: フォームと一緒に送信されるがユーザーには表示されないメタデータを保存するために使用される、非表示のフォームフィールド。
* **FormErrorMessage**: フォームでエラーが発生した場合に特定のメッセージを表示するテキストフィールド。

<Note>
  まず、デフォルト設定である **Desktop** ビューで要素を追加します。次に、必要に応じてデザインを別のデバイス（モバイル/タブレット）に適応させることができます。別のデバイスで行った変更は、そのデバイスに固有のままで、他のデバイスには影響しません。
</Note>

## フォームの設計

要素を選択すると、編集メニューの上部に **General** と **States** の2つのタブが表示されます。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-forms/design-your-form/0.png)
</Frame>

### Generalタブ

このタブを選択して、要素のプロパティを編集します。ここには、要素のコアプロパティ（ホバーなど特定の状態に固有でないもの）があります。

要素タイプに応じて、位置、パディング、アニメーションなどのさまざまな特性を変更できます。

#### ユースケースの例

ニュースレター登録フォームを作成したいとします。Widget Studioで利用可能な **Newsletter** テンプレートの1つから始めることができます。このベースに2つのドロップダウンとトグルを追加してパーソナライズできます。このフォームを作成するには:

1. **Add an element** をクリックします。
2. formsセクションで **Select** タイプを選びます。
3. **Add option** をクリックして、リストにオプションを追加します。この例では、**Latest products** オプションを追加します。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-forms/design-your-form/1.png)
</Frame>

訪問者が **Latest products** を選択したときに表示される2つ目のオプションが必要だとします。手順は以下の通りです。

1. **Add an element** をクリックします。
2. formsセクションで **Select** タイプを選びます。
3. 左メニューで、2つ目のドロップダウンを非表示にします。表示させるには[イベントを設定する](../associate-events-and-actions-with-your-widget)必要があります。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-forms/design-your-form/2.png)
</Frame>

4. 各訪問者にフォーム送信前に **Terms & conditions** への同意を求める **Toggle** 要素を追加します。
5. **Button** 要素を追加します。

その後、情報の検証とデータの送信を構成する必要があります。

<Note>
  また、要素に対して[ルールを設定する](./add-rules-to-your-form-fields)こともできます: これは必須フィールドですか？検証前にフィールドの内容をチェックすべきですか？
</Note>

### Statesタブ

**States** タブでは、要素の状態（ホバー、アクティブ、無効）のスタイルを編集できます。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-forms/design-your-form/3.png)
</Frame>

すべての状態は編集可能ですが、状態の編集可能なプロパティは選択した要素によって異なります。