フォーム

バックエンドなしで動くフォーム

静的サイトのフォームに属性を1つ足すだけで、送信内容がすべてダッシュボードに届きます。JavaScriptも、埋め込みウィジェットも、外部サービスも不要。入力する人が何かに登録する必要もありません。

index.html
<form harvis-form="contact">
  <input name="email" type="email" required>
  <textarea name="message"></textarea>
  <button>Send</button>
</form>
how it works

3ステップ、うち1つはデプロイし直すだけ

覚えるべきフォームビルダーも、コピーするエンドポイントもありません。この属性が設定のすべてです。

  1. 01

    属性を足す

    HTMLの好きなフォームに harvis-form を書きます。サイトにフォームが複数あるなら名前を付けてください。action と method は書かなくて大丈夫 — ページが配信されるときに埋められます。

  2. 02

    デプロイし直す

    フォルダをもう一度ドラッグするか、npx harvis を実行するだけ。設定も、貼り付けるキーも、事前にダッシュボードで切り替えるスイッチもありません。

  3. 03

    届いたものを読む

    送信内容はダッシュボードのサイトの下に、新しいものから順に並びます。行を開けば全文を読めますし、まとめてCSVで持ち出すこともできます。

the markup

全体でも属性は2つだけ

harvis はサーバーから出ていく途中でフォームを書き換えるので、あなたが書いたページはあなたが書いたページのままです。

あなたが書くもの
<form harvis-form="contact"
      data-harvis-redirect="/thanks.html">
  <input name="email" type="email" required>
  <button>Send</button>
</form>
訪問者が受け取るもの
<form harvis-form="contact"
      data-harvis-redirect="/thanks.html"
      action="/__harvis/form/contact" method="post">
  <input type="hidden" name="_harvis_redirect" value="/thanks.html">
  <input type="text" name="_harvis_hp" tabindex="-1" aria-hidden="true" style="…">
  <input name="email" type="email" required>
  <button>Send</button>
</form>

2つの属性

harvis-form
そのフォームを収集対象として印を付けます。値が名前になるので、1つのサイトに複数のフォームがあっても混ざりません。値を省くと「default」として収集されます。
data-harvis-redirect
任意。送信後に訪問者を送るサイト内のページです。自分のサイトの外を指すものは無視されます。
included

使えるようになること

以下はすべて最初から有効です。どれについても設定ページはありません。

  • JavaScript不要

    フォームはHTMLが昔からしてきたとおりに送信します。スクリプトがブロックされていても、遅いスマホでも、テキストしか表示しないブラウザでも動きます。

  • スパムは弾かれます

    どのフォームにも人間には見えないおとり項目が付いて配信され、そこに入力があったものは黙って捨てられます。レート制限が、1人の訪問者と1つのサイトが1時間に送れる量を抑えます。

  • フォームはいくつでも

    名前を付けましょう — 同じサイトの問い合わせフォームと登録フォームはそれぞれ別のリストを持ち、別々に絞り込んでエクスポートできます。

  • 自作のサンクスページ

    フォームの向き先を自分で書いたページにすれば、送信後はそこに着きます。指定しなければ、素朴な確認ページが表示されます。

  • いつでもエクスポート

    ボタン1つで、これまで誰かが送信したすべての項目に列があるCSVが手に入ります。途中で質問が増えたフォームでも、1つの表として開けます。

  • 誰も追跡しません

    トラッキングスクリプトも、Cookieも、ページ内の第三者もありません。訪問者のアドレスは保存前にハッシュ化され、それもレート制限が2つの送信を区別するためだけに使われます。

limits

制限

問い合わせフォームには十分に余裕があり、サイトに向けられたスクリプトが受信箱を埋め尽くさない程度には厳しくしてあります。

1件あたりの項目数
30
1項目の長さ
5,000文字
1件のサイズ
64 KB
サイトごとの送信数
1時間あたり60件
訪問者ごとの送信数
1時間あたり20件
サイトごとの保存数
1,000件、新しい順
faq

よくある質問

静的サイトにフォームを置く前に、みんなが聞くこと。

静的フォームとは何ですか?

自前のサーバーを持たないサイトに置かれたフォームのことです。ふつうそれは送信先がないということで、だから静的サイトは外部のフォームサービスを借りるのが一般的です。harvis はもともとサイトの全ページを配信しているので、そのついでに送信を受け取れます。

コードが書けないとだめですか?

HTMLの1行に単語を1つ足せれば大丈夫です。サイトをAIが書いたなら、フォームに harvis-form 属性を足すよう頼んでください — harvis がAIアシスタント向けに公開している手順にそう書いてあるので、AIはやり方を知っています。

JavaScriptをオフにしても動きますか?

動きます。むしろそのためにこの作りにしています。フォームはごく普通のHTMLのPOSTを行い、そのあとブラウザがリダイレクトをたどります。JavaScriptが存在する前のフォームとまったく同じです。

自分のエンドポイントや別のフォームサービスを使い続けられますか?

はい — 属性を足さなければいいだけです。harvis-form のないフォームは、action も含めて書いたとおりに配信されます。属性が付いたフォームでは harvis が action を置き換えます。属性を足すことが、送信先を指定する方法だからです。

ファイルを添付できますか?

まだできません。収集対象のフォームでもファイル入力は訪問者にとっては動きますが、ファイルは保存されません — 残るのはテキスト項目だけです。

サイトを削除したら送信内容はどうなりますか?

一緒に消えます。送信内容はデプロイではなくサイトに属するので、デプロイし直しても残り、サイトを削除すると完全に消えます。残したいなら先にCSVをエクスポートしてください。

サイトを公開して試してみる

公開は無料で、2秒ほどで終わります。フォームに属性を足してデプロイし直し、自分宛てにテスト送信してみてください。

サイトを公開する