> ## 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でアンケート要素とフォーム要素を設定し、ニュースレターフォームを作成して、回答の収集先を選択します。

アンケート要素とフォーム要素は、訪問者から回答を収集します。**Short answer**や**NPS**などのアンケート要素は、アンケートのフィードバックを収集します。**Dropdown**や**Checkbox**などのフォーム要素は、日付、時刻、トグルを含むフォームの入力を収集します。1 つのフォームには両方のグループの要素を組み合わせることができ、**Button** 要素で回答を送信します。

回答に基づいて行動するため、回答の内容は重要です。ニュースレターの登録には、有効に機能するメールアドレスが必要です。アンケートには、比較できる回答が必要です。Widget Studioでは、各回答をルールと照合して確認できます。また、回答に応じて他の要素を表示または非表示にすることもできます。

## アンケート要素

アンケート要素は、**Add element** パネルの **Survey** セクションに表示されます。

![Survey セクションを開いた Add element パネル。Button、Short Answer、Long Answer、Multiple Choice、NPS、Scale、Hidden input を表示している](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/forms-survey-add-element-step-1-zoom2.png)

* **Button:** 訪問者がクリックすると、アンケートを送信します。トリガーとして使用するには、**When is the survey submitted?** で **A button is clicked**を選択します。
* **Short answer:** 訪問者から短いテキストの入力を収集します。
* **Long answer:** 長めの自由記述のフィードバックを収集します。
* **Multiple choice:** チェックボックス、単一選択または複数選択、任意の「Other」欄、回答のランダム化に対応しています。
* **NPS:** 任意のフォローアップ質問とともに、ネット・プロモーター・スコア（NPS）のデータを収集します。
* **Scale:** 絵文字、星、ハート、または数字を使って評価スケールを表示します。
* **Hidden input:** フォームと一緒に送信されるメタデータを保存する、目に見えないフォームフィールドです。訪問者には表示されません。

各要素は、Widget Studioの専用の設定とスタイルのオプションで構成できます。

## フォーム要素

**Form** セクションには、次の要素が含まれています:

* **Input:** 訪問者から文字列データを収集できる、完全にカスタマイズ可能なテキスト入力欄です。
* **Date:** 訪問者に日付を入力してもらうフィールドです。訪問者がクリックすると、日付ピッカーのパネルが開きます。
* **Time:** 訪問者に時刻を入力してもらうフィールドです。訪問者がクリックすると、時刻の選択パネルが開きます。
* **Toggle:** 2 つの状態（例: **ON** と **OFF**）を持つトグルです。
* **Checkbox:** **Text** 要素を追加できるチェックボックスです。
* **Radio button:** **Text** 要素を追加できるラジオボタンです。
* **Dropdown:** 選択可能な選択肢を追加できる、完全にカスタマイズ可能なドロップダウンです。
* **Text area:** プレースホルダー付きの、完全にカスタマイズ可能なテキストボックスです。
* **Range input:** 訪問者が範囲内の値を選択できる、完全に編集可能なスライダーです。
* **Error message:** フォームでエラーが発生したときに、特定のメッセージを表示するテキストフィールドです。
* **Multi step form**

フォームに日付、時刻、またはトグルが必要な場合は、フォーム要素を使用します。**Survey** セクションには、これらのフィールドに対応する要素はありません。

## アンケート要素を設定する

キャンバス上でアンケート要素を選択して、その設定を開きます。

### Button

![ボタンテキスト、Advanced Settings、Style のオプションを表示した Button 要素の Settings タブ。キャンバス上でボタンをプレビューしている](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-csat-nps-and-survey/add-a-survery-element-to-your-widget/button.png)

#### General settings

* **Button text:**
  * テキストフィールドにボタンのテキストを入力します。
  * テキストフィールドの前にあるボタンを使用して、次の操作を行います:
    * AI でテキストを編集します。
    * スタイルのオプションにアクセスします。
    * テキストのフォントを編集します。
    * テキストの配置を変更します。
    * テキストの色を編集します。
    * 絵文字を追加します。
  * **three-dots menu**をクリックして、次の操作を行います:
    * 書式を削除します。
    * テキストエディターを展開します。
* **Style:** ボタンの背景の種類と色を変更します。
* **Animation:** ボタンの表示時または非表示時のアニメーションを選択します。

#### Advanced settings

**Advanced Settings**で、次の項目を定義できます:

* **Default state:** ボタンがデフォルトで表示されるかどうかを指定します。

> [!NOTE]
>
> ボタンをオフにした場合、以前にいずれかのアンケートで **Make required**を有効にしていると、同じ画面の必須要素すべてに訪問者が回答した時点で、ボタンは自動的にオンになります。

* **Redirection URL:** ボタンが訪問者をリダイレクトする URL です。
* **Open in new tab:** リダイレクト先の URL を新しいタブで開くかどうかを切り替えます。

