폼 빌더이란?
폼 빌더를 사용하면 시각적 편집기로 맞춤 양식을 만들 수 있습니다. 텍스트 필드, 드롭다운, 체크박스 등을 추가한 후 HTML 코드 또는 JSON 스키마로 내보내세요.
열네 가지 필드 유형 중에서 고르세요: 텍스트, 이메일, 전화, URL, 숫자, 날짜, 파일 업로드, 평가 척도, 드롭다운, 체크박스, 라디오, 텍스트 영역, 안내 문구용 설명 블록, 그리고 긴 양식을 단계로 나누는 페이지 나누기입니다. 각 입력 필드에는 라벨, 선택형 도움말, 플레이스홀더, 필수 표시, 드롭다운과 라디오용 옵션 목록이 있습니다. 바로 쓰는 템플릿(문의, 피드백, 설문, 등록, 주문, 예약)으로 시작하고, 위/아래 화살표로 필드 순서를 바꾸며, 페이지 간 진행 표시줄과 함께 양식을 실시간으로 미리 보고, 어떤 사이트에도 붙여 넣을 수 있는 깔끔한 스타일의 HTML 페이지나 서버 검증용 JSON 스키마로 내보내세요.
사용 방법
- 1단계 — "필드 추가"를 클릭해 새 필드를 넣고 유형(텍스트, 이메일, 전화, URL, 숫자, 날짜, 파일, 평가 척도, 드롭다운, 체크박스, 라디오, 텍스트 영역)을 고르세요. 긴 양식을 단계로 나누려면 페이지 나누기를 추가하고, 바로 쓰는 템플릿을 불러오면 빠르게 시작할 수 있습니다.
- 2단계 — 필드를 클릭하여 라벨, 플레이스홀더, 필수 여부를 설정하세요.
- 3단계 — 양식 실시간 미리보기를 확인한 후 HTML 코드 또는 JSON 스키마로 내보내 프로젝트에 통합하세요.
사용 시기
- 정적 웹사이트에 끼워 넣을 등록·참석 응답 폼을 빠르게 만들 때.
- 개발자에게 스키마를 넘기기 전에 양식을 먼저 시제품으로 만들어 볼 때.
- 학생들에게 input 태그를 일일이 타이핑시키지 않고 HTML 폼의 기초를 가르칠 때.
결과
교사가 수강 신청 양식을 만듭니다: 학생 이름(필수 텍스트), 학년(드롭다운: 9-12), 이메일(이메일 유효성 검사), 의견 텍스트 영역 필드를 구성한 후, HTML 코드를 학교 웹사이트에 삽입합니다.
자주 묻는 질문
- 사용자가 폼을 제출하면 데이터는 어디로 가나요?
- 기본적으로는 아무 데도 가지 않습니다. 내보낸 HTML에는 action URL이 없어 제출이 어디로도 전송되지 않고 데이터가 기기를 벗어나지 않아요. 응답을 받으려면 action을 직접 만든 엔드포인트, Formspree, Google 폼, 또는 서버리스 함수로 연결하세요.
- 기존 폼을 편집기에 다시 불러올 수 있나요?
- 현재로서는 불가합니다. 내보내기는 편집기 → HTML/JSON 한 방향이에요. 나중에 수정하고 싶다면 JSON 스키마를 저장해 두고 손으로 재구성하거나, 편집 세션을 계속 열어 둔 채 작업을 마무리하세요.
- 드롭다운 옵션이 보이지 않는 이유는 무엇인가요?
- 드롭다운과 라디오는 옵션 목록에 최소 한 항목이 필요합니다. 해당 필드를 클릭해 옵션 영역을 열고, 선택지를 쉼표나 줄 바꿈으로 구분해 입력하세요. 목록이 비어 있으면 빈 select가 그대로 만들어집니다.
- 내보낸 HTML에 스타일이 포함되나요?
- 네 — 이제 모든 HTML 내보내기에 작은 스타일시트가 함께 들어가, 파일을 여는 순간부터 깔끔하고 읽기 좋은 폼이 됩니다: 정돈된 간격, 입력란 테두리, 포커스 링, 스타일이 적용된 전송 버튼. CSS는 최소한이며 독립적이라, 그대로 둬도 되고 style 블록을 지운 뒤 Tailwind·Bootstrap 등 원하는 프레임워크 클래스를 넣어도 됩니다.
- HTML과 JSON 내보내기는 어떻게 다른가요?
- HTML은 페이지에 붙이면 바로 화면에 그려집니다. JSON은 필드 유형, 라벨, 검증 규칙을 담은 구조화된 스키마라 React, Vue, react-hook-form, Formik 같은 라이브러리로 렌더링하기 좋아요.