静的サイトにお問い合わせフォームを設置する方法｜SSGformの使い方と注意点

2026年9月17日2026年9月18日

静的サイトを作るとき、「お問い合わせフォームはどう設置すればいいの？」と迷うことがあります。

HTMLで入力欄や送信ボタンを作ることはできますが、それだけでは入力内容を受け取り、担当者へ届けることはできません。送信を受け付ける仕組みも必要です。

その方法の一つが、フォームの送信処理を外部サービスに任せること。
今回は SSGform を使い、静的サイト内にお問い合わせフォームを置く方法を紹介します。
自分でサイトを作る方や、クライアントの静的サイトにフォームを設置する制作者の方に向けて、基本の設定と公開後の注意点までまとめました。

※この記事は2026年9月16日にSSGformの公式情報を確認して作成しています。画面や料金、仕様は変更される可能性があるため、導入時には公式サイトも確認してください。

静的サイトでも、フォームは設置できます

静的サイトには、WordPressのようなフォーム機能が最初から備わっているわけではありません。
しかし、サイト全体をWordPressに変更しなくても、フォームだけ外部サービスと組み合わせられます。

SSGformの場合は、サイトに置いたフォームからSSGformの送信先URLへデータを送り、設定したメールアドレスへ通知する仕組みです。
入力画面を自分のサイト内に作れるため、サイトのデザインに合わせやすいのも特徴です。
SSGformの公式サイトにも基本的な仕組みが説明されています。

フォームの画面はサイト側、送信の受け付けはSSGform側、と役割を分けて考えると分かりやすいと思います。

SSGformが向いているケースと、先に確認したいこと

SSGformには、送信通知メール、送信後のページ転送、自動応答メール、迷惑送信対策などの機能があります。
フォームを自社サイト内に作り、必要な項目や見た目を調整したい場合に使いやすい選択肢です。
機能一覧も確認できます。

一方で、HTMLの編集は必要です。
また、問い合わせ内容は通知メールで扱うため、複数人での対応履歴の管理や、案件ごとの進捗管理まで必要なら、別のフォームサービスや顧客管理ツールも含めて選ぶ方がよいでしょう。

利用前には、月間の送信数も確認してください。執筆時点の公式プランページでは、次のようになっています。

プラン	月額	月間フォーム送信数
Free	0円	100件
Starter	980円	1,000件
Pro	2,980円	5,000件

※2026年9月16日確認。料金や上限は変更される場合があります。最新情報は公式プランページをご覧ください。

無料枠から試せますが、受信件数が増えそうなサイトや、営業目的の送信が多いサイトでは上限に余裕を持たせたいところです。
この点は後半で詳しく触れます。

設置前に用意するもの

今回は、名前・メールアドレス・お問い合わせ内容を入力するシンプルなフォームを例にします。
あらかじめ次のものを用意します。

SSGformのアカウント
フォームを置く静的サイトのページ
通知を受け取るメールアドレス
必要なら、送信後に表示する完了ページ
個人情報の取り扱いを案内するページ

完了ページを作らない場合は、SSGform共通の送信完了画面を使うこともできます。
自社サイト内で「送信しました」と伝えたい場合は、完了ページを用意して転送先に設定します。
公式の機能説明に両方の動作が記載されています。

SSGformを使った設置手順

1．SSGformでフォームを作成する

SSGformへ登録・ログインし、新しいフォームを作成します。
管理しやすい名前を付け、通知先メールアドレスを設定してください。

フォーム名は管理用です。
複数のサイトやページに設置するなら、「サイト名／お問い合わせ」のように、どのフォームか分かる名前にしておくと後で迷いません。

2．送信後の表示とメール通知を設定する

必要に応じて、送信後の転送先に自社サイトの完了ページURLを設定します。
自動応答メールを使う場合は、受け付けたことを伝える短い文面を設定しておきましょう。

