【初心者も簡単】Studioのお問い合わせフォーム完全ガイド

ノーコードで美しいWebサイトを作成できるStudioですが、
「Studioでお問い合わせフォームって設置できるの？」
「Studioでのお問い合わせフォームの設定方法を知りたい」
「外部サービスとの連携はできるの？」
という疑問を持っている方も多いのではないでしょうか？

この記事では、Studioでのお問い合わせフォームの種類や設置方法だけでなく、外部サービスの活用方法や設置前の確認チェックリスト、ユーザー体験を高める応用テクニックまで、実践的な内容をわかりやすく解説します。
ぜひ最後までご覧ください。

Studioのお問い合わせフォームとは？

Studioでは、初心者でも簡単にフォームの作成・設置ができる機能が揃っています。また、お問い合わせフォームや予約フォームなど様々な用途で使用できるフォームのパーツが用意されているため、用途に応じて細かくカスタマイズすることも可能です。

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

フォーム設置に関する主な機能

• ベースとなるフォームのドラッグ&ドロップでの設置

• 各項目の必須設定・入力制限・プレースホルダー設定

• 通知先メールの指定・通知内容のカスタマイズ

• フォーム送信後のリダイレクトや完了メッセージ設定

ユースケース

• お問い合わせフォーム

• 見積もり依頼フォーム

• 資料請求フォーム

• セミナー申し込みフォーム

• 採用応募フォーム

Studioのお問い合わせフォームの種類とパーツ構成

Studioには、以下の2種類のフォームがパーツとして用意されています。

Basic Forms(ベースとなる基本フォーム)

Basic Formsは、名前・メールアドレス・お問い合わせ内容など基本的な項目がセットになっているパーツです。
基本的な項目のフォームであれば、このパーツを使用することで簡単にお問い合わせフォームを設置できます。

Form Parts(パーツごとの追加)

Form Partsは、必要に応じて個別にフォームへ追加できるパーツで、以下のようなパーツがあります。

これらのパーツを組み合わせることで、必要な項目を組み合わせた独自のフォームを作成できます。

Studioのお問い合わせフォームでできること

Studioのお問い合わせフォームを活用することで、運用やユーザー対応までを効率化できます。以下に、具体的な機能とその活用方法をご紹介していきます。

できること1：ページ訪問者からのお問い合わせを受け付ける

Studioにフォームを設置することで、ユーザーとの窓口を簡単に作ることができます。

• お問い合わせや資料請求

• 製品・サービスに関する質問

• お申し込みや予約

など、さまざまな目的で活用することが可能です。

できること2：フォーム送信内容の管理

Studio上で送信されたフォーム内容は、Studio上の「集計結果」画面で一元管理できます。
顧客リストの作成や分析にも活用できたり、CSV形式でのダウンロードに対応しているので、Excelや他ツールとの連携も可能です。
また、フォームごとにデータが分かれているため、内容が混在することもありません。

できること3：通知先メールアドレスの設定

フォームから送信された内容は、指定したメールアドレス宛にリアルタイムで通知することが可能です。
自分のメールアドレスだけでなく、チームメンバーや担当部署にも送信可能で、通知メールのタイトルや本文はカスタマイズでき、わかりやすく整理できます。

ただし、通知先が未設定だと、フォームから送信された内容が確認できないため必ず設定しましょう。また、Studio上では「複数通知先」は現時点(2025年6月)では未対応のため、必要な場合は転送設定をして対応する必要があります。

できること4：送信後のページ遷移やメッセージ表示の設定

フォーム送信後に表示させるページを

• 指定ページ（サンクスページなど）へのリダイレクト

• 送信完了メッセージの表示

のどちらか選択できます。

サンクスページへ遷移させることで、送信完了を明確に伝えることももちろんですが、メールマガジン登録や関連リンクへの誘導、コンバージョンの計測にも使えるのでぜひ活用しましょう。

Studioのフォーム機能は「見た目のデザイン」だけでなく、運用効率やユーザー体験の質の向上にもつながる設計となっています。
フォーム周りをしっかり整えることで、Webサイト全体の信頼性や成果も大きく変わってきます。
設置後にも、実際のユーザーの動きを確認しながら定期的に改善をしていくのがおすすめです。

Studioでのお問い合わせフォーム設置手順

ここからは、実際にStudioでお問い合わせフォームを設置する手順を、ステップごとに解説します。

Step1：デザインエディタでフォームを配置する

左側のメニューの「追加」をクリックして、お問い合わせフォームを3つの中から必要な内容に合わせて選びます。
ページ内の任意の場所にドラッグ&ドロップで簡単に設置できます。追加したい項目があれば、Form Partsから追加しましょう。

Step2：フォーム内の各項目のタイトルを編集する

初期設定では、お問い合わせフォームの項目が英語になっているため、任意でわかりやすいタイトルに変更します。
編集したい文字の部分をダブルクリックすれば、文字の編集が可能です。

Step3：各項目の詳細設定

次に、以下の項目の詳細設定をおこなっていきましょう。

• 必須項目：項目によって「任意」と「必須」を選択できます

• プレースホルダー：入力欄にあらかじめ表示される文字を設定できます

• タイプ：基本的にはテキストですが、メールアドレスと電話番号の入力欄だけ例外なので、適切なタイプを設定しましょう

