前回の第21回で、お問い合わせページ（/contact）を新規作成しました。
ただ、あの時点ではページの「器」だけを用意した状態で、フォーム本体となる Google フォームはまだ作成していませんでした。
そのためページを開くと「準備中」と表示されたままになっていました。
今回はその続き作業として、Google フォームを実際に作成し、お問い合わせページに設定するところまでを解説します。
この記事でわかること：
- Google フォームでお問い合わせフォームを作成する手順
- メールアドレスの入力形式チェック（バリデーション）の設定方法
- 回答が届いたときの通知メールの設定方法
app/contact/page.tsxに Google フォームの URL を設定する方法
前提条件
この記事は以下の環境・進捗を前提として解説しています。
- Next.js 15 系（React 19）の App Router を使用
- VPS 上でサーバーモード（PM2）で動作
- シリーズ第21回までを完了し、
app/contact/page.tsxがすでに存在すること
app/contact/page.tsx の中には、CONTACT_FORM_URL という変数が用意されています。
ここに Google フォームの URL を設定することで、ページのボタンが機能するようになります。
なぜ Google フォームを使うのか
お問い合わせフォームを実装する方法はいくつかあります。
Next.js のサーバーモードであれば、API Route と nodemailer を組み合わせたフォーム送信も実装可能です。
しかし、今回は Google フォームを使うことにしました。理由は3つあります。
理由①：サーバー側の実装が不要
Google フォームは Google のサーバー上で動くため、こちら側でメール送信の処理を実装する必要がありません。
nodemailer の設定やメールサーバーの構成といった複雑な作業が発生しません。
理由②：無料で制限なく使える
Google フォームは Google アカウントがあれば無料で使えます。
回答数の制限もありません。
理由③：スパム対策になる
メールアドレスを直接ページに掲載するとスパムの原因になります。
Google フォームを経由することで、メールアドレスを公開せずにお問い合わせを受け取れます。
読者に個人情報は漏れないか
Google フォームを使う際に気になるのが「自分の Google アカウントやメールアドレスが読者に見えてしまわないか」という点です。
結論として、通常の設定であれば読者にアカウント情報もメールアドレスも表示されません。
| 項目 | 読者に見えるか |
|---|---|
| Google アカウント名 | 見えない |
| Gmail アドレス | 見えない |
| フォームのタイトル・質問内容 | 見える（自分で設定した内容のみ） |
| 送信後のお礼メッセージ | 見える（自分で設定した内容のみ） |
回答者への確認メールを送る機能を使う場合も、送信元は forms-receipts-noreply@google.com という Google の公式アドレスになります。
今回作成するフォームの構成
作成するお問い合わせフォームの内容は以下のとおりです。
| 項目 | 形式 | 必須 |
|---|---|---|
| お名前 | 短文テキスト | 必須 |
| メールアドレス | 短文テキスト（メール形式チェックあり） | 必須 |
| お問い合わせ内容 | 長文テキスト | 必須 |
シンプルな3項目構成にしました。
項目が増えるほど送信完了率が下がります。
お問い合わせフォームでは必要最小限にとどめるのが適切です。
STEP 1：Google フォームを開く
ブラウザで以下の URL にアクセスします。
https://forms.google.comGoogle アカウントにログインした状態で開くと、Google フォームのトップページが表示されます。
「＋（空白）」をクリックすると新しいフォームの作成画面が開きます。
Google フォームのトップページの画面です。
あらかじめ用意されたテンプレートも多数ありますが、今回は「＋（空白）」ボタンをクリックして、新規にフォームを作成します。
Gemini（AI）による作成画面が表示された場合
フォームを開くと、AI がフォームを自動生成するための画面（Gemini）が表示される場合があります。
今回は手動で作成するため、画面右上の「×」をクリックして閉じてください。
「×」を閉じると通常の編集画面に切り替わります。
STEP 2：タイトルと説明を入力する
通常の編集画面が表示されたら、まずフォームのタイトルと説明を設定します。
「＋（空白）」ボタンをクリックすると、「無題のフォーム」という画面が表示されます。
ここからフォームのタイトルや、質問事項を設定していきます。
「無題のフォーム」と書かれた部分をクリックして、以下のように入力します。
タイトル：
お問い合わせその下の「フォームの説明」をクリックして、以下のように入力します。
説明文：
ご質問・ご意見・ご感想などをお気軽にお送りください。内容を確認後、メールにてご返信いたします。タイトルはフォームページの一番上に表示されます。
説明文は「何のフォームか」と「返信についての案内」を簡潔に伝える文章にしました。
STEP 3：質問を追加する
次に、3つの質問を設定します。
質問① お名前
最初から「無題の質問」が1つ作成されているので、それを修正して使います。
- 「無題の質問」をクリックして
お名前と入力する - 右側のドロップダウン（「ラジオボタン」と表示されている）をクリックして
記述式を選ぶ - 右下の「必須」トグルをクリックしてオンにする（紫色になる）
「記述式」は1行のテキスト入力欄です。お名前のような短い入力に適しています。
質問② メールアドレス
右側の「＋」ボタンをクリックして新しい質問を追加します。
- 質問名に
メールアドレスと入力する - ドロップダウンで
記述式を選ぶ - 「必須」トグルをオンにする
- 質問欄右下の「︙（縦三点）」をクリックして「回答の検証」を選ぶ
- 表示された設定欄で、左のドロップダウンを
テキスト、右のドロップダウンをメールアドレスに設定する
メールアドレスの入力欄は、「必須」にしておき、「︙（縦三点）」をクリックして「回答の検証」を選んでおきましょう。
「回答の検証」（バリデーション）とは、入力値が正しい形式かどうかを自動チェックする機能です。
「メールアドレス」を選ぶと、@ が含まれていない入力に対してエラーメッセージが自動表示されます。
入力ミスによって返信できなくなるリスクを減らせます。
「カスタムのエラーテキスト」という欄は空欄のままで問題ありません。
空欄の場合、Google フォームのデフォルトのエラーメッセージが表示されます。
質問③ お問い合わせ内容
再度「＋」ボタンをクリックして3つ目の質問を追加します。
- 質問名に
お問い合わせ内容と入力する - ドロップダウンで
段落を選ぶ - 「必須」トグルをオンにする
「段落」は複数行のテキスト入力欄です。お問い合わせ内容のような長文の入力に適しています。
STEP 4：送信後のメッセージを設定する
フォームを送信した後に表示されるメッセージを設定します。
- 画面上部の「設定」タブをクリックする
- 「表示設定」の「∨」マークをクリックして展開する
- 「確認メッセージ」の右にある「編集」をクリックする
- 以下のメッセージに書き換える
お問い合わせありがとうございます。内容を確認後、メールにてご返信いたします。返信まで数日お時間をいただく場合があります。デフォルトは「回答を記録しました。」という無機質なメッセージです。
送信後に何も案内がないと読者が不安になるため、返信の目安を伝えるメッセージに変更しました。
同じ画面に「別の回答を送信するためのリンクを表示」というトグルがあります。
オンになっている場合はオフにしてください。お問い合わせフォームでは重複送信を防ぐため、このリンクは不要です。
STEP 5：回答通知メールを設定する
誰かがフォームに回答したとき、自分の Gmail に通知が届くように設定します。
- 画面上部の「回答」タブをクリックする
- 右上の「︙（縦三点）」をクリックする
- 「新しい回答についてのメール通知を受け取る」をクリックする
画面上部の「回答」タブから「新しい回答についてのメール通知を受け取る」にチェックマーク（✓）を付けておきます。
チェックマーク（✓）が付いたら設定完了です。
以後、フォームに回答が届くたびに、フォームを作成した Google アカウントの Gmail に通知メールが届きます。
通知メールに届くのはあくまで「回答があった」という通知です。
回答の全文を確認するには Google フォームの管理画面にアクセスする必要があります。
STEP 6：フォームを公開して URL を取得する
右上の「公開」ボタンをクリックします。
「フォームの公開」という確認画面が表示されます。
回答者の設定が「リンクを知っている全員」になっていることを確認して、「公開」ボタン（紫色）をクリックします。
「リンクを知っている全員」は URL を持っている人なら誰でも回答できるという設定です。
お問い合わせフォームとして一般的な設定です。
公開後、「回答者へのリンクをコピー」という画面が表示されます。
「回答者へのリンクをコピー」に表示された URL をコピーボタンでコピーして、メモ帳などに貼り付けておくと、あとでサイトにリンクを作成する際に便利です。
「URL を短縮」はチェックしなくて大丈夫です。
この URL はブログのコードの中に書くだけで読者に直接表示されないため、長さは影響しません。
「コピー」をクリックして URL をコピーします。
取得できる URL の形式は以下のようになります。
https://docs.google.com/forms/d/e/XXXXXXXXXXXX/viewformURL の末尾に ?usp=publish-editor という文字列が付いている場合があります。
これは Google が内部的に付与するパラメーターです。
次のステップでコードに設定する際は、? 以降の文字列を除いた URL を使います。
STEP 7：contact/page.tsx に URL を設定する
VPS に SSH 接続して、以下のコマンドでファイルを開きます。
nano ~/example-blog/app/contact/page.tsxファイルの8行目付近に以下の行があります。
const CONTACT_FORM_URL = '';この行を以下のように書き換えます。'' の中に、STEP 6 でコピーした URL を貼り付けてください。
const CONTACT_FORM_URL = 'https://docs.google.com/forms/d/e/取得したフォームID/viewform';あわせて、ファイル内にフォームの入力項目を案内するリストがあります。
デフォルトのコードには「氏名・メールアドレス・題名・メッセージ本文（任意）」という内容が書かれている場合があります。
実際に作成したフォームの項目と一致させるために、以下のように修正してください。
修正前：
<li>氏名</li>
<li>メールアドレス</li>
<li>題名</li>
<li>メッセージ本文（任意）</li>修正後：
<li>お名前</li>
<li>メールアドレス</li>
<li>お問い合わせ内容</li>編集が終わったら保存して閉じます。
Ctrl + O → Enter（保存）
Ctrl + X（終了）STEP 8：ビルドしてデプロイする
変更が完了したら、ビルドしてデプロイします。
まず以下のコマンドでビルドします。
cd ~/example-blog && npm run build 2>&1 | tail -30ビルドが成功すると、ルート一覧に /contact が ○（Static）として表示されます。
○ /contact○ は「Static（静的コンテンツとして生成済み）」を意味します。
エラーが出ていなければ、続けてデプロイします。
cd ~/example-blog && ./deploy.shSTEP 9：動作確認
デプロイが完了したら、ブラウザでお問い合わせページにアクセスして確認します。
確認する内容は以下の3点です。
- 「お問い合わせフォームを開く」ボタンが表示されていること
- ボタンをクリックすると Google フォームが別タブで開くこと
- フォームに「お名前」「メールアドレス」「お問い合わせ内容」の3項目が表示されていること
完成後の Next.js サイトの「お問い合わせ」画面です。
「お問い合わせフォームを開く」のボタンを押すと、さきほど作成した Google フォームが開きます。
まとめ
Google フォームを使えば、サーバー側の複雑な実装なしにお問い合わせフォームを用意できます。
回答通知メールの設定まで含めても、作業時間は15分程度でした。
自分でお問い合わせフォームの仕組みをサイトに作ることもできますが、無料で多機能なフォームを利用できる Google フォームを使うと、非常に手軽に作成できます。
第21回で CONTACT_FORM_URL = '' という変数を先に用意しておいたことで、今回は URL を1行書き換えるだけで済みました。
コードの設計として、将来の変更を想定した変数管理にしておくと、このように後から楽に対応できます。
次回は SNS シェアボタンの実装を予定しています。
X（Twitter）や Facebook などへのシェアボタンを個別記事ページに追加します。
コメント