「お問い合わせありがとうございます。内容を確認してご連絡します」のように書く場合でも、具体的な返信期限を約束するなら、その運用ができる範囲で記載します。

なお、自動応答メールと、通知メールから問い合わせた人への返信を使いやすくするには、メールアドレス欄の name 属性を email または メールアドレス にします。これはSSGform公式FAQで案内されている指定です。

3．発行された送信先URLをフォームに設定する

SSGformが発行したフォームURLを、自分のHTMLの action に設定します。次は基本形です。

<!-- actionは、管理画面で発行された自分のフォームURLに置き換えてください -->
<form action="https://ssgform.com/s/ここに発行されたフォームURL" method="post">
  <div>
    <label for="contact-name">お名前</label>
    <input id="contact-name" type="text" name="お名前" required>
  </div>

  <div>
    <label for="contact-email">メールアドレス</label>
    <input id="contact-email" type="email" name="email" required>
  </div>

  <div>
    <label for="contact-message">お問い合わせ内容</label>
    <textarea id="contact-message" name="お問い合わせ内容" required></textarea>
  </div>

  <div>
    <label>
      <input type="checkbox" name="個人情報保護方針" value="同意する" required>
      <a href="/privacy/">個人情報の取り扱い</a>に同意する
    </label>
  </div>

  <button type="submit">送信する</button>
</form>

action のURLは説明用の文字列なので、そのままでは送信できません。
/privacy/ も自分のサイトの実際の案内ページに変更してください。
CSSで見た目を整える前に、まず送信の流れが動くか確かめると修正しやすくなります。

HTMLの各入力欄には name 属性が必要です。
これは、送信時に「どの項目の値か」を伝える名前です。
項目を増やす場合も付け忘れないようにします。
基本形はSSGformの公式コード例でも確認できます。

4．公開URLからテスト送信する

公開したページを開き、テスト用の内容を送信します。
少なくとも次の流れを確認しましょう。

送信後に想定した完了画面が表示されるか
通知メールが正しい宛先に届くか
自動応答を設定した場合、送信者側にも届くか
通知メールから返信したとき、返信先が想定どおりか
必須項目が空欄のまま送信されないか
スマートフォンでも入力・送信できるか

メールが見当たらない場合は、迷惑メールフォルダーや受信側のフィルタも確認します。
SSGformのFAQでも、通知メールがフィルタで止まる可能性が案内されています。

公開前後に気を付けたいこと

迷惑送信対策は必要に応じて設定する

フォームを公開すると、機械的な送信や営業目的の問い合わせが届くことがあります。
SSGformでは name="wana" の隠し項目による簡易対策のほか、reCAPTCHAやTurnstile、許可ホスト、NGワードなどを設定できます。
公式の機能一覧とコード例を参考に、サイトの状況に合わせて選んでください。

たとえば wana を使う場合は、フォーム内に次の項目を追加します。

<div style="display: none;">
  <label for="contact-wana">入力しないでください</label>
  <input id="contact-wana" type="text" name="wana" tabindex="-1" autocomplete="off">
</div>

これは簡易的な対策です。
CAPTCHAを使う場合は、SSGform側の設定に加え、フォーム側にも専用タグやキーの設定が必要です。
許可ホストを設定する場合は、公開サイトとテスト環境のURLを確認したうえで送信テストをしてください。
設定が合わないと正しい送信まで拒否されます。

月間送信数の上限を放置しない

ここは特に大切です。
SSGformのFAQによると、上限に達した後の送信は処理されず、通知も送られません。
その間の問い合わせ内容は後から取り戻せません。

また、Botによる送信や営業目的の送信も、受け付けられれば月間送信数に数えられます。
迷惑送信対策を入れても、月間の利用状況は確認しておきましょう。
公式FAQでは、上限の90％と100％に達した際に登録メールアドレスへ通知すると案内されています。
通知を受け取れる状態にして、必要なら早めにプランを見直します。