#### Design

**Design** メニューには、2 つのタブが表示されます。**General** と **Style** です。

##### General

**General** タブでは、次の項目を定義できます:

* **Alignment:** ボタンの配置を変更します。
* **Reposition and resize:** ボタンを **X** 軸と **Y** 軸上に配置したり、幅と高さをピクセルまたはパーセンテージで定義したりできます。
  * **Activate translate settings**をクリックして、移動のオプションにアクセスします。現在の X 軸または Y 軸の位置から、指定したピクセルまたはパーセンテージの分だけボタンを移動できます。
* **Devices synchronization:** デバイスを選択し、ボタンを他のデバイスとどのように同期するかを選択します。
  * **Fully synchronized:** ボタンは、すべてのプロパティをマスターデバイスと同期します。
  * **Partially synchronized:** 別のデバイスでプロパティを変更しない限り、ボタンは、すべてのプロパティをマスターデバイスと同期します。
  * **No synchronization:** ボタンは、マスターデバイスとプロパティを一切同期しません。このデバイスでボタンのプロパティを個別に定義します。
  * **Hide:** ボタンはデバイスに表示されません。
* **Padding:** ボタンの境界線とテキストの間に余白を追加します。
* **CSS and classes:** CSS とクラスを追加して、ボタンのスタイルを設定します。

##### Style

**Style** タブでは、次の項目を定義できます:

* **State:** 選択肢は **enabled**、**hover**、**off** です。
* **Text:** テキストの行の高さを決め、必要なテキストの変換を適用します。
* **Background:** ボタンの背景の種類または色を変更します。
* **Border:** ボタンの四辺すべてに境界線を追加するか、カスタムの境界線を追加します。
* **Shadow:** 影を追加し、その色や位置を編集します。

### Short answer and long answer

![Label、Placeholder、Pre-filled value、Advanced Settings を表示した Short Answer 要素の Settings タブ。キャンバス上でフィールドをプレビューしている](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.24.42-1536x914.png)

#### General settings

* **Label/Question:** メインのプロンプトまたは質問です。
* **Placeholder (optional):** 訪問者が入力する前に表示されるテキストです。訪問者が入力を始めると消えます。
* **Pre-filled value (optional):** 事前に定義された回答をフィールドに挿入します。
* **Default state:** フィールドの読み込み時に、オンかオフかを決定します。

#### Advanced settings

