メインコンテンツにスキップ

フォーム項目：フォームの設問を追加・編集する（フォームパーツ）

Studioフォームにフォームパーツを追加する方法と、パーツごとのプレースホルダーや必須項目などの詳細設定・デザイン編集について紹介します。

今日アップデートされました

Studioでは、Webサイト上にフォームを簡単に配置できます。配置したフォームは、項目やデザインのカスタマイズが可能です。

参考記事：フォームの設置と全体設定

フォームパーツを追加する

  1. 画面左のナビゲーションから[追加]パネルを開きます。

  2. [基本]タブをクリックします。

  3. [フォームパーツ]項目から任意のフォームパーツをクリックしてスクリーンに配置します。

  4. 配置したフォームパーツを、スクリーン上またはレイヤーパネル上でドラッグして、フォームの親ボックス内に入れ込みます。

  5. フォーム内の各ボックスのスタイルやレイアウトは、通常のボックスと同じように編集できます。

  6. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。

注意：フォームパーツは、追加パネルから追加した[Form1], [Form2], [Form3]の中に配置した時のみ機能します。

フォームパーツの種類と設定方法

(1) Input / Textarea ボックス

どちらもテキスト入力に適しているボックスです。

Inputボックス：一行程度の短いテキスト入力に適しています。

Textareaボックス：より長いテキスト、特に複数行にわたるテキストの入力に適しています。

設定方法

  1. inputボックスまたはTextareaボックスを選択します。スクリーン上での選択が難しい場合は、レイヤーパネルから選択してください。

  2. 右パネルの[インプット]タブを開きます。右パネルが閉じている場合は開いてください。

  3. 以下の設定を行います。

  • 項目名：フォームダッシュボードでの回答管理時に使う名称

  • 必須項目：回答を必須にする場合はチェックします。

  • タイプ：入力内容を、テキスト/メールアドレス・電話番号から選択します。

  • プレースホルダー：入力欄クリック前の入力ガイドとして表示するテキストを設定します。

4. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。

注意：現在、[tel]を選択した場合でも、数字以外の入力が送信可能となっています。

(2) Select ボックス

ドロップダウンに複数のオプションを表示し、選択してもらう場合に使います。

設定方法

  1. Selectボックスを選択します。スクリーン上での選択が難しい場合は、レイヤーパネルから選択してください。

  2. 右パネルの[セレクト]タブを開きます。右パネルが閉じている場合は開いてください。

  3. 以下の設定を行います。

  • 項目名：項目の名称

  • 必須項目：回答を必須にする場合はチェックします。

  • プレースホルダー：入力欄クリック前の入力ガイドとして表示するテキストを設定します。

  • オプション：選択肢の設定をします。並び替え、名称変更、項目削除ができます。

4. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。

(3) Radio ボタン

複数のオプションをすべて提示して、1つだけ選択してもらう場合に使います。

選択肢部分にはリスト機能が使われており、すべての選択肢に同じスタイル（フォント、文字サイズ、色など）が適用されます。

そのためラジオボタンの中でも、設定箇所ごとに右パネル内で使うタブが異なります。

  • 全体の設定：[ラジオ]タブ

  • デザインに関する設定：[ボックス]タブ、[変形]タブ
    ※ラジオボタンのデザインは、編集に制限があります。

  • 選択肢の内容は[データ]タブ

項目名と必須設定の設定方法

  1. RadioListボックスを選択します。スクリーン上での選択が難しい場合は、レイヤーパネルから選択してください。

  2. 右パネルの[ラジオ]タブを開きます。右パネルが閉じている場合は開いてください。

選択肢の設定方法

  1. 右パネルの[データ]タブを開きます。右パネルが閉じている場合は開いてください。

  2. 選択肢の名称変更/並び替え/追加/削除 を行います。

  3. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。

(4)Checkbox（複数チェックボックス）

複数のオプションをすべて提示して、1つまたは複数を選択してもらう場合に使います。

選択肢の部分はリスト機能が使われており、すべての選択肢に同じスタイル（フォント、文字サイズ、色など）が適用されます。

そのためチェックボックスボタンの中でも、設定箇所ごとに右パネル内で使うタブが異なります。ル内で使うタブが異なります。

  • 全体の設定：[チェックボックス]タブ

  • デザインに関する設定：[ボックス]タブ、[変形]タブ
    ※チェックボックスのデザインは、編集に制限があります。

  • 各項目の内容は[データ]タブ

項目名と必須設定の設定方法

  1. CheckboxListボックスを選択します。スクリーン上での選択が難しい場合は、レイヤーパネルから選択してください。

  2. 右パネルの[チェックボックス]タブを開きます。右パネルが閉じている場合は開いてください。

  3. 以下の設定を行います。

選択肢の設定方法

  1. 右パネルの[データ]タブを開きます。右パネルが閉じている場合は開いてください。

  2. 選択肢の名称変更/並び替え/追加/削除 を行います。

  3. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。

(5)Confirm （単数チェックボックス）

閲覧者に確認を求める際などに使用します。

設定方法

  1. Confirmboxを選択します。スクリーン上での選択が難しい場合は、レイヤーパネルから選択してください。

  2. 右パネルの[チェックボックス]タブを開きます。右パネルが閉じている場合は開いてください。

  3. 以下の設定を行います。

4. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。

(6) ファイルアップロードボックス

フォーム回答者がファイルをアップロードできます。詳しくは、以下の記事をご覧ください。

ファイルアップロード機能

設定方法

  1. Fileボックスを選択します。スクリーン上での選択が難しい場合は、レイヤーパネルから選択してください。

  2. 右パネルの[ファイル]タブを開きます。右パネルが閉じている場合は開いてください。

  3. 以下の設定を行います。

  • 項目名：フォームダッシュボードでの回答管理時に使う名称

  • 必須項目：回答を必須にする場合はチェックします。

  • プレースホルダー：アップロード前のガイドとして表示するテキストを設定します。

4. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。

(7) Button ボックス

フォーム送信ボタン専用のボックスです。デフォルトのテキストは「Submit」になっています。

送信ボタン文言の変更方法

  1. inputボックス内のテキストボックスを選択します。スクリーン上での選択が難しい場合は、レイヤーパネルから選択してください。

  2. 右パネルの[テキスト]タブを開きます。右パネルが閉じている場合は開いてください。

  3. テキストを差し替えます。

  4. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。

フォーム項目名の編集時の注意

一度設定した項目名を途中で変更した場合、古い項目名はそのまま残り、変更後の項目名が別カラムとして追加され集計されます。

フォーム有効化後に新たに項目追加や既存の項目名を変更した場合、項目名が新しくなってから回答が届くまでは、変更内容がダッシュボードに反映されません。

公開中のサイトから回答が来る前にあらかじめダッシュボード上に項目名を表示したい場合は、ライブプレビューから回答があった場合でもダッシュボードの項目列が更新されるため、一度ライブプレビューURLからフォームへの回答をお試しください。

check box チェックボックス checkbox checkboxlist

関連記事
ボックスを選択する
ボックスを追加する
フォーム項目：ファイル添付機能を付ける
テンプレートを編集する
デザインエディタ
こちらの回答で解決しましたか？