Step4：送信先と通知の設定

ここまでの手順でお問い合わせフォームのデザイン面が整ったので、次に送信先と通知を設定しましょう。

お問い合わせフォームをクリックして全体を選択すると、右側メニューに「通知先の設定・集計結果」ボタンが出てくるのでクリックします。

画面中央の「有効化する」ボタン(初回設定時)、または画面右上にある「設定」をクリック。

ポップアップが出てくるので、「フォーム通知の送信先」と「通知メッセージタイトル」を任意のものに設定しましょう。
ただし、複数の通知先設定や自動返信はできないので、必要であれば外部サービスの利用も検討してみてください。

Step5：送信後の動作を設定

送信完了ボタンを押した後の導線も忘れずに設定しましょう。
「送信完了画面へ遷移」か「送信完了メッセージ表示」から選択することが可能です。

どちらへ遷移させても良いですが、サンクスページを作成して遷移させるとユーザーの満足度向上に繋がるので、クオリティの高いサイトにしたい場合はサンクスページを作成しておくのがおすすめです。

これで基本的なお問い合わせフォームの設置は完了です。
運用前に、お問い合わせフォームが届くかを忘れずに確認しておきましょう。

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

Studioでは、Googleフォーム・HubSpot・formrunなど外部フォームをHTML埋め込みで設置することが可能です。
以下の手順で埋め込んでいきます。

1. 外部フォームの取得：GoogleフォームやHubSpotなどの外部フォームサービスでフォームを作成し、埋め込み用のコード(iframeタグ)を取得します。

2. Studioでの埋め込み：Studioのデザインエディタ上にHTML埋め込みパーツを追加し、取得したiframeコードを貼り付けます。

3. 取得したコードを貼り付けて保存

以上でStudioのページ内に外部フォームを埋め込みが完了です。
こちらも運用前に、しっかりと表示されているか確認しましょう。

外部フォームから埋め込んだフォームは、デザインのカスタマイズやフォームの送信結果の管理はStudio側ではできないので注意が必要です。
フォームを作成した外部ツール側で確認しましょう。

Studioのお問い合わせフォームの応用テクニック

お問い合わせフォームを設置する際に、以下の項目を意識して作成するとより効果的なお問い合わせフォームを運用できます。
簡単なものばかりなので、ぜひ意識してみてください。

応用テクニック1：フォームへ入力しやすくする工夫

入力欄へ入力補助（例：プレースホルダーやエラーメッセージ）をつけ、入力するべき内容を視覚的にわかりやすくしたり、スマホなどの画面が小さいデバイスでタップしやすいサイズで作成しましょう。
直感的にわかりやすく作成しておくことで、離脱を防ぎフォームの活用率アップが期待できます。

応用テクニック2：プライバシーへの配慮

フォームには個人情報を入力し送信するので、プライバシーへの配慮もしっかりとしておきましょう。
送信ボタンを押す前に、プライバシーポリシーへのリンクや個人情報の取り扱いについて同意チェックボックスを設置しておくことで、安心感や信頼感にも繋がります。

応用テクニック3：ユーザーの離脱防止の設計

お問い合わせや予約などでいざフォームへ入力しようと思っても、項目が多すぎたりわかりにくい設計になっているとユーザーの離脱に繋がってしまいます。

• CTAボタンの文言は、「送信」より「お問い合わせする」など具体的な文言に

• フォームは1ページ内に収まるような設計にし、マルチステップは避ける

などを意識して設計し、アクション完了まで繋がるフォームを作成しましょう。

注意点

Studioでお問い合わせフォームを使用する際にはいくつかの注意点もあるので、事前に確認しておきましょう。

• 送信先の設定：フォームの送信先メールアドレスを設定しないと、フォームが機能しません

• プライバシーポリシーの設置：個人情報を扱う場合は、プライバシーポリシーページを設置し、フォームに同意チェックボックスを追加することが推奨されます

• フォームのテスト：フォームを公開する前に実際に送信テストを行い、正しく機能するか確認しましょう

•  Studioのフォームの上限数：フォーム数に上限が設定されており、その上限数を超えてしまうとお問い合わせ内容を確認できなくなってしまいます

フォーム制作時の確認チェックリスト

ここまで解説した、お問い合わせフォーム作成時にチェックすべき項目を、チェックリストとしてまとめました。
ご自身でお問い合わせフォームを作成する際にも、下記項目をチェックしてみてください。

□ フォームの項目は、必要最低限になっていますか？

□ メールや電話番号のフォームの入力タイプは適切に設定していますか？

□ 入力の必須項目と任意項目の設定をしていますか？

□ 通知先のメールアドレスに入力ミスはないですか？

□ プライバシーポリシーは掲載されていますか？

□ テスト送信して動作の確認はしましたか？

□ スマホやタブレットで表示した際にもレイアウトは崩れていませんか？

まとめ

Studioのお問い合わせフォームは、ノーコードでありながらも柔軟かつ簡単にフォームの設置から管理までできる、とても便利な機能です。予め用意されているパーツを上手く活用することで、自分のサイトに合ったフォームを作成できます。
また、外部フォームの埋め込みにも対応しており柔軟な運用が可能なので、ポイントや注意点を押さえつつ、効果的なお問い合わせフォームを設置しましょう。

最後までご覧いただき、ありがとうございました。