설정 가이드

시작하기

가입하면 첫 번째 폼이 만들어져 있어요. 대시보드에 표시된 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>

폼을 보낸 사람에게는 완료 페이지가 표시돼요. 메시지는 수신함에 도착하고, AI가 ★와 태그를 붙여요.

필드 이름

필드 이름은 자유롭게 정할 수 있어요. 보낸 필드는 모두 그대로 수신함과 알림 메일에 표시돼요.

답장에 쓸 이메일 주소는 email이라는 이름의 필드에서 읽어요. mail이나 _replyto도 쓸 수 있어요. 보낸 사람 이름은 name이나 fullname에서 읽어요.

한 번에 보낼 수 있는 양은 64 KB까지, 필드는 50개까지, 필드 하나는 5,000자까지예요.

보낸 다음 화면

아무것도 지정하지 않으면 Formchan의 완료 페이지가 표시돼요. 이전 페이지로 돌아가는 링크도 있어요.

내 사이트의 페이지로 이동시키려면 _next라는 숨은 필드에 그 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와 함께 다음 오류 코드 중 하나가 돌아와요.

스팸 방지

_gotcha라는 이름의 숨은 필드를 폼에 넣으세요. 사람에게는 보이지 않지만 봇은 이 필드를 채워요. 이런 전송은 겉으로는 접수된 것처럼 보이고, 실제로는 버려져요.

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

같은 곳에서 짧은 시간에 여러 번 보낸 메시지는 거부해요.

폼 설정에서 전송을 허용할 사이트를 정할 수 있어요. 다른 사이트에서 보낸 것은 거부해요.

WordPress, Webflow 등에서 쓰기

HTML

위의 폼 코드를 그대로 쓰세요.

WordPress

사용자 정의 HTML 블록에 폼 코드를 붙여 넣으세요.

Webflow

폼 설정에서 Action에 URL을 넣고, Method를 POST로 지정하세요.

React / Next.js

“JavaScript로 보내기”에 나온 대로 fetch로 보내세요.

알림

★3 메시지는 도착하는 즉시 알림 받을 주소로 메일을 보내요. 주소를 추가하면 확인 메일이 가고, 그 안의 링크를 누르면 알림이 시작돼요.

★1과 ★2는 하루 한 통의 요약 메일로 받아요. 보내는 시간은 바꿀 수 있고, 새 메시지가 없는 날에는 보내지 않아요.

프로 플랜 이상에서는 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);
}