* **Label position:** ラベルを入力フィールドの前か後ろに配置します。
* **Character limit:** 入力できる文字数の上限です。
* **Make required:** 訪問者が送信する前に、質問への回答を必須にします。ラベルの末尾に `*` が自動的に追加されます。**Make required**を有効にすると **Validation rule** セクションが表示され、入力に対する追加の制約を定義できます。
* **Validation rule:** **Not empty**や**Length**などのルールで回答を検証します。各オプションの動作は、[Short answer の入力を検証する](https://docs.kameleoon.com/ja/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/add-rules-to-your-form-fields.md)をご覧ください。
* **Error message:** 検証に失敗したときに表示されるカスタムメッセージです。エラーメッセージのスタイルは、**Design** > **Answers**で**Invalid state**を選択して設定します。

### Multiple choice

![Checkboxes の回答形式、Question フィールド、Answer 1 と Answer 2、Add an answer リンクを表示した Multiple Choice 要素の Settings タブ](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/multiple-choice.png)

#### General settings

* **Question:** 回答の前に表示される質問文です。
* **Answers:** 回答の選択肢を追加、削除、または並べ替えます。**Add an answer**をクリックすると、選択肢を増やせます。

#### Advanced settings

* **Multiple selection:** 訪問者が複数の回答を選択できるようにします。オフの場合、訪問者は 1 つの回答しか選択できません。
* **Add "Other":** 「Other」というラベルの自由記述のテキスト入力を追加し、訪問者がカスタムの回答を入力できるようにします。
* **Randomize answers:** 選択バイアスを減らすために、訪問者ごとに回答の表示順をランダムに並べ替えます。
* **Make required:** 有効にすると、訪問者はアンケートを送信するために、少なくとも 1 つの回答を選択する必要があります。質問のラベルの後に `*` が自動的に追加されます（**Design** タブの **Question** と同じスタイルです）。

### Scale

![Scale type が Stars、Scale item count が 5 に設定された Scale 要素の Settings タブ。キャンバス上に 5 つ星のプレビューを表示している](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.44.30-1-1536x916.png)

#### General settings

* **Scale type:** Emojis、Stars、Hearts、Numbersのいずれかです。
* **Scale item count:** スケール上の値の数です（例: 1-5）。
* **Question:** メインのプロンプトです。

#### Scale labels

* **Label position:** ラベルをスケール項目の前に表示するか、後ろに表示するか、またはラベルを非表示にします。
* スケール項目ごとにラベルをカスタマイズできます。

#### Advanced settings

* **Make required:** 送信前に訪問者が回答することを必須にします。

### NPS

![質問フィールド、フォローアップ質問が All users に設定された NPS 要素の Settings タブ。キャンバス上に 0 から 10 までのスコアのプレビューを表示している](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.44.01-1-1536x915.png)

#### Question structure

* NPSの質問文は、標準化のため一部が固定されています。質問の一部だけを編集できます。言語を変更するには、**Translation** タブに移動して、デフォルトの言語を設定します。

#### Fields

* **How likely are you to recommend (X) to (Y)?**
  * 製品またはサービスと対象のフィールドを編集できます。
* **Follow-up question (optional):**
  * 表示対象は **All users** か、次のユーザーのみです:
    * Promoters (score 9-10)
    * Passives (score 7-8)
    * Detractors (score 0-6)
  * フォローアップのコンテンツを条件付きで表示できます。
* **Make required:** 必須にするのは **initial NPS score** のみです。フォローアップ質問は常に任意です。

## フォーム要素を設定する

キャンバス上でフォーム要素を選択して、その設定を開きます。フォーム要素には 2 つのタブがあります。**General** と **States** です。**General** タブには、要素の設定があります。**Dropdown**の場合は、**Initial state**、**Required**、**Placeholder** が含まれます。

![General タブの Dropdown 要素の設定。Initial state、Required、Placeholder と、Latest products の選択肢を表示している](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/forms-legacy-dropdown-settings-step-1-zoom2.png)

**States** タブでは、デフォルトの状態など、要素の状態ごとのスタイルを設定します。**Dropdown**の場合は、フォント、背景色、境界線、影、アクセシビリティのスタイルが含まれます。

![Choose state が default に設定され、Font、Background Color、Border、Shadow、Accessibility の各セクションを表示した States タブの Dropdown 要素の設定](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/forms-legacy-dropdown-states-step-1-zoom2.png)

## アンケートデータを収集する

アンケートデータはKameleoonに収集して .csv 形式でエクスポートできます。また、HTTP リクエストを使って外部サービスに送信することもできます。**Survey Settings** タブで設定します。

1. Content パネルで **Survey Settings** タブを開きます。
2. **Collect survey data**をオンにします。
3. **When is the survey submitted?** で、回答を送信するタイミングを選択します。**A button is clicked**を選択してボタン要素を選ぶか、**The widget is closed** または **An answer is clicked**を選択します。
4. **How are responses collected?** で、**Kameleoon**を選択すると回答をKameleoonに保存します。**Externally (HTTP Request)** を選択すると、回答を URL に送信します。
5. **Externally (HTTP Request)** を選択した場合は、**Request name** を入力し、**Method**（GET または POST）を選択して、**Action URL** を入力します。任意で **Add header request** をクリックして、ヘッダーを追加します。
6. **Save**をクリックします。

Kameleoonから回答をエクスポートする方法については、[サーベイデータのエクスポート](https://docs.kameleoon.com/ja/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/survey-data-export.md)をご覧ください。回答をスプレッドシートに送信する方法については、[サーベイ回答を Google Sheets に送信する](https://docs.kameleoon.com/ja/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/send-survey-responses-to-google-sheets.md)をご覧ください。

## ニュースレターフォームを作成する

Widget Studioには、開始点として使用できる **Newsletter**テンプレートが用意されています。一からニュースレターフォームを作成するには、次の順序で要素を追加します。

1. **Add element**をクリックし、**Survey** セクションで**Short answer**を選択します。メールアドレスに使用します。
2. **Add element**をクリックし、**Form** セクションで**Dropdown**を選択します。
3. **Dropdown**の設定で、**+Add option**をクリックし、**Latest products**と入力します。

![Required がオフ、Placeholder、Latest products の選択肢がある Dropdown 要素のパネル（General タブ）](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/design-your-form-step-2-2x.png)

4. **Add element**をクリックし、2 つ目の**Dropdown**を選択します。左側のサイドバーで、訪問者が**Latest products**を選択するまで、2 つ目のドロップダウンを非表示にします。表示させるイベントを設定するには、[条件付きロジックを追加する](https://docs.kameleoon.com/ja/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/add-conditional-logic.md)をご覧ください。

![Edit、Rename、Duplicate in、Hide、Deleteを表示した Dropdown 要素のメニューが開いている Widget Studioの Content タブ](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/design-your-form-step-3-2x.png)

5. **Add element**をクリックし、**Form** セクションで**Checkbox**を選択します。利用規約への同意に使用します。
6. **Add element**をクリックし、**Survey** セクションで**Button**を選択して、フォームを送信します。

次に、回答を確認するルールを設定します。[Short answer の入力を検証する](https://docs.kameleoon.com/ja/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/add-rules-to-your-form-fields.md)をご覧ください。