Studioのフォーム設定｜お問い合わせフォームの作り方・自動返信機能を設置

Webサイト運営において、ユーザーからの声を集める「お問い合わせフォーム」は欠かせない存在です。顧客との最初の接点となるお問い合わせフォームは、ビジネスの成否を左右する重要な要素と言っても過言ではありません。しかし、「フォームの設置は難しそう」「専門知識が必要なのでは？」「プログラミングができないと無理？」と感じる方も多いのではないでしょうか。

実は、ノーコードツールStudioを使えば、そんな心配は一切不要です。Studioのフォーム機能は、プログラミング知識ゼロでも、マウス操作だけで本格的なコンタクトフォームやメールフォーム、さらには申し込みフォームや応募フォームまで、あらゆる種類の入力フォームを作成できます。

本記事では、Studioのフォーム設定機能に焦点を当て、初心者でも迷わず実践できる作り方を、画像付きで徹底解説します。基本的なフォーム作成の手順はもちろん、外部ツールを使った自動返信メールの設定方法、デザインのカスタマイズテクニック、無料プランと有料プランの違い、さらにはセキュリティ対策まで、Studioのフォーム機能に関するあらゆる疑問にお答えします。

この記事を読めば、あなたも今日から高機能なお問い合わせフォームをサイトに設置し、ユーザーとのコミュニケーションを円滑に進められるようになるでしょう。

Studioでお問合せフォームを追加する方法

Studioでは、驚くほど簡単にコンタクトフォームやメールフォームといった入力フォームを作成できます。ここでは、基本的なフォームの作り方を5つのステップに分けて、画像付きで詳しく解説します。この手順に沿って進めれば、誰でも迷わずフォームを設置できます。

1. フォームパーツを配置する

まずは、フォームを設置したいページを開き、左側の「追加」パネルから「フォーム」セクションを見つけます。

Studioには、「Basic Forms」というカテゴリに、シンプルなものから多機能なものまで、3種類のテンプレートが用意されています。

• Form 1: 汎用的なお問い合わせフォーム（氏名、メールアドレス、メッセージ）

• Form 2: メールアドレスのみのシンプルなフォーム（ニュースレター登録など）

• Form 3: 電話番号や会社名など、詳細情報を収集する高機能なフォーム

目的に合ったテンプレートを選び、ページ上にドラッグ＆ドロップで配置しましょう。これだけで、基本的なフォームの追加は完了です。もし、テンプレートにない項目が必要な場合は、「Form Parts」から個別のパーツを追加することも可能です。利用可能なパーツには、Input（テキスト入力）、Textarea（複数行テキスト）、Select（プルダウンメニュー）、Radio（ラジオボタン）、Checkbox（チェックボックス）、File（ファイルアップロード）などがあります。

2. フォームの項目を編集する

次に、配置したフォームの各項目を編集していきます。このステップが、ユーザーにとって使いやすいフォームになるかどうかを左右する重要なポイントです。

まず、初期状態では項目名が英語（例：「Full Name」「Email」「Message」）になっていることが多いので、日本語に修正しましょう。編集したいテキストをダブルクリックすれば、簡単に文字を変更できます。以下のように変更すると良いでしょう。

• 「Full Name」 → 「お名前」または「氏名」

• 「Email」 → 「メールアドレス」

• 「Message」 → 「お問い合わせ内容」または「メッセージ」

さらに、各項目（フィールド）の詳細設定も行いましょう。フォーム全体を選択し（フォームの周りがオレンジ色になります）、右側のパネルから編集したい項目をクリックすると、以下の設定が可能です。

タイプの設定

「タイプ」では、入力されるデータの種類を指定します。以下の3種類があります。

• text: 通常のテキスト入力（氏名、会社名など）

• email: メールアドレス専用（形式チェックが自動で行われます）

• tel: 電話番号専用（スマートフォンでは電話番号キーボードが表示されます）

メールアドレスと電話番号以外の項目は、基本的に「text」を選択しましょう。

必須項目の設定

「必須項目」にチェックを入れると、その項目が未入力のままではフォームを送信できなくなります。一般的に、「氏名」と「メールアドレス」は必須にし、「電話番号」や「会社名」は任意にすることが多いです。必須項目には、項目名の横に赤いアスタリスク（＊）を追加して、ユーザーに分かりやすくすると良いでしょう。

プレースホルダーの設定

「プレースホルダー」は、入力欄にあらかじめ表示される薄いグレーのテキストで、ユーザーに入力例を示す役割を果たします。以下のように設定すると効果的です。

• 氏名の入力欄: 「山田 太郎」

• メールアドレスの入力欄: 「example@example.com」

• 電話番号の入力欄: 「00-0000-0000」

• 会社名の入力欄: 「株式会社○○」

