【Studio初心者ガイド】フォーム 管理フォーム設置と設定 ・作り方のポイント｜Editor 5.0対応

※本記事は Studioの「Editor 5.0」に対応しています。

初心者の方でも簡単に利用できるStudioのフォーム機能を活用し、問い合わせフォームや予約フォームなど、多彩なフォームを直感的に設定する方法や、効果的な設置ポイントをご紹介します。

Studioのフォームについて

Studioでは、初心者でも簡単にフォームを作成し、サイトに設置できる直感的なフォーム機能が揃っています。

問い合わせフォームや予約フォームなど、多目的に使用できるフォームパーツが豊富に用意されており、用途に応じた細かいカスタマイズも可能です。

さらに、送信後の動作設定や通知先設定などもサポートしており、フォーム設置からデータ管理までスムーズに行えます。

Studioのフォーム機能を活用することで、プロフェッショナルなサイト作成が実現します。

「Basic Forms」と「Form Parts」

Studioのフォーム作成には、「Basic Forms」と「Form Parts」の2つの要素が用意されています。

「Basic Forms」は問い合わせフォームの土台となるセット形式のフォームパーツで、これをベースに「Form Parts」を追加してカスタマイズすることが可能です。

「Form Parts」には、テキスト入力欄やチェックボックス、ファイルアップロード機能など、必要に応じて個別に追加できるパーツが揃っており、自由にカスタマイズしたフォームを作成できます。

Studioでフォームを作成する方法

Studioでは、あらかじめ用意されたフォーム要素（赤四角）を使ってフォームを作成できます。

配置したフォームは、設定パネルからテキストや色などの見た目を調整し、ページのデザインに合わせて変更できます。

「Form Parts」（フォームパーツ）の追加

フォームパーツ（赤四角はドラッグ＆ドロップで簡単に追加できます。以下にそれぞれの説明をご紹介します。

Input（１行テキスト入力）

Input（赤四角）は、名前やメールアドレスなど、短いテキストを入力する項目として使用できます。

1行で表示される入力欄のため、簡単な情報の入力に適しています。

設定パネルでは、項目名やプレースホルダーのテキストを変更できます。
また、入力内容の種類を指定することで、送信時の入力形式に関するチェックが行われる場合があります。

設定できる入力形式の例は以下の通りです。

• text：特定の入力形式を指定しません

• email：メールアドレス形式の入力を想定します

• tel：電話番号形式の入力を想定します

必須項目として設定した場合、入力が行われていない状態では送信できない挙動になることがあります。

Textarea（複数行テキスト入力）

Textarea（赤四角）は、問い合わせ内容やメッセージなど、複数行の入力が必要な場合に使用できる入力項目です。

Inputとは異なり、入力内容が複数行で表示される形式となっています。

設定パネルでは、項目名やプレースホルダーなどのテキストを変更できます。

また、フォームの内容に応じて、入力欄の表示や設定を調整できる場合があります。

Select（セレクトボックス）

Select（赤四角）は、あらかじめ用意した選択肢の中から項目を選んでもらう入力形式です。

選択肢はドロップダウン形式で表示されるため、複数の候補から1つを選択する場合に使用されます。

配置したSelect項目は、設定パネルから項目名や選択肢の内容を編集できます。

フォームの内容に応じて、選択肢を追加・調整することが可能です。

Radio（ラジオボタンリスト）

Radio（赤四角）は、複数の選択肢の中から1つだけを選択する入力形式です。「はい／いいえ」など、選択肢が限られている場合に使用されます。

選択肢は一覧で表示されるため、複数の候補をそのまま提示したい場合に適しています。

Confirm（チェックボックス）

Confirm（赤四角）は、利用規約の同意など、1つの項目に対してユーザーの確認や同意を求める際に使われる単一のチェックボックスです。

フォーム送信時にチェックが必須となる設定が可能です。

Checkbox（チェックボックスリスト）

Checkbox（赤四角）は、複数の選択肢から複数を選択できます。アンケートや希望条件の指定など、複数の回答が可能な場面で便利です。

リストの各項目には自由に内容を追加でき、複数選択が必須でない場合も設定できます。

File（ファイルアップロード）

File（赤四角）は、ユーザーがファイルをアップロードできる機能を提供するパーツです。画像や文書などのファイルを収集するフォームに便利です。

ユーザーが簡単にファイルを添付して送信できるため、応募フォームなどにも活用されています。

Button（フォーム送信ボタン）

Button（赤四角）は、フォーム全体を送信するためのボタンです。

「送信」や「確認」といったボタン名を自由に設定でき、フォームの最終ステップとしてユーザーに送信アクションを促します。

