フォームとFormchanをつなぐ

基本の設定

アカウントを作成すると、最初のフォームが用意されます。ダッシュボードに表示される専用URLを、フォームのaction属性に設定してください。method属性はPOSTにします。

<form action="https://formchan.app/f/YOUR_FORM_KEY" method="POST">
  <input name="name">
  <input name="email" type="email">
  <textarea name="message"></textarea>
  <button>送信</button>
</form>

送信後、利用者には送信完了ページが表示されます。問い合わせはFormchanの受信箱に届き、AIが重要度・タグ・要約を付けます。設定後はテスト送信で、受信と通知を確認してください。

入力項目の設定

各項目のname属性は自由に指定できます。送信された項目は、受信箱と通知メールに表示されます。

返信先のメールアドレスには、name属性がemail、mail、_replytoなどの項目を使用します。送信者名にはname、fullnameなどの項目を使用します。

1回の送信サイズは64KBまでです。項目は先頭から50個まで、各項目の値は5,000文字まで受け付けます。超えた項目や文字は保存されません。

送信後のページ

既定では、Formchanの送信完了ページを表示します。送信元ページを確認できる場合は、戻るリンクも表示されます。

自分のサイトの完了ページへ移動させるには、_nextという隠し項目にURLを設定します。送信を許可するサイトを指定している場合は、そのサイト内のURLを使用してください。

<input type="hidden" name="_next" value="https://example.com/thanks">

JavaScriptでの送信

Accept: application/jsonヘッダーを指定すると、送信結果をJSONで取得できます。ページを移動せずに、フォーム内で完了メッセージを表示する場合などに利用できます。

const res = await fetch('https://formchan.app/f/YOUR_FORM_KEY', {
  method: 'POST',
  headers: { Accept: 'application/json' },
  body: new FormData(form),
});
const data = await res.json(); // { ok: true }

成功時はok: true、失敗時はok: falseとerrorが返ります。errorには次のコードが入ります。

スパム対策

name属性が_gotchaの非表示項目を追加すると、簡易的なボット対策になります。この項目に値が入っていた場合は、送信成功の応答を返しますが、問い合わせとして保存しません。

<input name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

同じIPアドレスからの短時間の連続送信には、送信回数の制限も適用されます。

フォームの設定で、送信を許可するサイトを指定できます。指定後は、それ以外のサイトからの送信を受け付けません。

サイト・フレームワーク別の設定

HTML

基本の設定にあるサンプルコードを使用し、actionを専用URLに変更してください。

WordPress

カスタムHTMLブロックにフォームのコードを貼り付けます。フォームプラグインを利用する場合は、送信先を変更できるか確認してください。

Webflow

フォーム設定のActionに専用URLを入力し、MethodをPOSTに設定してください。

React / Next.js

「JavaScriptでの送信」の例を参考に、fetchで専用URLへ送信してください。

通知の設定

重要度★3の問い合わせは、判定後すぐに通知先へメールでお知らせします。通知先を追加した場合は、確認メール内のリンクを開いて認証してください。認証後に通知が有効になります。

★1・★2は、1日1通のまとめメールでお知らせします。配信時刻は設定で変更できます。対象の問い合わせがない日は配信しません。

プロプラン以上では、Slack、Chatwork、Microsoft Teams、Google Chat、Discordにも通知できます。

Webhook

ビジネスプランの機能です。問い合わせのAI判定後、設定したURLにJSON形式のデータをPOSTで送信します。

X-Formchan-Signatureヘッダーには、Webhookのシークレットで本文を署名したHMAC-SHA256が、sha256=…の形式で入ります。受信側で署名を検証し、送信元がFormchanであることを確認してください。

送信データの例

{
  "event": "submission.created",
  "at": "2026-10-12T09:29:41.000Z",
  "workspace": { "id": "w_…", "name": "Harbor Design Studio" },
  "submission": {
    "id": "sb_…",
    "number": 1,
    "form": { "id": "fm_…", "name": "Contact" },
    "received_at": "2026-10-12T09:29:38.000Z",
    "name": "Emily Parker",
    "email": "emily@example.com",
    "fields": { "name": "Emily Parker", "email": "emily@example.com", "message": "…" },
    "stars": 3,
    "tags": [{ "id": "tg_…", "name": "Inquiry", "by": "ai" }],
    "summary": "Wants a consultation on adding a second floor.",
    "reason": "Concrete request with budget and timeline.",
    "done": false
  }
}

署名の検証例（Node.js）

import crypto from 'node:crypto';

// rawBody: the request body as a string, before JSON.parse
function isFromFormchan(rawBody, signature, secret) {
  const expected = 'sha256=' + crypto.createHmac('sha256', secret).update(rawBody).digest('hex');
  const a = Buffer.from(expected), b = Buffer.from(signature || '');
  return a.length === b.length && crypto.timingSafeEqual(a, b);
}