これらの設定を駆使して、お問い合わせフォームのデザインを整え、ユーザーが入力しやすいようにカスタマイズしましょう。例えば、アンケートのためにチェックボックスを追加して複数選択を可能にしたり、お問い合わせの種類を選ぶためにラジオボタンで一つの選択を求めたりと、柔軟な項目追加が可能です。

3. フォーム全体の設定をする

個々の項目の次は、フォーム全体の設定です。フォーム全体を選択した状態で、右側のパネルから設定を行います。ここでは、フォームの振る舞いや送信後の動作を細かく設定できます。

フォーム名の設定

フォーム名は、複数のフォームを管理する場合に特に重要です。「お問い合わせ」「資料請求」「セミナー申し込み」など、わかりやすい名前を付けましょう。この名前は、管理画面でデータを確認する際に表示されるため、後から見ても何のフォームか分かるようにしておくことが大切です。

送信後のページ設定

「送信後のページ」では、ユーザーがフォームを送信した後に表示されるページ（サンクスページ）を設定します。ここで指定しない場合、Studioのデフォルトの完了メッセージ（「送信が完了しました」）が表示されます。

しかし、ブランドイメージを統一したり、次のアクション（例：資料ダウンロード、SNSフォローの促進）を促すためには、独自のサンクスページを作成することをおすすめします。あらかじめ「Thank You」ページを作成しておき、ここで指定しましょう。

送信ボタンのカスタマイズ

送信ボタンのテキストも自由に変更できます。デフォルトでは「Submit」や「送信」となっていますが、以下のようにフォームの目的に合わせて調整すると、ユーザーにとって分かりやすくなります。

• お問い合わせフォーム: 「送信する」「お問い合わせを送る」

• 資料請求フォーム: 「資料を請求する」「無料でダウンロード」

• 申し込みフォーム: 「申し込む」「参加登録する」

• 応募フォーム: 「応募する」「エントリーする」

ボタンの色やサイズ、ホバー時のエフェクトなども、Studioのデザインエディタで自由にカスタマイズできます。

4. 送信先を設定する

フォームが完成したら、最も重要な送信先の設定です。お問い合わせフォームから送信された内容が、どのメールアドレスに届くようにするかを決める、極めて重要なステップです。この設定を忘れると、せっかくユーザーがフォームを送信しても、誰もその内容を確認できないという事態になりかねません。

以下の手順で送信先を設定します。

1. フォームを選択した状態で、右パネルの「通知先の設定・集計結果」をクリック

2. フォームの管理画面（ダッシュボード）に移動

3. 「通知設定」タブを選択

4. 「メール通知」をオンにする

5. 通知を受け取りたいメールアドレスを入力

複数の担当者に通知したい場合は、カンマ区切りで複数のアドレスを入力します（例：sales@example.com, support@example.com）。

この管理画面では、過去に送信されたフォームのデータを一覧表示したり、CSV形式でダウンロードしたりすることもできます。顧客管理やデータ分析に活用しましょう。

5. フォームを削除する

不要になったフォームは、いつでも削除できます。ただし、削除には2つのレベルがあることに注意が必要です。

ページからフォームを削除する

まず、エディタ上で対象のフォームボックスを選択し、キーボードの「Delete」キーを押すか、右クリックメニューから「削除」を選ぶことで、ページからフォームを削除できます。これにより、該当ページからはフォームが表示されなくなります。

フォームデータを完全に削除する

しかし、ページから削除しただけでは、フォームの管理画面や過去の回答データは残ったままです。完全に削除したい場合は、以下の手順で進めます。

1. フォームの管理画面（ダッシュボード）にアクセス

2. 該当するフォームを選択

3. 設定画面から「フォームを削除」をクリック

4. 確認ダイアログで「OK」をクリック

これにより、フォームの設定だけでなく、過去に収集したすべての回答データも完全に消去されます。削除したデータは復元できないため、必要なデータは事前にCSV形式でダウンロードしてバックアップしておきましょう。

Point: Studioのフォーム作成は、まるでレゴブロックを組み立てるような感覚です。パーツの追加や編集、並び替えが自由自在なので、まずはテンプレートを配置してみて、そこから自分の理想の形にカスタマイズしていくのがおすすめです。

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

ユーザーがフォームを送信した直後に「お問い合わせありがとうございます」といった確認

メールが届けば、ユーザーは安心し、企業への信頼感も高まります。特に、BtoBビジネスや高額商品の問い合わせでは、自動返信メールはほぼ必須の機能と言えるでしょう。

しかし、Studioの標準機能には、残念ながらフォームの自動返信機能は搭載されていません。これは、多くのノーコードツールに共通する課題でもあります。

