정적 HTML 페이지의 문의 폼, 실제로 받으려면
Finipage 가이드 · HTML 파일을 코드 없이 고치는 편집기. Finipage 열기
템플릿에 깔끔한 문의 폼이 들어 있습니다. 이름, 연락처, 문의 내용, 그리고 "보내기" 버튼. 페이지를 올리고 방문자가 내용을 적어 버튼을 누르면, 그 문의는 어디에도 도착하지 않습니다. 페이지가 새로고침만 되기도 하고, "405 Method Not Allowed"나 "404" 오류가 뜨기도 하고, 겉보기엔 아무 일도 일어나지 않기도 합니다. 메일은 오지 않습니다. 이 글에서는 왜 그런지, 그리고 한 장짜리 사이트에서 문의를 실제로 받는 방법을 정리합니다.
폼만으로는 아무것도 전달되지 않는 이유
HTML 폼은 방문자 눈에 보이는 입력 화면일 뿐입니다. 제출 버튼을 누르면 브라우저가 입력값을 묶어 폼의 action 속성에 적힌 주소로 보냅니다(보통 method="post"). 그 주소에는 데이터를 받아서 저장하거나 메일로 보내 주는 프로그램이 있어야 합니다. GitHub Pages, Cloudflare Pages, FTP로 올리는 기본 웹호스팅 같은 정적 호스팅에는 그런 프로그램이 없습니다. 파일을 내어 줄 수는 있어도 제출된 내용을 받아 줄 수는 없습니다.
폼의 여는 태그를 확인해 보십시오. <form action="#">, action="/contact", PHP가 없는 호스팅에서의 action="send.php", 또는 action 자체가 없다면 이 폼은 아무것도 전달하지 않습니다.
Finipage를 포함한 페이지 편집기는 파일을 고칠 뿐, 폼 제출을 받거나 전달하지 않습니다. 아래 방법은 어떤 도구로 페이지를 만들었든 똑같이 적용됩니다.
방법 1: 구글 폼 삽입
구글 계정이 있다면 가장 손이 덜 가는 방법입니다. 구글 폼에서 설문을 만들고, 편집 화면의 삽입 옵션(현재 이름은 Embed HTML)에서 <iframe> 코드를 복사해 페이지에 붙여 넣습니다. 응답은 폼의 응답 탭에 쌓이고, 그 탭의 점 세 개 메뉴에서 새 응답이 올 때 이메일 알림을 받도록 켤 수 있습니다.
- 장점: 무료이고, 서버 쪽 설정이 필요 없으며, 응답을 구글 시트로 모을 수 있습니다.
- 단점: 디자인이 내 페이지가 아니라 구글 폼 모양입니다. iframe은 높이를 고정해야 해서 휴대폰에서 페이지 안에 스크롤 막대가 하나 더 생기기도 합니다.
iframe을 넣으려면 HTML 소스를 직접 고쳐야 하므로 VS Code나 메모장을 씁니다. Finipage의 HTML 소스 보기는 확인용이지 입력용이 아닙니다.
방법 2: 폼 처리 서비스
내가 만든 폼 디자인은 그대로 두고, action에 넣을 주소만 받아 쓰는 방식입니다. 아래 내용은 2026년 11월에 각 서비스 공식 사이트에서 확인했습니다. 요금제는 자주 바뀌니 쓰기 전에 요금 페이지를 다시 보십시오.
| 서비스 | 연결 방법 | 무료 사용 |
|---|---|---|
| Formspree | 대시보드에서 폼을 만든 뒤, 내 폼에 action="https://formspree.io/f/폼ID"와 method="POST"를 적습니다. 제출 내용은 메일과 대시보드로 옵니다. | 테스트용 Free 요금제가 있고, 작성 시점 기준 월 50건 제한입니다. |
| Netlify Forms | Netlify에 올린 사이트에서만 됩니다. 사이트 설정의 Forms에서 폼 감지를 켜고, 폼 태그에 name과 netlify(또는 data-netlify="true") 속성을 넣은 뒤 다시 배포합니다. 배포할 때 Netlify가 폼을 찾아 연결합니다. | 폼 한도는 Netlify 요금 안내에서 확인해야 합니다. |
| Tally | Tally에서 폼을 만들고 Share 탭에서 삽입 방식(Standard, Popup, Full page)을 골라 코드를 붙여 넣습니다. 구글 폼과 비슷한 방식입니다. | 무료 요금제에서 폼 수와 응답 수 제한이 없다고 안내합니다(공정 사용 조건 적용). |
Formspree와 Netlify는 내 HTML 폼을 그대로 쓰므로 디자인이 유지됩니다. 입력칸마다 name 속성이 있는지 꼭 확인하십시오. name이 없는 칸은 오류 없이 제출 내용에서 빠집니다.
방법 3: 폼 대신 다른 연락 수단
작은 가게나 1인 사업자라면 폼이 꼭 최선은 아닙니다.
mailto:링크.<a href="mailto:hello@yourshop.kr">를 누르면 방문자의 메일 프로그램이 내 주소가 채워진 채로 열립니다. 서비스가 필요 없지만, 회사 PC처럼 메일 프로그램이 설정되지 않은 컴퓨터에서는 아무 반응이 없을 수 있으니 주소를 글자로도 보여 주십시오.<form action="mailto:...">은 왜 안 되나. HTML 표준은 이 경우 입력값으로mailto:주소를 만들어 방문자의 메일 프로그램에 넘기도록 정해 두었습니다. 직접 보내는 것이 아닙니다. 메일 초안이 뜨는지, 입력값이 제대로 담기는지는 브라우저와 메일 설정에 따라 다르고, 많은 컴퓨터에서 방문자는 "보내기"를 눌렀는데 아무 일도 없는 상황을 겪습니다. 믿을 수 있는 방법이 아닙니다.- 전화와 카카오톡 채널. 국내 고객에게는 전화 버튼과 카카오톡 채널 상담 버튼이 더 익숙한 경우가 많습니다. 카카오톡 채널은
https://pf.kakao.com/_xxxxx형태의 주소를 가지며, 채팅 버튼에 넣을 링크는 채널 관리자센터에서 확인할 수 있습니다. 전화 버튼은<a href="tel:02-1234-5678">처럼 씁니다.
버튼의 연결 주소를 https://pf.kakao.com/...로 바꾸는 일은 Finipage의 링크 칸에서 할 수 있습니다. mailto:와 tel: 링크는 텍스트 편집기에서 소스를 고쳐야 합니다.
스팸 막기
공개된 폼은 금방 스팸 봇에게 발견됩니다. 위 서비스 대부분이 지원하는 기본 대책은 다음과 같습니다.
- 허니팟 칸. 사람 눈에는 안 보이지만 봇은 채워 넣는 숨은 입력칸입니다. Netlify는 폼에
netlify-honeypot="bot-field"속성을 달아 쓰고, Formspree도 허니팟 사용을 권합니다. - CAPTCHA. reCAPTCHA 같은 확인 절차는 자동 제출을 대부분 막아 주지만 실제 방문자에게도 한 단계가 늘어납니다. Netlify와 Formspree 모두 reCAPTCHA를 쓸 수 있습니다.
- 서비스 쪽 필터. Netlify는 모든 제출을 Akismet으로 걸러 스팸으로 판단한 것을 따로 모아 두고, Formspree도 자체 필터가 있습니다. 진짜 문의가 스팸함에 들어가는 일도 있으니 가끔 확인해야 합니다.
- 받는 메일 주소를 HTML에 적지 않기. 예전 폼 스크립트는 받는 주소를 숨은 칸에 넣어 두었는데, 주소 수집 봇이 그대로 읽어 갑니다. Formspree의
/f/주소처럼 폼 ID를 쓰는 방식은 이 문제가 없습니다.
개인정보를 받는다는 것
이름과 전화번호는 개인정보이고, 받는 순간 관리 책임이 생깁니다. 개인정보 보호법은 동의를 받아 개인정보를 수집할 때 수집·이용 목적, 수집하는 항목, 보유 및 이용 기간, 동의를 거부할 권리가 있다는 사실과 거부할 때의 불이익을 알리도록 하고 있습니다(제15조). 문의 폼이라면 보통 이렇게 갖춥니다.
- 버튼 근처에 목적, 항목, 보유 기간을 적은 짧은 수집·이용 안내
- 미리 체크되어 있지 않은 동의 체크칸
- 개인정보 처리방침 링크(푸터에도 함께)
필요한 것만 받으십시오. 전화로 답할 거라면 주소나 생년월일은 필요 없습니다. 폼 서비스도 그 데이터를 보관하므로 처리방침에 해당 서비스를 밝히고, 다 처리한 오래된 문의는 지우는 것이 좋습니다. 내 경우에 정확히 무엇이 필요한지는 개인정보보호위원회 안내를 확인하거나 전문가에게 물어보십시오. 이 글은 법률 자문이 아닙니다.
실제로 도착하는지 확인하기
- 페이지를 올린 뒤, 내 컴퓨터의 파일이 아니라 실제 공개 주소에서 시험 문의를 보냅니다.
- 휴대폰(모바일 데이터)에서 한 번, PC 브라우저에서 한 번 보냅니다.
- 메일함, 서비스 대시보드, 구글 시트 등 받기로 한 곳에 도착했는지 확인합니다. 스팸함도 봅니다.
- 제출 직후 방문자가 보는 화면도 확인합니다. 빈 화면이나 알 수 없는 JSON 글자가 뜨면 오류처럼 보이니, 서비스가 지원한다면 감사 페이지를 지정하십시오.
- 폼, 호스팅, 받는 메일 주소를 바꿀 때마다 다시 시험합니다.
action 주소로 간 요청과 그 상태 코드(200, 404, 405 등)를 보면 주소 문제인지, 호스팅 문제인지, 서비스 문제인지 대개 가려집니다.공개 전에는 랜딩 페이지 공개 전 체크리스트를 한 번 훑어보시고, 아직 페이지를 올리지 않았다면 HTML 파일을 인터넷에 올리는 방법부터 보십시오.
내 파일로 바로 해 보려면 Finipage 편집기를 여세요. 브라우저에서 돌아가고 파일은 내 기기 밖으로 나가지 않습니다.