ボタンデザインもカスタマイズ可能で、フォーム全体の見た目を整えつつ操作性も向上させる役割を担います。

フォーム名の設定

フォーム名は、フォームを管理するための名称で、送信されたフォームの結果はこの名前ごとに管理されます。

複数のフォームをサイトに設置する場合は、判別しやすい名前をそれぞれ設定しておくと管理しやすくなります。

フォーム名には「% # ? /」など使用できない文字があり、条件に合わない文字列を入力した場合、エラーが表示されることがあります。

使用できる文字については、実際の入力時に表示されるエラーメッセージを確認してください。

フォーム名の設定は、フォームを選択し、右側パネルの「項目名」（赤四角）から行います。

送信後のサンクスページ（サンキューページ）の作成

送信後のサンクスページ（サンキューページ）は、フォーム送信が完了したあとにユーザーが遷移するページです。

送信完了の案内や、次の行動を伝える目的で使用されます。

Studioでは、フォーム送信後の遷移先として、プロジェクト内のページまたはモーダルを指定できます。

フォームを追加したページとは別に、いずれかの「＋」ボタン（赤四角部分）をクリック、次に「ページ」を選択し、サンクスページ用のページを作成します。

このとき、ページの名前を「サンクスページ」にしておくとわかりやすいです。

フォームを選択した状態で表示される詳細パネルから、「送信後のページ」（赤四角)を設定し、さきほど「サンクスページ」と名付けたページを選択します。

なお、動的ページおよび動的モーダルは送信後の遷移先として選択できません。

また、フォームの送信ボタンに直接リンクを設定することはできないため、必ず送信後のページ設定を行ってください。

フォーム回答結果の管理

フォームの回答結果をプロジェクトのダッシュボードで確認・管理できます。

ダッシュボードでは、フォーム名ごとに回答が整理され、各回答はステータスで管理することが可能です。

Tips：メンバーごとに回答結果の閲覧制限を設定できます。編集者に閲覧制限を設けるか、ワークスペースまたはライター権限を活用することで、閲覧を制限することが可能です。

フォームダッシュボード

フォームダッシュボードは、フォームの回答内容や設定を管理するための画面です。

フォームの通知メール設定や、回答結果の確認、外部サービスとの連携などを行うことができます。

フォームダッシュボードは、フォームを選択した状態で表示される詳細パネルから開きます。

設定項目を有効化すると、フォームに関する各種設定や、送信された回答内容を確認できる画面が表示されます。

ダッシュボードへいくには、フォームを選択し、通知先の設定・集計結果（赤四角）をクリックすれば移動します。

「有効化する」のボタンをクリックすると、以下のような画面になります。これはダッシュボードのフォーム設定画面になります。

フォーム回答を確認する

フォームダッシュボードを開くと、画面左側にフォーム名が一覧表示されます。確認したいフォーム名をクリックすると、その回答内容が確認できます。

注意：項目名を途中で変更すると、別のカラムとして集計されます。

フォーム回答を探す

ダッシュボードで、フリーワード検索（赤四角）を使って目的の回答を探すことができます。

選択項目については、絞り込みアイコンを利用してフィルタリングも可能です。また、回答日時を新しい順や古い順に並べ替えることもできます。

確認したい回答をクリックすると、詳細モーダルが開き、回答の詳細を確認することができます。

また、3点メニュー（赤四角）から、すべての回答をCSV形式でダウンロードすることも可能です。

回答をステータスで管理する

回答を選択した状態（赤四角）で、ステータス（黄色四角）をクリックすると、その回答のステータスが変更され、異なるカテゴリーに移動します。

フォーム回答を完全に削除する

ステータスが「ゴミ箱」に設定された回答には、詳細モーダルで「完全に削除」ボタンが表示されます。このボタンをクリックすると、回答を削除することができます。

ダッシュボードのカスタマイズ

ダッシュボードのカスタマイズでは、フォームの運用に必要な各種設定を行います。

通知メールの設定や、回答結果の確認・外部連携など、フォーム送信後の挙動や管理方法を調整するための項目が用意されています。

ここからは、フォームダッシュボードで設定できる内容について、順に確認していきます。

ステータス

フォーム設定の「ステータス編集」（ピンク四角）から、ステータスの追加・削除や並び替えを自由に行うことができます。

リストの表示項目

一覧に表示する項目は、フォーム設定の表示項目編集（ピンク四角）から変更できます。

フォーム回答結果の管理の注意事項

フォーム回答結果を管理する際には、いくつか注意しておきたい点があります。