しかし、ご安心ください。外部ツールと連携することで、この機能は簡単に実装可能です。ここでは、多くのユーザーに利用されている「Zapier（ザピアー）」という自動化ツールとGoogleスプレッドシートを連携させ、自動返信メールを送信する手順を解説します。この方法を使えば、フォームの回答をスプレッドシートに自動で記録しつつ、送信者へメールを送ることができます。

Zapierは無料プランもありますが、月間100タスクまでという制限があります。本格的な運用を考える場合は、有料プラン（月額約20ドル～）を検討しましょう。

1. Googleスプレッドシートと連携する

まず、Studioのフォームダッシュボードから、対象のフォームとGoogleスプレッドシートを連携させます。設定画面から「スプレッドシートと連携」を選択し、Googleアカウントを認証するだけで、フォームへの回答がリアルタイムで指定のスプレッドシートに記録されるようになります。この「埋め込み」によく似た連携が、自動化の第一歩です。

2. Zapierでトリガーを設定する

次に、Zapierにログインし、新しい「Zap（ザップ）」と呼ばれる自動化ワークフローを作成します。最初のステップである「トリガー」に、Googleスプレッドシートの「New Spreadsheet Row（新しい行が追加されたとき）」を設定します。そして、先ほどStudioと連携したスプレッドシートとワークシート（通常はSheet1）を指定します。これで、「フォームに新しい回答が追加されたら」という動作のきっかけが設定できました。

3. Zapierでアクションを設定する

トリガーの次は「アクション」です。ここでは「Gmail」の「Send Email（メールを送信する）」を選択します。送信先（To）の欄には、スプレッドシートの列から「メールアドレス」の項目を動的に指定します。これにより、フォームに入力されたメールアドレス宛にメールが送信されるようになります。

件名（Subject）や本文（Body）も自由に設定できます。「【株式会社〇〇】お問い合わせありがとうございます」といった件名や、フォームの入力内容を本文に引用することも可能です。これで、パーソナライズされた自動返信メールの完成です。

Point: Zapier連携は、自動返信メール以外にも様々な応用が可能です。例えば、フォームの回答をSlackに通知したり、CRM（顧客管理ツール）に顧客情報を自動で登録したりと、ビジネスのワークフローを大幅に効率化できます。

フォーム設定時の注意点

手軽で高機能なStudioのフォームですが、利用する上でいくつか知っておくべき注意点があります。特に料金プランによる違いや、セキュリティ面は重要です。後で困らないように、事前にしっかりと確認しておきましょう。

無料プランだとフォーム回答数に制限あり

Studioは無料から始められるのが大きな魅力ですが、Freeプランの場合、フォームの回答数に制限があります。具体的には、プロジェクト全体で月間100件までという上限が設けられています。個人ブログや小規模なサイトであれば十分かもしれませんが、キャンペーンや本格的なビジネスで利用する場合は、すぐに上限に達してしまう可能性があります。

一方、有料のPersonalプランやBusinessプランにアップグレードすれば、このフォームの回答数は無制限になります。プランごとの機能の違いを以下の表にまとめました。

本格的な運用を考えるなら、Personalプラン以上へのアップグレードを検討するのが賢明です。

確認画面は自分で作成する必要がある

日本の多くのWebサイトでは、フォーム****送信前に入力内容を確認する「確認画面」が一般的です。これは、誤入力や記入漏れを防ぎ、ユーザーに安心感を与えるための重要なステップです。

しかし、Studioの標準機能では、この確認画面は自動生成されません。送信ボタンを押すと、即座にデータが送信される仕様となっています。これは海外のサービスでは一般的ですが、日本のユーザーには違和感を与える可能性があります。

もし確認画面を設けたい場合は、以下のいずれかの方法で対応できます。

• 方法1: JavaScriptを使って、送信前に入力内容をポップアップで表示する（中級者向け）

• 方法2: フォームを設置したページとは別に「確認用ページ」を作成し、フォームの送信ボタンの代わりに「確認画面へ」というリンクボタンを設置し、確認用ページに実際の送信ボタンを配置する（初心者向け

ただし、方法2の場合、入力内容を確認画面に自動で引き継ぐことはできないため、完全な確認画面というわけではありません。多くの場合、シンプルに送信するフローでも十分機能するため、無理に確認画面を実装する必要はないでしょう。

セキュリティ対策（reCAPTCHA）はBusinessプラン以上

Webサイトを公開していると、スパムボットによる迷惑なフォーム送信に悩まされることがあります。その対策として広く使われているのが、Googleの「reCAPTCHA」という認証システムです。これにより、人間による操作かどうかを判別し、ボットからの送信を防ぎます。

Studioでは、このreCAPTCHA機能がBusinessプラン以上で利用可能です。重要な情報を扱うフォームや、大規模なサイトを運営する場合は、セキュリティ対策としてBusinessプランの導入を検討しましょう。

