문의하려던 손님이 입력칸 열다섯 개 앞에서 한숨 쉬며 창을 닫는다 — 작은 회사 웹사이트 문의 폼(입력 양식) 설계의 5가지 원칙

전화는 부담스럽고 카카오톡 채널은 아직 모를 때, 손님이 마지막으로 누르는 곳이 문의 폼이다. 그런데 막상 열어 보면 이름·연락처·이메일·회사명·예산·일정·유입경로까지 열다섯 칸이 줄지어 있다. 마음먹고 들어온 손님조차 한숨을 쉬며 창을 닫는다. 폼은 회사가 손님에게 보내는 마지막 질문지다. 질문이 많을수록 답은 줄어든다. 작은 회사 웹사이트의 문의 폼을 '연락이 실제로 오는' 폼으로 만드는 5가지 원칙을 정리한다.

1. 묻지 않아도 되는 칸은 과감히 지운다

폼의 전환율은 칸 수에 반비례한다. 첫 문의 단계에서 회사가 정말로 필요한 정보는 보통 이름·연락처(또는 이메일)·문의 내용 세 가지뿐이다. 예산, 희망 일정, 직급, 유입경로 같은 항목은 회신을 주고받으며 자연스럽게 알게 된다. "있으면 좋은 정보"와 "지금 꼭 필요한 정보"를 구분하고, 후자가 아니면 지운다.

  • 필수 항목은 3~4개로 제한하고, 나머지는 선택 항목으로 명시한다.
  • '회사명'처럼 개인 손님에게 부담이 되는 칸은 업종에 따라 빼는 것도 방법이다.

2. 라벨은 칸 위에, 안내는 미리 보여준다

칸 안에 회색 글씨(placeholder)로만 항목명을 적어 두면, 손님이 입력을 시작하는 순간 그 안내가 사라진다. 무엇을 적던 칸이었는지 다시 떠올려야 하고, 검토할 때도 헷갈린다. 라벨은 칸 바깥 위쪽에 항상 보이게 두고, placeholder는 예시("예: 010-1234-5678")로만 쓴다. 형식이 까다로운 칸은 입력 전에 미리 안내 문구를 보여 주는 편이 오류를 줄인다.

3. 모바일에서 손가락과 키보드를 배려한다

작은 회사 웹사이트 문의의 절반 이상은 휴대폰에서 들어온다. 전화번호 칸인데 일반 키보드가 뜨면 손님은 숫자 자판을 찾느라 한 번 더 멈춘다. 입력 칸의 종류를 내용에 맞게 지정하면 휴대폰이 알맞은 키보드를 자동으로 띄운다.

  • 전화번호는 숫자 키패드, 이메일은 @가 있는 키보드가 뜨도록 입력 형식을 지정한다.
  • 입력 칸과 보내기 버튼은 손가락으로 누르기 충분한 크기(높이 44px 이상)로 키운다.

4. 오류는 그 자리에서, 사람의 말로 알린다

모두 채워 '보내기'를 눌렀더니 맨 위로 튕겨 올라가 "오류가 발생했습니다"만 뜨면, 손님은 어디가 틀렸는지 모른 채 떠난다. 검증은 문제가 된 칸 바로 아래에서, 무엇을 고쳐야 하는지 구체적으로 알려야 한다. "이메일에 @를 넣어 주세요"처럼 사람의 말로 쓰고, 빨간 글씨만이 아니라 문장으로 안내한다. 옳게 채운 칸의 내용은 절대 지우지 않는다.

5. '보내기'가 끝이 아니다

버튼을 누른 뒤 화면이 그대로면 손님은 접수가 됐는지 알 수 없어 한 번 더 누르거나 불안해한다. 전송 직후에는 "문의가 접수되었습니다. 영업일 기준 하루 안에 연락드리겠습니다"처럼 다음에 일어날 일을 분명히 보여 줘야 한다. 손님에게 자동 회신 메일이나 알림을 보내면 신뢰가 한 단계 올라가고, 회사도 문의를 놓치지 않는다.

좋은 폼은 손님의 시간을 아끼는 배려다

문의 폼은 디자인의 끝자락에 있지만, 매출로 이어지는 첫 접점이다. 칸을 줄이고, 라벨을 명확히 하고, 모바일을 배려하고, 오류와 그 이후까지 설계하면 같은 방문자에서도 더 많은 연락이 온다. CYAN은 작은 회사 웹사이트를 만들 때 문의 폼을 '있으면 되는 부품'이 아니라 전환을 책임지는 핵심으로 보고, 업종과 손님의 입력 습관에 맞춰 설계한다. 지금 우리 사이트의 문의 폼을 손님의 눈으로 한 번 채워 보길 권한다. 그 막힘이 바로 개선의 출발점이다.