お問い合わせフォームの設置

Webサイトにお問い合わせフォームを設置することで、訪問者からの質問や要望を受け取ることができます。ここでは、主にGoogleフォームを利用した簡単な方法を中心に解説し、その他の設置例も紹介します。

お問い合わせフォームの設置方法

お問い合わせフォームを設置するには、以下のような方法があります。

• Googleフォームを使う（もっとも簡単な方法）
• フォームサービス（Formspree, Formrun など）を利用する
• 独自にバックエンド（PHP, Node.js など）を用意して処理する

この中でも、Googleフォームは無料で手軽に使えるため、個人サイトや小規模なプロジェクトに最適です。

Googleフォームを使う方法

Googleフォームを使えば、フォーム作成・入力データの収集・通知まで、ほぼノーコードで完結します。

手順

• Googleフォームで新しいフォームを作成
• 「名前」「メールアドレス」「お問い合わせ内容」など必要な項目を追加
• 「送信」ボタンから「埋め込みHTML」をコピーして、Webサイトに貼り付け

利点

• Googleアカウントがあればすぐに作成可能
• スプレッドシートに回答が自動で記録される
• 基本的な入力検証やファイル添付も可能

注意点

• デザインのカスタマイズがほとんどできない
• 完全なブランド統一が難しい
• JavaScriptで細かい制御を行うことはできない

スプレッドシートで回答を管理する

Googleフォームとスプレッドシートを連携することで、送信された内容を自動的に記録できます。

• フォーム画面右上の「回答」タブを開く
• 「スプレッドシートにリンク」をクリック
• 新しいスプレッドシートが作成され、以降すべての回答が記録されます

GASでメール通知を送る

Google Apps Script（GAS）を使えば、フォーム回答時に指定のメールアドレスに通知を送ることもできます。

• スプレッドシートの「拡張機能」→「Apps Script」を開く
• 以下のようなスクリプトを貼り付けて保存

1function sendMailOnSubmit(e) {
2  const itemResponses = e.values;
3  const name = itemResponses[1];
4  const email = itemResponses[2];
5  const message = itemResponses[3];
6
7  const subject = '新しいお問い合わせ';
8  const body = '名前: ' + name + '\nメール: ' + email + '\n内容: ' + message;
9
10  MailApp.sendEmail('[email protected]', subject, body);
11}
12

トリガー（時計アイコン）を設定し、「フォーム送信時」にこの関数が実行されるようにします。

まとめ

• お問い合わせフォームの設置は、サイト運用の基本機能です
• Googleフォームを使えば、無料・簡単・自動記録付きで運用可能です
• カスタマイズ性に限界がある点は注意が必要ですが、小規模用途には非常に便利です
• GASを組み合わせることで、回答内容をメール通知させることもできます