Point: プラン選びは、将来のサイトの成長を見越して行うことが重要です。最初はFreeプランで始めて、アクセス数やフォームの送信数が増えてきたタイミングでアップグレードするのが、最もコスト効率の良い方法と言えるでしょう。

Studioのフォーム設定に関するQ&A

ここでは、Studioのフォーム設定に関してよく寄せられる質問とその回答をまとめました。実際にフォームを作成する際に直面しやすい疑問を中心に、具体的な解決策を提示します。

Q. Studioで予約フォームを実装できますか？

はい、実装可能です。Studioのフォーム機能を使えば、基本的な予約フォームは作成できます。しかし、カレンダーとの連携やリアルタイムでの空き状況の反映といった高度な機能は、Studio単体では実現が難しいのが現状です。

より本格的な予約システムを導入したい場合は、外部の予約システム（例: Calendly, SelectType）と連携するのがおすすめです。これらのサービスの予約ページへのリンクをStudioサイトに設置したり、サービスによっては埋め込みコードを使ってフォームを直接表示させたりすることも可能です。

Q. フォームで複数選択を実装するには？

はい、チェックボックスパーツを使うことで、複数選択が可能な項目を作成できます。左側の追加パネルから「Checkbox」パーツをフォーム内にドラッグ＆ドロップで配置し、各選択肢のテキストを編集するだけです。アンケートなどで複数の回答を許可したい場合に非常に便利な機能です。

Q. フォームにリンクを設定できますか？

フォームの項目自体に直接ハイパーリンクを設定することはできません。しかし、プライバシーポリシーへの同意を求めるチェックボックスの横に、プライバシーポリシーページへのリンクを設置することは一般的によく行われます。

この場合は、チェックボックスパーツの横に、別途テキストボックスを配置し、そのテキストにリンクを設定するという方法で実現します。

Q. 申し込みフォームや応募フォームも作れますか？

はい、もちろんです。Studioのフォームは非常に柔軟性が高いため、一般的なお問い合わせフォームだけでなく、イベントの申し込みフォームや求人の応募フォーム、アンケートフォーム、資料請求フォームなど、あらゆる用途に対応できます。ファイルアップロード機能（Starterプラン以上）を使えば、履歴書やポートフォリオ、企画書などの提出を求めることも可能です。

Q. フォームの送信先は複数設定できますか？

はい、複数のメールアドレスを送信先として設定できます。フォームの管理画面で通知先メールアドレスを設定する際に、カンマ区切りで複数のアドレスを入力すれば、それぞれに通知が届きます。例えば、営業部門とカスタマーサポート部門の両方に通知したい場合に便利です。

Q. フォームのデザインを自由にカスタマイズできますか？

はい、Studioの強みであるデザイン自由度は、フォームにも当てはまります。入力欄の色、フォント、ボーダー、余白、ボタンのデザインなど、あらゆる要素を細かくカスタマイズできます。ブランドカラーに合わせたり、サイト全体のトーンに統一感を持たせたりと、プロフェッショナルなお問い合わせフォームを作成できます。

まとめ

本記事では、Studioを使ったお問い合わせフォームの作成方法から、自動返信機能の実装、プランごとの注意点まで詳しく解説してきました。

最後に、Studioでフォームを作成するメリットを改めて整理します。

• プログラミング不要： ドラッグ＆ドロップの直感操作だけで、プロ仕様のフォームが完成。

• 高いデザイン自由度： サイトの世界観を壊さず、ブランドにマッチしたカスタマイズが可能。

• 外部連携で効率化： GoogleスプレッドシートやZapierと連携すれば、データ管理や自動返信もスムーズ。

• 用途は無限大： お問い合わせだけでなく、資料請求、イベント申し込み、採用応募など、あらゆるビジネスシーンに対応。

Webサイトにおいて、フォームは「ユーザーとの対話が始まる大切な場所」です。Studioを活用すれば、技術的なハードルを感じることなく、ユーザーにとって使いやすく、運営者にとって管理しやすい理想の接点を作ることができます。

まずは無料プランから、あなたのサイトに最適なフォームを1つ作成してみることから始めてみませんか？ユーザーからの貴重な声をビジネスの成長に繋げていきましょう。

Studioでのホームページ制作ならラシン株式会社へ

ラシン株式会社は、デザインとマーケティングの力で事業成長を支援するホームページ制作会社です。

Studio社公式のStudio Gold Experts認定企業であり、700サイト以上の制作実績No.1を誇ります。

ホームページ制作をきっかけに企業のDX推進全体を加速させること。それが私たちラシンの使命です。

不確実な時代でも前進を続けられるよう、信頼できるパートナーとして伴走します。
まずは、お気軽にお問い合わせください！