回答データの確認や運用方法は、設定内容や利用状況によって挙動が異なる場合があるため、事前に制約や注意事項を把握しておくことが重要です。

ここでは、フォーム回答結果を管理するうえで知っておきたい注意点について説明します。

1日の受信可能なフォーム回答数について

不正利用防止のため、1プロジェクトあたりのフォーム回答受信は1日5,000件までに制限されています。これを超える回答はサーバーに保存されず、消失します。

プラン上限数を超えた回答について

フォーム回答数がプランの上限を超えた場合でも、1日5,000件の制限内であればデータは保存されますが、ダッシュボードで閲覧することはできません。

この場合、不要な回答を削除して新しい回答を表示するか、プランのアップグレードをご検討ください。

フォームの通知メール設定

フォーム設定では、プロジェクト内の全フォームに共通する全体設定と、各フォームごとに設定できる個別設定が用意されています。

全体設定

プロジェクト内のすべてのフォームに対して通知先を一括で設定したい場合は、全体設定（赤四角）でメールアドレスを指定すると効率的です。

この設定により、個別のフォームで特定の通知先が設定されていない場合、全体設定で指定したメールアドレスに通知が送信されます。

個別設定

個別設定（赤四角）では、特定のフォームごとに異なる通知先を指定することができます。

また、「全体の通知先にも通知する」オプションを選択すると、個別設定と全体設定の両方のメールアドレスに通知が送信されます。

通知メッセージタイトル

個別設定での通知メッセージタイトル（赤四角）は、通知メールのタイトルも自由にカスタマイズできます。

デフォルト設定は「You have a new response in【フォーム名】of 【プロジェクト名】」となっています。

なお、メールのタイトルの末尾には「#5」のように回答の通し番号が自動的に追加されます。

フォーム回答結果の外部連携

外部連携（赤四角）では、各フォームの回答結果をGoogleスプレッドシートと連携させることが可能です。

この機能により、フォームの回答データをリアルタイムで管理でき、外部ツールと組み合わせて標準機能にはない詳細な管理や通知設定も行えます。

注意：外部ツールと連携して送信されたデータは、連携先ツールの規約に基づいて管理されます。

Studioは外部ツールにおけるデータ保護に関して責任を負うことができかねますので、連携先の規約に同意の上でご利用ください。

スプレッドシート連携の手順

1. フォームダッシュボードにアクセスします。

2. 設定したいフォームの設定画面を開きます。

3. 外部連携アイコンをクリックします。

4. 連携したいGoogleアカウントをクリックします。

5. 連携が完了すると、専用のシートが自動生成され、その後自動で更新されます。

スプレッドシート連携の解除方法

フォーム設定を開き、「解除」をクリックします。

一度連携を解除して再連携すると、新しいシートが生成され、以降そのシートが更新されるようになります。

外部連携の注意点

• 連携上限
  Googleスプレッドシートには、1分間にデータを送信（連携）できる件数に上限があり、これを超えるとスプレッドシートにデータが保存されません。

  詳細については、Googleスプレッドシートのドキュメント（Usage limits | Sheets API | Google Developers）をご確認ください。

• スプレッドシート連携の動作不良
  スプレッドシートの共有権限や連携したGoogleアカウントの変更・削除が原因で、データが正常に蓄積されなくなる場合があります。
  その場合は、一度連携を解除してから再連携を行うことで、新しいシートにデータを蓄積できるようになります。
  再連携でも解決しない場合は、その旨を記載のうえ、チャットサポートにご連絡ください。

• シート名に関連するエラー
  スプレッドシートのシート名に半角の「:」（赤四角）を使用すると、フォーム送信時にエラーが発生することがあります。
  シート名には半角「:」を使用しないようご注意ください。

• 連携前の回答について
  スプレッドシート連携前に受信した回答は、自動的にスプレッドシートには反映されません。連携後の回答のみが自動で追加されるようになります。

自動返信メールの設定方法（外部ツール連携）

Studioには自動返信メール機能はないため、外部ツールを利用して自動返信メールを設定する方法を紹介します。

Zapierなどのツールを活用し、フォームが送信された際にユーザーに自動返信メールを送る設定ができます。

注意：本記事で紹介する内容は、外部ツールを利用した実装に関するものです。ツールの仕様や動作、記事に記載のない実装に関しては、Studioのチャットサポートでは対応できませんのでご了承ください。Studioコミュニティにて質問の投稿や過去の投稿を参考にしてください

また、外部ツールと連携して送信されたデータは、連携先ツールの規約に基づいて管理されます。

Studioは外部ツールにおけるデータ保護について一切の責任を負うことができかねます。外部連携機能をご利用の際は、連携先ツールの規約に同意のうえでご利用ください。

