안녕하세요, H:Dev+ 팀입니다. 랜딩페이지 하단에 "문의하기" 폼 하나 넣으려다가 폼 데이터를 받을 서버부터 새로 만들어야 했던 경험, 한 번쯤 있으실 겁니다. 저장과 관리자 확인 화면까지 갖추려면 단순한 폼치고는 손이 많이 갑니다. H:Dev+ 웹 폼 기능은 콘솔 설정과 HTML 연결, 두 가지 절차로 안내되어 있습니다. 오늘은 공식 문서와 화면을 기준으로 그 절차를 정리해 드립니다.
1. 콘솔에서 폼부터 만듭니다
가장 먼저 할 일은 코딩이 아니라 설정입니다. 웹 폼 콘솔의 "폼 관리"에서 설문 제목, 설명, 작성 권한(회원 전용 또는 익명)을 설정하면 해당 폼의 고유 코드(form_code)가 발급됩니다. 작성 권한을 "익명"으로 두면 회원가입 없이 누구나 제출할 수 있는 공개 문의폼으로, "회원 전용"으로 두면 로그인한 사용자만 제출할 수 있는 폼으로 바로 전환됩니다. 텍스트 입력 외의 선택형(select)·체크박스·라디오 버튼 같은 항목은 다음 단계인 HTML 연결에서 구성합니다.
2. 프론트엔드에는 공식 문서의 HTML 폼을 연결합니다
발급받은 form_code를 HTML 폼에 연결합니다. 문서가 제공하는 예시처럼 id="frm_web_form" 폼 안에 form_code와 제출 후 이동할 return_url을 hidden 값으로 넣습니다. 이름·이메일 같은 응답자 정보는 answerer_name/answerer_email 필드에 채우고, 문의 항목은 이와 별도로 answer[번호][label]/answer[번호][value] 형식으로 채웁니다. 선택형(select)·체크박스·라디오 버튼 같은 입력 항목도 공식 문서의 HTML 예시처럼 프론트엔드에서 구성하며, 체크박스 값은 answer[번호][value][]로 전송합니다. 이름 입력칸에 data-validation="not-empty", 이메일 입력칸에 data-validation="email"을 지정하면 빈 값이나 잘못된 이메일 형식을 제출 전에 걸러낼 수 있습니다. 다만 이 검증은 브라우저 단에서 이뤄지는 프론트엔드 검증으로, 서버 측 검증을 대체하지는 않습니다.
3. 제출된 문의는 콘솔에서 바로 확인합니다
사용자가 폼을 제출하면 지정한 return_url로 이동하며, 운영자는 같은 웹 폼 콘솔의 "답변 목록"과 "답변 상세" 화면에서 접수된 문의를 확인하는 구조입니다(공식 문서와 콘솔 화면을 기준으로 확인한 내용이며, 제출부터 관리자 조회까지 전체 과정을 직접 재현해 검증하지는 않았습니다[미확인]). 목록 화면에서는 응답자 정보와 제출 일시를, 상세 화면에서는 문의 항목별 답변 내용을 확인할 수 있습니다. 메일 서버나 별도 관리자 페이지를 새로 만들지 않고도 콘솔 화면에서 접수 내용을 확인하는 방식입니다.
콘솔 설정과 폼 태그 연결, 문서 기준 두 단계로 정리합니다
이 글에서 다룬 작업은 콘솔에서 폼을 설정하는 것과, 발급받은 폼 코드를 공식 문서의 HTML 예시에 연결하는 것, 두 단계입니다. 문서에 안내된 범위에서는 별도 서버 코드를 새로 짜거나 데이터베이스 테이블을 설계할 필요가 없습니다. 입력 항목 구성과 코드 전체 예시, 그리고 프론트엔드 검증의 적용 범위는 웹 폼 문서 보기에서 확인하실 수 있습니다.