【Studio初心者ガイド】フォーム設置と設定 ・作り方のポイント

送信後のサンクスページの作成

送信後のサンクスページは、フォーム送信後にユーザーが遷移するページです。Studioでは、サンクスページをカスタマイズして、送信完了メッセージや追加情報を表示できます。設定方法は以下の通りです

1. サンクスページを通常のページとして作成し、「サンクスページ」や「送信完了」といった名称を付けます。

2. チップ（ピンク四角）をクリックし、「送信後のページ」（黄色四角）を指定し、サンクスページを選択します。

このようにしておくことで、ユーザーにフォーム送信が完了したことを確実に伝えるとともに、次のステップに案内することも可能です。

※ページを指定せずに送信ボタンに直接リンクを設定した場合、正常に動作しないためご注意ください。

フォーム回答結果の管理

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

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

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