以下が設定手順の概要です。

1.前述の手順でStudioのフォームとスプレッドシートを連携させます。

2.Zapierにログインした後、Createボタン（ピンク四角）をクリックして、Zapsボタン（黄色四角）をクリックし、Zapierで新しいZap（自動化ワークフロー）を作成します。

3.Triggerボタン（ピンク四角）をクリックします。

4.Google Sheets（赤四角）をクリックします。

5.Trigger event（赤四角）をクリックし、New Spreadsheet Row（黄色四角）をクリックして「Continue」をクリックします。

6.画面の指示に従って、フォーム連携に使用するGoogleアカウントでサインインし、接続します。

続いて、「Spreadsheet」（赤四角）で「プロジェクト名」を、「Worksheet」（黄色四角）で「シート名」を選択し、「Continue」をクリックします。

「Test Trigger」をクリックして、うまく連携できていれば、シート内にあるフォーム回答の列を選択できます。

7.次に、トリガーに対するアクションを設定していくので、「Action」（赤四角）をクリックします。

8.そして、「App」（赤四角）で「Gmail」、「Action Event」（黄色四角）を「Send Email」に選択し、「Continue」をクリックします。

9.画面の指示に従い、自動返信メールの送信元として使用するGmailアカウントに接続し、送信元アドレスを選択します。

10.続いて自動返信メールの内容を設定します。

各フィールドには、文字を直接入力することも、ドロップダウンからスプレッドシートの特定の列の値を変数として選択することも可能です。

「To」欄にはフォーム送信者のメールアドレスを設定しましょう。本文なども、適切に変数を組み合わせて作成していきます。

11.設定が完了したら「Continue > Test & Continue」に進み、テストメールを確認します。問題がなければ「Turn on Zap」をクリックして自動返信設定が完了です。

最後に、サイトまたはライブプレビューでフォームを送信し、動作を確認してください。

Studioに外部フォームを埋め込む方法

Studioには豊富なフォーム作成機能がありますが、Googleフォームなどの外部サービスで作成したフォームを埋め込むことも可能です。

iframeタグを使用すれば、これら外部フォームをStudioサイトに統合し、スタイルや機能の幅を広げられます。

Googleフォームの設置方法

GoogleフォームをStudioに埋め込むには、iframeタグを使います。以下の手順で設定可能です。

1.Googleフォームのサイトにアクセスし、新しいフォームを作成します。（Googleフォームの詳しい作成手順についてはここでは省略いたします。）

2.「送信」（赤四角）をクリックし、「埋め込みコード」（黄色四角）を取得します。

3.Googleフォームから取得した埋め込みコードを、StudioのEmbedボックスに貼り付けます。

手順
1.Embedボックス（赤四角）をドラッグ&ドロップで設置
2.

チップ（黄色四角）をクリック
3.埋め込みコード欄（ブルー四角）に貼り付け

4.サイズを調整し、サイト全体のデザインと統一感を持たせて完了です。

外部フォームを設置する際の注意点

・サイト全体のデザインとの調和
iframeで埋め込んだフォームがサイト全体のデザインと統一されるように、スタイルの調整が必要です。

デフォルト設定のままではデザインに違和感が生じる可能性があるため、必要に応じてスタイルを整えることが大切です。

・ローディング速度への影響
iframeはページの読み込み速度に影響を与えることがあります。

特に、大きなデータ量を含むフォームや外部リソースを多く使用するフォームを埋め込む場合、ページ全体のパフォーマンスが低下する可能性があるため注意が必要です。

・コンバージョン計測の難しさ
iframeの使用により、クロスドメイン制約からフォーム送信結果の計測が難しくなることがあります。

たとえば、Googleアナリティクスなどのトラッキングコードを使用する際に、正確にデータを取得できない場合があります。

・セキュリティ対策
外部フォームをiframeで埋め込む際は、信頼できるソースから提供されたコードのみを使用してください。

iframeは他のドメインからコンテンツを読み込むため、信頼できないコードを埋め込むと、クロスサイトスクリプティング（XSS）やクリックジャッキングなどのセキュリティリスクが生じる可能性があります。

まとめ

Studioでのフォーム作成は、簡単に始められる設置から多彩な設定まで、あらゆるニーズに対応できる柔軟さが魅力です。

使いやすいフォーム設置を通して、ユーザーとのスムーズなコミュニケーションが可能になり、サイト全体のユーザビリティ向上につながります。

Studioのフォーム設置と設定を活用し、目的に応じた構成や操作性を工夫することで、より効果的なサイト運営ができるでしょう。