Formspree로 웹사이트에 폼을 추가하는 방법

Chris Chen

8 분 읽기

Dec 17, 2025

웹사이트에 폼을 추가하는 것은 간단해 보입니다. 하지만 백엔드를 고려하기 시작하면 일이 복잡해집니다. 서버를 구축하고, 제출 데이터를 처리하고, 이메일 알림을 보내고, 스팸을 필터링하고, 데이터를 저장할 곳도 마련해야 합니다. 간단한 문의 폼 하나에 너무 많은 작업이 필요합니다.

Formspree는 이 모든 것을 처리해 줍니다. 폼 제출 데이터를 받아서 필요한 곳으로 전달하는 폼 백엔드 서비스입니다.

왜 Formspree인가?

백엔드 불필요. 폼을 Formspree 엔드포인트로 연결하면 끝입니다.
스팸 차단. 내장 필터링 기능으로 받은 편지함을 깔끔하게 유지합니다.
다양한 연동. Email, Discord, Slack으로 알림을 받거나 Google Sheets, Airtable 등으로 데이터를 직접 전송할 수 있습니다.

이 가이드에서는 Formspree를 설정하고 실제 동작하는 코드 예제를 통해 Next.js 애플리케이션에 통합하는 방법을 배웁니다.

Formspree 시작하기

1. 계정 만들기

formspree.io에서 무료 계정을 등록하세요. 무료 플랜은 월 50회 제출이 포함되어 있어 대부분의 개인 프로젝트나 소규모 웹사이트에 충분합니다.

2. 폼 엔드포인트 만들기

로그인 후:

대시보드에서 Add New -> New Form 클릭
폼 이름 지정 (예: "Contact Form")
Formspree가 https://formspree.io/f/xyzabcde 와 같은 고유한 엔드포인트 URL을 생성합니다

참고: 이 URL의 마지막 부분( xyzabcde )이 Form ID입니다. 웹사이트에 통합할 때 필요합니다.

3. 연동 옵션

Formspree는 모든 기술 스택에서 작동합니다. 대시보드에서 다양한 연동 방법의 코드 예제를 확인할 수 있습니다:

HTML: action 속성을 사용하는 전통적인 폼
AJAX: JavaScript fetch/XHR 요청
React: 공식 @formspree/react 라이브러리 사용

정적 HTML 사이트의 경우 HTML 코드 조각을 복사해서 붙여넣기만 하면 바로 작동합니다. 최신 React/Next.js 앱의 경우 React 라이브러리가 hooks와 상태 관리를 통해 더 나은 개발 경험을 제공합니다.

Next.js에서 Formspree 사용하기

Formspree 공식 React 라이브러리를 사용하여 Next.js에서 문의 폼을 만들어 보겠습니다.

1. 설정

패키지를 설치합니다:

npm install @formspree/react

2. 폼 컴포넌트 만들기

새 컴포넌트 파일 components/ContactForm.jsx 를 생성합니다:

import { useForm, ValidationError } from '@formspree/react';

function ContactForm() {
  const [state, handleSubmit] = useForm("xyzabcde"); // Replace with your Form ID

  if (state.succeeded) {
    return <p>Thanks for your message! We'll get back to you soon.</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          id='name'
          type="text"
          name="name"
          required
        />
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <input
          id='email'
          type="email"
          name="email"
          required
        />
        <ValidationError 
          prefix="Email" 
          field="email"
          errors={state.errors}
        />
      </div>

      <div>
        <label htmlFor="message">Message</label>
        <textarea
          id='message'
          name="message"
          rows="5"
          required
        />
        <ValidationError 
          prefix="Message" 
          field="message"
          errors={state.errors}
        />
      </div>

      <button type="submit" disabled={state.submitting}>
        {state.submitting ? 'Sending...' : 'Send Message'}
      </button>
    </form>
  );
}

export default ContactForm;

작동 원리:

useForm hook은 Form ID를 받아 폼 상태와 제출 핸들러를 반환합니다
state.submitting 은 폼 제출 중에 true가 됩니다
state.succeeded 는 제출 성공 후 true가 됩니다
state.errors 는 Formspree에서 반환된 유효성 검사 오류를 포함합니다
ValidationError 컴포넌트는 필드별 오류를 자동으로 표시합니다

이제 어떤 페이지에서든 컴포넌트를 사용할 수 있습니다:

import ContactForm from '@/components/ContactForm';

export default function ContactPage() {
  return (
    <main>
      <h1>Contact Us</h1>
      <ContactForm />
    </main>
  );
}

끝입니다. 이제 폼은 Formspree로 데이터를 전송하고, 제출될 때마다 이메일 알림을 받게 됩니다.

3. 선택적 개선 사항

환경 변수

Form ID를 직접 작성해도 되지만, 환경 변수를 사용하는 것이 더 깔끔합니다. 개발 환경과 프로덕션 환경에서 서로 다른 폼을 사용할 때 특히 유용합니다.

.env.local 파일을 생성합니다:

# Replace with your Form ID
NEXT_PUBLIC_FORM=xyzabcde

컴포넌트를 업데이트합니다:

const [state, handleSubmit] = useForm(process.env.NEXT_PUBLIC_FORM);

클라이언트 측 유효성 검사

위 예제는 기본 HTML 유효성 검사( required , type="email" )를 사용합니다. 더 복잡한 유효성 검사가 필요하면 React Hook Form이나 Zod를 Formspree와 함께 사용하는 것을 고려해 보세요.

reCAPTCHA를 이용한 스팸 방지

Formspree는 reCAPTCHA 연동을 지원합니다. Formspree 대시보드의 폼 설정에서 활성화한 후 reCAPTCHA 컴포넌트를 추가합니다:

import { useForm, ValidationError } from '@formspree/react';
import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';

function ContactForm() {
  const { executeRecaptcha } = useGoogleReCaptcha();
  const [state, handleSubmit] = useForm("xyzabcde", {
    data: { "g-recaptcha-response": executeRecaptcha }
  });

  // ... rest of the form
}

원클릭으로 EdgeOne Pages에 배포

Formspree가 이미 통합된 Next.js 템플릿을 만들었습니다. 기본 유효성 검사와 오류 처리 기능을 갖춘 문의 폼이 바로 사용할 수 있는 상태로 포함되어 있습니다. 원클릭으로 EdgeOne Pages에 배포할 수 있습니다.

시작 방법:

Formspree에서 폼을 생성하고 Form ID를 복사
아래 배포 버튼을 클릭하여 배포 페이지 열기
환경 변수 섹션에서 NEXT_PUBLIC_FORM 에 Form ID 설정
배포 완료

👉 EdgeOne Pages에 배포

처음부터 끝까지 약 5분이면 됩니다. 배포 후에는 폼 필드, 스타일을 커스터마이징하거나 사이트에 더 많은 폼을 추가할 수 있습니다.

질문이 있으신가요? 문의하기를 통해 연락 주시면 도와드리겠습니다.