静的サイトにはフォームを受け取るサーバーがないため、お問い合わせフォームには通常、サードパーティのサービス、スクリプト、API キーが必要です。Lobsite では、フォームに必要なのは action だけです。/_lobsite/forms/<name> に向けてデプロイしてください。メッセージはスパム除去されて、ダッシュボードの送信内容ページとメールに届きます。
<form action="/_lobsite/forms/contact" method="POST">
<input name="email" type="email" required>
<textarea name="message" required></textarea>
<button>Send</button>
</form>
仕組み
- フォームを Lobsite に向けます。
action="/_lobsite/forms/contact"とmethod="POST"です。パスの最後の部分がフォームの名前になります:contact、newsletter、quote。 - デプロイします。 デプロイ時に HTML を読み取り、
/_lobsite/forms/に送信するフォームをすべて記録します。手動で登録するものはありません。 - ダッシュボードの送信内容ページ、メール(Reply-To は送信者)でメッセージを読むか、
lobsite forms export contact --csvでエクスポートします。
上のボックスはお問い合わせページから始まります。公開すると公開サイトでフォームを確認でき、サイトをアカウントに残すとメッセージを受け付けます。
組み込みのスパム対策
ページの配信時に、Lobsite は各フォームに隠しハニーポット項目と署名付きタイムスタンプを追加します。ハニーポットに入力された送信やページ読み込みから 2 秒以内の送信はスパムとして分けられ、連続して送信しすぎる訪問者は拒否されます。CAPTCHA やスクリプトの追加は必要ありません。
チェック、サンクスページ、JavaScript
各フォームは lobsite.toml にセクションを持つことができ、デプロイと一緒に反映されます。
[forms.contact]
required = ["name", "email", "message"]
types = { email = "email" }
redirect = "/thanks"
requiredとtypesはサーバーでもチェックされます。失敗した送信は保存されず、訪問者に修正すべき点が表示されます。redirectは送信後に独自のページを表示します。ない場合、訪問者には戻るリンク付きのサンクスページが表示されます。fetchでの送信では、訪問者はページにとどまります。Accept: application/jsonとともにnew FormData(form)を送信すると、応答は{"ok": true}または通過しなかった項目です。- フレームワークは、フォームがビルドされた HTML にある場合に機能します。プリレンダリングと静的エクスポート(Astro、Eleventy、
output: "export"の Next.js、prerenderの SvelteKit)が生成します。
完全な例(ニュースレター、見積もり依頼、fetch スクリプト)はフォームのドキュメントにあります。
各プランの内容
| アカウントなし | Free | 有料(近日提供) | |
|---|---|---|---|
| 送信の受け付け | サイトの取得後 | はい | はい |
| サイトあたりの月間送信数 | — | 25 | 上限なし |
| メール通知 | — | アカウントのメールアドレス | 任意の確認済みアドレス |
| 署名付き Webhook | — | いいえ | はい |
| 保持期間 | — | 90 日 | 1 年 |
プレビュー URL は送信を受け付けず、フォームのファイルアップロードにはまだ対応していません。
フォームの送信先を /_lobsite/forms/contact にするだけです。スパムフィルターも含まれます。
リダイレクト、ヘッダー、フォームは lobsite.toml に記述し、デプロイごとに一緒に反映されます。
公開前にプレビューできます。リダイレクトも含めてワンクリックでロールバックできます。
すべての制限は公開されており、すべてのエラーが次にすべきことを教えてくれます。
すべてのサイトに、最初のデプロイから HTTPS 対応の *.lobsite.app アドレスが付きます。
ファイルはハッシュで保存されます。変更のないサイトを再デプロイしてもアップロードは 0 バイトです。
Lobsite フォーム、フォームサービス、独自のバックエンド
| Lobsite フォーム | フォームバックエンドサービス | 独自のバックエンド | |
|---|---|---|---|
| ページに追加するもの | action |
サービスのエンドポイント、多くの場合キーかスクリプト | 独自のエンドポイント |
| 管理するアカウント | サイトのあるアカウント | 2 つ目のアカウント | サーバーまたは関数ホスト |
| スパムフィルター | 組み込み | サービスとプランによる | 自作 |
| サイトと一緒にロールバック | はい: 設定は lobsite.toml にある |
いいえ | 場合による |
| 無料の送信数 | サイトあたり月 25 件 | サービスによる | ホスティング費用次第 |
| Webhook | 有料プラン、近日提供 | 通常あり | はい |
今すぐ月に数百件の送信やファイルアップロードが必要なら、有料プランの提供開始までは専用サービスのほうが適しています。小さなサイトのお問い合わせフォームなら、action だけで十分です。
よくある質問
Lobsite のフォームに JavaScript は必要ですか?
いいえ。通常の HTML フォームがそのまま機能します。JavaScript は、ページを離れずにメッセージを表示するための任意の機能です。
フォームのメッセージがスパムに入ったのはなぜですか?
多くの場合、フォームがブラウザの JavaScript でレンダリングされ、Lobsite がページ配信時に追加する隠しスパム項目が失われたためです。フォームをビルドされた HTML に残し、配信されたフォームをブラウザに送信させてください。
別のメールアドレスでメッセージを受け取れますか?
無料プランでは、通知はアカウントのメールアドレスに届きます。任意の確認済みアドレスは近日提供予定の有料プランに含まれます。
アカウントのないサイトはフォームのメッセージを受け付けますか?
まだ受け付けません。デプロイは警告付きで機能し、無料アカウントにサイトを取得するとフォームがメッセージを受け付け始めます。
1 つのサイトに複数のフォームを置けますか?
はい。名前ごとに独立したフォームになり、メッセージと設定も別々です。/_lobsite/forms/contact と /_lobsite/forms/newsletter は、送信内容ページでもエクスポートでも分かれています。