홈 › 웹 제작

서버 없이 문의 폼 만들기: Formspree로 제휴 문의 받기

새벽뉴스 편집부 · 2026년 10월 15일 · 웹 제작

GitHub와 Cloudflare Pages로 올린 사이트에는 서버가 없습니다. 그래서 방문자가 폼에 쓴 내용을 받아 줄 곳이 따로 필요한데, Formspree가 그 역할을 해 줍니다. 이 사이트의 문의 페이지도 Formspree로 만들었습니다.

Formspree가 하는 일

Formspree에 가입해 폼을 하나 만들면 https://formspree.io/f/영문숫자 모양의 주소를 줍니다. 내 폼이 이 주소로 내용을 보내면, Formspree가 가입한 이메일로 전달해 줍니다.

폼의 뼈대

<form id="contactForm" action="https://formspree.io/f/내폼주소" method="POST">
  <input name="이름" type="text" required>
  <input name="email" type="email" required>
  <textarea name="문의 내용" required></textarea>

  <!-- 받는 메일의 제목 -->
  <input type="hidden" name="_subject" value="[새벽뉴스] 새 제휴 문의">
  <!-- 스팸 로봇용 숨은 칸: 사람에게는 보이지 않음 -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

  <button type="submit">문의 보내기</button>
</form>

• name에 쓴 이름이 받은 메일의 항목 이름이 됩니다. 한국어로 써도 됩니다.
• 이메일 칸은 name="email"로 두면 Formspree가 답장 주소로 알아봅니다.
• required를 붙인 칸은 비우면 브라우저가 전송을 막습니다.
• _gotcha는 사람 눈에는 보이지 않는 칸입니다. 스팸 로봇은 모든 칸을 채우는 경향이 있어서, 이 칸이 채워진 제출은 스팸으로 걸러집니다.

페이지를 떠나지 않고 보내기

폼을 그대로 보내면 Formspree의 감사 페이지로 이동합니다. 자바스크립트로 대신 보내면 내 사이트에 머문 채 결과만 보여 줄 수 있습니다.

contactForm.addEventListener("submit", async e => {
  e.preventDefault();                       // 페이지 이동 막기
  try {
    const res = await fetch(contactForm.action, {
      method: "POST",
      body: new FormData(contactForm),
      headers: { Accept: "application/json" }
    });
    if (!res.ok) throw new Error();
    contactForm.reset();                    // 성공하면 칸 비우기
    formMsg.textContent = "문의가 접수되었습니다.";
  } catch (err) {
    formMsg.textContent = "전송에 실패했습니다.";  // 실패하면 쓴 내용은 그대로 둠
  }
});

실패했을 때 칸을 비우지 않는 것이 작지만 중요한 배려입니다. 긴 문의를 쓴 사람이 처음부터 다시 쓰지 않아도 됩니다.

확인할 점

• 처음 받은 제출은 Formspree가 가입한 메일 주소를 인증해 달라고 할 수 있습니다. 메일함을 확인하세요.
• 무료 요금제에는 한 달에 받을 수 있는 제출 수에 한도가 있습니다. 자세한 수치는 Formspree 요금 안내에서 확인하세요.
• 폼으로 이름과 이메일을 받으므로 개인정보처리방침에 무엇을 왜 받는지 적어 두어야 합니다.