Netlify Forms로 문의 폼 만들기
서버 없이 이메일 받는 법

📩 서버도 백엔드도 모르는데 문의 폼이 될까?

홈페이지에 문의 폼을 달고 싶었다. "이름, 이메일, 메시지 입력하고 보내기 누르면 나한테 연락 오게 하고 싶다." 그런데 문제가 있었다. 폼 데이터를 받으려면 서버가 필요하다. 서버도 없고, 백엔드 코딩도 모른다.

그냥 포기할 뻔 했는데 Netlify Forms로 됐다. HTML에 속성 하나만 추가하면 서버 없이 폼 데이터가 수집된다. 진짜다.

🧩 Netlify Forms가 뭔가요?

Netlify가 기본으로 제공하는 폼 수집 기능이다. HTML <form> 태그에 data-netlify="true" 속성 하나를 추가하면, 방문자가 폼을 제출할 때마다 Netlify 대시보드에 내용이 쌓인다. 별도 서버, 데이터베이스, API 키 없이 작동한다.

• 무료 플랜 기준 월 100건까지 무료로 수집
• 스팸 차단 기능 내장 (honeypot 방식)
• 폼 제출 시 이메일 알림 설정 가능
• 대시보드에서 제출 내역 CSV 다운로드 가능

🪜 만드는 순서

AI한테 한 줄 요청하고, 코드 받아서 붙이면 된다. 핵심은 data-netlify="true" 속성 하나다.

핵심 코드 구조

<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact">

  <label>이름
    <input type="text" name="name" required>
  </label>

  <label>이메일
    <input type="email" name="email" required>
  </label>

  <label>메시지
    <textarea name="message" required></textarea>
  </label>

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

data-netlify="true" 하나가 전부다. Netlify가 배포 시 이 속성을 감지해서 폼 수집 기능을 자동으로 연결해준다. hidden input의 form-name 값은 form의 name 속성과 일치해야 한다.

🔍 실제로 해보니

처음엔 로컬에서 폼을 제출해봤는데 아무것도 안 됐다. "왜 안 되지?" 하고 한참 고민했는데, 알고 보니 Netlify Forms는 Netlify 서버에 배포된 상태에서만 작동하기 때문이었다. 로컬 파일을 브라우저로 열면 그냥 HTML일 뿐이다.

배포하고 나서 실제로 폼을 제출해봤더니 바로 됐다. Netlify 대시보드 → Forms 메뉴에서 이름, 이메일, 메시지가 깔끔하게 수집된 것을 확인할 수 있었다. 따로 데이터베이스를 만들 필요가 없었다.

📧 이메일 알림 설정하는 법

대시보드에서 직접 확인하는 것도 좋지만, 폼이 제출될 때마다 이메일로 알림을 받으면 훨씬 편하다. 설정 방법은 간단하다.

✅ 마무리 — 서버 없이 방문자와 소통하기

Netlify Forms 하나로 서버 없이 문의 폼을 운영할 수 있다. 소상공인, 프리랜서, 개인 포트폴리오 사이트에 바로 써먹을 수 있다. 설치할 것도 없고, 유지 관리도 필요 없다. HTML 속성 하나가 전부다.

배포 전엔 안 된다는 것만 기억하면 된다. 로컬에서 안 된다고 포기하지 말고 Netlify에 올린 뒤 테스트해보자.