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

フォーム項目:フォームに項目を追加する(フォームパーツ)

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

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

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

この記事では例として、ボックスのうち[Form 1]の項目編集と項目追加の方法を説明します。


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

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

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

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

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

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

注意:フォームパーツは、追加パネルから追加した[Form1], [Form2], [Form3]の外に配置しても機能しません。


フォームパーツの種類

(1) Input / Textarea ボックス

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

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

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

設定方法

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

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

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

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

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

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

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

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

(2) Select ボックス

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

設定方法

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

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

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

  • 項目名:項目の名称

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

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

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

(3) Radio ボタン

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

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

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

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

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

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

設定方法

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

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

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

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

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

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

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

(4)Checkbox

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

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

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

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

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

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

設定方法

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

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

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

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

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

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

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

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

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

設定方法

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

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

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

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

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

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

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

設定方法

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

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

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

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

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

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

(6) Button ボックス

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

ボタン文言の変更方法

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

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

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

フォームパーツの項目名編集編集の注意点

項目名は、フォームダッシュボードで表示される名称です。

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

フォーム有効化後に新たに項目を追加や既存の項目名を変更した場合、プレビューなどから回答送信しないと変更内容がダッシュボードに反映されません。

一度、ライブプレビューURLからフォームへの回答をお試しください。

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

こちらの回答で解決しましたか?