# 静的HTMLサイトに、独自サーバーなしで問い合わせフォームを置く

Formgongへ送るHTMLフォームの実例。PHP不要のPOST、公開キー、完了ページ、受信テストを紹介します。

Author: Formgong
Published: 2026-10-01
Language: ja
Canonical: https://formgong.com/blog/html-contact-form-without-backend?lang=ja

method=POST、Formgongの/submitを指定したaction、隠しフィールドaccess_keyを用意します。通常のHTMLフォームはJavaScriptなしで送信できます。受付サーバーはFormgongが運用します。

## HTMLだけでは受信処理はできない

HTMLは入力欄を表示できますが、単独で問い合わせを保存したりメールを送ったりはできません。その部分をFormgongが担当します。ポートフォリオやサービス紹介など、テキスト中心のフォームに使えます。

既存のバックエンドに業務処理があるなら、そのまま利用する方法もあります。この例はフォームのためだけに新しいサーバーを用意しない方法です。

## 先にメール確認とキー取得

[Formgong](/?lang=ja#top)でフォームを作り、メールを確認してサイト接続画面からキーを取得します。`fk_your_access_key`を置き換えてください。公開キーなのでHTMLに置けます。メール未確認では通知が保留になる場合があります。

## 問い合わせ欄に入れるコード

サイトの問い合わせ部分に挿入し、CSSクラスを加えて見た目を整えます。表示ラベルは変更できますが、フィールド名は維持してください。この例はファイルではなくテキストを送ります。

```html
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden">
  <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Send</button>
</form>
```

## 送信を決める三つの属性

`action`が送信先、`method="POST"`が送信方法、`name`が値の名前です。`id`だけでは足りません。電話番号には`name="phone"`などを追加できます。

`botcheck`はBot対策の隠し欄です。画面外に置き、空のままにします。入力されると迷惑送信として通知されないことがあります。

## 送信後のページを決める

初期設定ではFormgongの結果ページに移動します。独自の完了ページを使うなら、HTTPSの完全なURLを設定してください。`_redirect`でも指定できますが、コード側URLを無視する設定なら管理画面が優先されます。

ページを移動せず表示を更新するには`fetch`が必要です。[応答確認の例](/blog/contact-form-not-sending-email?lang=ja)を参照できます。

## 公開ドメインで最後の確認

見分けやすいテスト文を送り、正しいフォームの記録とメール、迷惑メールを確認します。スマートフォンで入力欄、ボタン、完了ページも確認しましょう。追加通知は[Telegramガイド](/blog/website-form-to-telegram?lang=ja)で設定できます。

## 対策を有効にしたらコードも更新

Turnstileにはウィジェットと`cf-turnstile-response`が必要です。この例の隠し欄だけでは代わりになりません。最新例を管理画面から取得します。許可ドメインを設定する場合は、公開先を含めてください。編集画面のプレビューは別ドメインの場合があります。

## よくある質問

### JavaScriptは必須ですか？

通常のPOSTには不要です。ブラウザーが送信し、結果ページを開きます。

### PHP対応のホスティングが必要ですか？

不要です。Formgongがデータを処理するため、静的ホスティングを使えます。

### フィールドを増やせますか？

name属性のあるテキスト欄を追加できます。この例はファイルアップロードを含みません。

### 例にTurnstileは含まれますか？

隠し欄による対策のみです。Turnstileを有効にした場合は、最新のウィジェットとトークン送信を追加します。

## 参考資料・ドキュメント

- [MDN: sending form data](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data)
- [Formgongドキュメント](https://formgong.com/docs/html?lang=ja)

[フォームキーを取得](https://formgong.com/?lang=ja#top)