Studioでフォームを作る基本ステップは2つだけです。新規フォームの作成項目の追加・編集これだけで、シンプルな問い合わせや申し込みフォームとして利用可能です。ただし、より高い利便性や運用効率を求める場合は、次の追加設定も行いましょう。3. 送信後の表示設定方法4. 送信先設定と通知メール設定方法5. データ管理・運用上記3つの設定は、ユーザー体験を向上させ、運用上のミスや漏れを防ぐために非常に重要です。この章では、基本の作成方法から追加設定までを順に解説していきます。1. 新規フォームの作成方法まずは、ページにフォームパーツを配置し、フォームの基本形を用意しましょう。Studioには「Basic Forms」と「Form Parts」があります。Basic Formsは問い合わせフォームの土台となるセット形式のフォームパーツです。新規フォームを追加パネルからドラッグ＆ドロップで配置するだけで、フォームの基本形が完成します。初心者でも簡単に始められるのが魅力です。設置したフォームは、文字や色、レイアウトなどを自由にデザイン変更できます。また、フォームのタイトルや説明文には、ユーザーが何のためにこのフォームに記入するのかを理解できるよう、具体的に記載することが大切です。配置後は、PCとスマートフォンの両方で余白や視認性を確認しましょう。2. 項目の追加・編集方法フォームに不可欠な入力項目を追加し、ラベル、必須設定、入力補助（プレースホルダー）を整えましょう。この設定は、ユーザーがストレスなく入力できるかどうかに直結する重要なステップです。不要な入力を避け、シンプルでわかりやすいフォームにすることで、入力途中の離脱を防げます。▼ 追加できるフォームパーツの種類Studioのフォーム機能では、デザインエディタ上で下記のパーツを自由に組み合わせてフォームを作成できます。Input: 短いテキストを入力する項目で、名前やメールアドレスなど、短い情報を入力するのに適しています。Textarea: 複数行にわたる長いテキスト入力用で、メッセージや住所など、長いテキストの入力が必要な場合に使用されます。Select: ドロップダウンリストを設置するパーツで、項目数が多い場合やページのスペースを効率的に活用したいときに便利です。Radio: 複数の選択肢から1つだけを選んでもらう単一選択形式です。Confirm: 利用規約への同意など、1つの項目に対する確認を求める際に使う単一のチェックボックスです。Checkbox: 複数の選択肢から複数を選べる形式で、アンケートや希望条件の指定など、複数の回答が可能な場面で便利です。File: ユーザーがファイルをアップロードできる機能を提供し、画像や文書などのファイルを収集するフォームに便利です。Button: フォームの送信ボタンとして使用し、フォームの最終ステップとしてユーザーに送信アクションを促します。Search: CMSアイテムをキーワードで検索できる入力欄で、記事やサービスを探す際に便利です。Password: サイト全体をパスワードで保護し、閲覧制限を設定するのに使用されます（Personalプラン以上）。▼各フォームの内容の設定は右パネルで設定各フォームパーツには、項目名、タイプ、必須項目、プレースホルダーなどを右パネルで設定できます。タイプ: 入力タイプをメールや電話番号に設定すると、送信時に自動で入力形式のチェックが行われ、入力ミスによるエラーを未然に防げます。必須項目: 必須項目欄にチェックを入れることで、その項目が空欄のままではフォームが送信できなくなります。ただし、必須項目を示す「」は自動で表示されないため、手動で追加する必要があります。プレースホルダー: フォームが未入力の際に表示されるテキストで、入力例や形式を示すことで、ユーザーの入力作業を補助する役割があります。3. 送信後の画面とサンクスページ設定フォーム送信後のユーザーの行動を適切に設計することは、サイトの信頼性を高める上で不可欠です。送信完了後にユーザーをどこに案内するかを設定しましょう。Studioでは、フォーム送信後に「サンクスページ」と呼ばれる専用のページを表示させることができます。サンクスページは、通常のページと同様に制作できます。フォームタグの設定画面にある「送信後のページ」から、作成したサンクスページを遷移先として指定します。サンクスページには、「お問い合わせありがとうございます。3営業日以内にご連絡いたします」といったメッセージや、次に読むべき関連コンテンツへのリンクを掲載することで、ユーザーの不安を解消し、サイト内の回遊を促せます。▼ 注意点サンクスページは自動的に作成されるわけではありません。そのため事前にサンクスページを作成する必要があります。送信ボタンに直接リンクを設定するだけでは正常に動作しないため、必ずフォームタグの設定画面から送信後のページを指定してください。4. 送信先設定と通知メール設定方法フォームからの問い合わせを確実に受け取るために、送信先と通知設定を正しく行うことが何よりも重要です。設定を怠ると、せっかくの貴重な問い合わせを見逃してしまうリスクがあります。▼ 通知先メールアドレスの設定フォームダッシュボードのフォーム設定画面で、通知先メールアドレスを登録することで、フォームが送信された際に自動で通知メールが届きます。この通知設定は、プロジェクト内の全フォームに共通する全体設定と、フォームごとの個別設定が用意されています。複数のフォームがある場合、フォームごとに通知先を分けて設定することで、チームでの運用がしやすくなります。▼ 通知メッセージタイトルのカスタマイズ通知メールのタイトルもカスタマイズできます。件名に「サイト名」や「フォーム名」を含めることで、受信したメールが何の通知か一目でわかるようになり、対応の優先順位付けが容易になります。メールのタイトルの末尾には、回答の通し番号が自動で追加されます。5. データ管理・運用方法フォームから送られたデータは、Studioのダッシュボードで確認・管理できます。これにより、問い合わせの対応漏れを防ぎ、運用をスムーズに進められます。▼ フォームダッシュボードの機能回答の確認: フォームダッシュボードを開くと、左側にフォーム名が一覧表示されます。確認したいフォーム名をクリックすると、その回答内容が確認できます。ステータス管理: 各回答に「未対応」「対応中」「完了」「ゴミ箱」などのステータスを設定し、管理できます。CSVエクスポート: ダッシュボードのメニューから、全ての回答をCSV形式でダウンロードすることが可能です。データの削除: データの保持期間は特に設けられていません。不要な回答は手動で削除する必要があり、自動で削除される機能は現状ありません。▼ Tipsダッシュボードで確認できる回答数にはプランごとに上限が設定されています。上限を超えた回答はダッシュボード上では閲覧できませんが、データ自体はStudioのデータベースに保存されています。この上限は、無料プラン・Miniプランで100件、Personalプランで1,000件、Businessプラン以上で10,000件です。上限を超えてもデータを失わないように、次に解説するGoogleスプレッドシートとの連携を設定しておきましょう。Studioフォームで使いたい外部サービス連携3選Studioの標準フォーム機能は非常に優秀ですが、外部サービスと連携することで、運用の自動化やデータ管理の効率が飛躍的に高まります。この章では、特におすすめの外部サービス3つとその活用法を紹介します。1. Googleスプレッドシートの連携▼ 役割と目的フォームの送信データをGoogleスプレッドシートに自動で記録することで、問い合わせ内容を一元管理し、バックアップとして活用できます。特に、フォームの回答閲覧数にプラン上限があるため、スプレッドシートに連携しておくことは、重要なデータを失わないための有効な手段です。▼ 手順フォームダッシュボードにアクセスし、設定したいフォームの設定画面を開きます。「外部連携」アイコンをクリックします。連携したいGoogleアカウントをクリックすると、連携が完了します。連携が完了すると、専用のシートが自動生成され、その後はフォームへの回答が自動で更新されます。▼ 注意点連携の上限: Googleスプレッドシートには、1分間にデータを送信できる件数に上限があり、これを超えるとデータが保存されない場合があります。シート名のエラー: スプレッドシートのシート名に半角の「 : 」を含めると、フォーム送信時にエラーが発生する可能性があります。動作不良: スプレッドシートの共有権限や連携したGoogleアカウントの変更・削除が原因で、データが正常に蓄積されなくなる場合があります。その際は一度連携を解除してから再連携することで解決することが多いです。連携前の回答: 連携前に受信した回答は、自動的にスプレッドシートには反映されません。2. Zapier連携による自動返信メールの設定▼ 役割と目的Studioの標準フォームには、自動返信メール機能がありません。しかし、Zapierのような外部連携ツールを使えば、フォーム送信後にユーザーへ自動でお礼メールを送ることができます。これにより、ユーザーに安心感を与え、コミュニケーションを円滑に進められます。▼ Zapier連携の仕組みZapierでは、「トリガー（引き金）」と「アクション」を設定します。トリガー: 「Studioフォームに回答があったら、Googleスプレッドシートに新しい行が追加される」というイベントを検知する設定。アクション: 「Googleスプレッドシートに新しい行が追加されたら、そのメールアドレス宛にメールを送信する」という設定。▼ 手順1．StudioとGoogleスプレッドシートを連携させておきます。2．Zapierにログインし、「Create」のZapから新しいZapを作成します。3-1．トリガー設定: Zapsの編集ページで、Triggerを選択しAppsのGoogle Sheetsを選択します。3-2．トリガー設定: Setupの「Trigger event」でNew Spreadsheet Rowを選択し、「Account」設定します。その後、 ConfigureでStudioと連携しているGoogle Sheetのファイルを「Spreadsheet」で設定し、該当するシートを「Worksheet」で設定します。その後テストを行なってください。▼ 注意点テストで連携できない時は、Googleスプレッドシートに何も情報が入っていないことが原因のことが多いです。あらかじめフォームの項目行をシート上に入力しておくことで解決します。4-1．アクション設定:Zapsの編集ページで、Actionを選択しAppsのGmailを選択します。4-2．アクション設定:Setupの「Action event」でSend Emailを選択し、Accountの設定します。その後、 Configureで、メールの送信先「To」に、フォームに入力されたメールアドレスの変数を選択します。4-3．アクション設定:そのほか、差出人アドレス（From）や、差出人名（From Name）、件名（Subject）、本文（Body）を設定し、テスト送信をして正常に動作するか確認します。5．正常に動作することを確認したら「Publish」を押して、機能を公開します。▼ 注意点料金プラン: Zapierの無料プランでは月100件まで自動返信が可能ですが、100件を超えると有料プランへのアップグレードが必要です。項目変更時の影響: Studioのフォーム項目を変更すると、スプレッドシートの列の順番が変わり、Zapierの連携が機能しなくなる可能性があります。項目を変更する際は、Zapierの設定も合わせて見直しましょう。3. 外部フォームの埋め込み▼ 役割と目的Studioの標準フォーム機能だけでは実現が難しい機能（例：確認画面、日付入力欄、条件分岐）が必要な場合、Googleフォームやformrunといった外部フォームサービスで作成したフォームをサイトに埋め込めます。iframeタグを使用すれば、外部フォームをStudioサイトに統合し、スタイルや機能の幅を広げられます。▼ 手順外部フォームサービス（例：Googleフォーム）でフォームを作成します。フォームの「送信」ボタンから「埋め込みコード」を取得します。EmbedのBlankボックスをページに配置し、取得した埋め込みコードを貼り付けます。サイズを調整し、サイト全体のデザインと統一感を持たせたら完了です。▼ 注意点デザインの調和: 埋め込んだフォームがサイト全体のデザインと統一されるように、スタイルの調整が必要です。パフォーマンスへの影響: iframeはページの読み込み速度に影響を与えることがあります。計測の難しさ: iframeの使用により、クロスドメイン制約からフォーム送信結果の計測が難しくなることがあります。セキュリティ: 外部フォームをiframeで埋め込む際は、信頼できるソースから提供されたコードのみを使用してください。Studioフォーム作成におけるよくある失敗3選と解決策フォームの実装は、細かな設定ミスが原因でトラブルにつながることが少なくありません。この章では、よくある失敗パターン3つと、その原因、そして解決策を解説します。1. 送信できない場合▼ 失敗例フォームの入力が完了しても、送信ボタンを押すとエラーが表示されたり、何も反応がなかったりする。▼ 主な原因ページが公開されていない: フォームは公開されたページでのみ正常に動作します。必須項目の未入力: 必須項目が空欄のままになっている。入力形式の誤り: 「メールアドレス」のタイプ設定をしているのに、メールアドレス以外の文字が入力されている。ブラウザのキャッシュや拡張機能: 一時的なブラウザの問題や、広告ブロック機能などが干渉している可能性。▼ 解決策公開状態の確認: エディタの公開設定をONにして、公開URLでフォームの動作をテストしましょう。必須項目の再確認: すべての必須項目に正しい値が入力されているか確認します。別ブラウザでのテスト: シークレットウィンドウや別のブラウザで試すことで、キャッシュや拡張機能の影響を排除できます。最小構成でのテスト: 問題が解決しない場合は、一度フォームパーツを複製して空ページで最小構成テストを行い、デザインやスクリプト干渉を除外することで原因を特定できます。2. 通知メールが届かない場合▼ 失敗例フォームは送信できたのに、設定したメールアドレスに通知が届かない。▼ 主な原因送信先アドレスの誤記: 設定したメールアドレスにタイプミスがある。迷惑メールフォルダへの振り分け: サービスからの通知メールが、迷惑メールと判断されている。送信先が未設定: フォームの送信先メールアドレスがそもそも設定されていない。ドメイン・組織の受信制限: 会社のセキュリティ設定などで、特定のドメインからのメールがブロックされている。▼ 解決策アドレスの再入力とテスト: 送信先メールアドレスに誤りがないか再度確認し、テスト送信を行いましょう。迷惑メールフォルダの確認: 受信側のメール設定で、迷惑メールフォルダや自動振り分けルールを確認します。別ドメインでのテスト: 可能であれば、Gmailなどの異なるドメインのメールアドレスでテスト受信をしてみましょう。Slack連携の併用: 重要な通知を見逃さないよう、Slackのようなチャットツールへの通知も併用することをおすすめします。3. 外部連携が反映されない場合▼ 失敗例GoogleスプレッドシートやZapierと連携したのに、データが更新されない。▼ 主な原因認証切れ: 連携しているGoogleアカウントやZapierの認証が切れている。権限不足: 連携先のサービス（例：スプレッドシート）への編集権限が不足している。ZapがOFFになっている: Zapierで作成したZap（自動化ワークフロー）が有効になっていない。列名やシート名の不一致: スプレッドシートの列の順番や見出し名が、フォームの項目名と合っていない。レート制限: 短時間に大量のフォーム送信があった場合、連携先のサービス側でレート制限がかかり、データが反映されないことがあります。▼ 解決策連携の再認証: 連携先サービスのダッシュボードで、接続状態と権限を再確認し、必要に応じて再認証を行いましょう。Zapierの確認: ZapがONになっているか、テストデータが正しく取得できているかを確認します。スプレッドシートの確認: 列の順序や見出し名が想定と一致しているか、または誤って別のシートに書き込まれていないかを確認します。最低構成でのテスト: 連携がうまくいかない場合、最低限の項目（名前/メールアドレス/自由記述）で単体テストを行い、成功後に本番項目へ戻すことで、失敗箇所を特定できます。Studioフォーム公開前チェックリスト安全にフォームを運用するためには、公開前の最終チェックが欠かせません。このチェックリストを活用して、トラブルを未然に防ぎましょう。送信テスト: プレビューではなく、実際に公開されたページからフォームを送信し、問題なく完了画面が表示されるか、正しいページに遷移するかを確認しましたか？通知先メールの確認: 設定したメールアドレスに通知が即時届き、迷惑メールに振り分けられていないことを確認しましたか？外部連携テスト: GoogleスプレッドシートやZapierなど、連携先にテストデータが正しく反映されることを確認しましたか？必須項目・プレースホルダーの確認: 必須項目が正しく設定されており、ユーザーが入力に迷わないよう、プレースホルダーや説明文が適切に配置されているか、スマホでの表示も問題ないか確認しましたか？プライバシーポリシーへの同意: 個人情報を取り扱うフォームの場合、プライバシーポリシーページを作成し、フォームに同意のチェックボックスを設置しましたか？