8가지 아름다운 문의 양식의 예 + 웹사이트에 추가하는 방법

연락처 양식 디자인을 완성하기 위한 5가지 팁

실제 문의 양식의 예를 살펴보기 전에 잠시 우회하여 훌륭한 문의 양식을 만드는 방법에 대해 이야기해 보겠습니다. 이 우회는 다음 섹션에서 각 문의 양식 예제가 잘하는 것에 대해 논의하는 단계를 설정합니다.

사람들이 작성하기를 원하기 때문에 연락처 양식이 있을 가능성이 큽니다. 그렇다면 어떻게 하면 더 많은 사람들이 사용하도록 할 수 있을까요? 다음은 몇 가지 모범 사례입니다.

1. 귀하의 양식이 무엇을 위한 것인지 명확하게 전달하십시오.

바쁜 비즈니스 또는 웹 사이트가 있는 경우 다양한 용도로 여러 문의 양식이 있을 수 있습니다. 예를 들어 다음과 같을 수 있습니다.

• 판매 문의 양식

• 고객 지원 양식

• 온라인 주문 양식

• 콜백 요청 양식

• 등.

이를 처리하는 두 가지 기본 접근 방식이 있으며 아래의 실제 문의 양식 예에서 둘 다 볼 수 있습니다.

1. 별도의 양식. 각 사용 사례에 대해 별도의 양식을 만들고 각 양식이 수행하는 작업을 명확하게 하는 텍스트를 추가하십시오.

2. 드롭다운 필드입니다. 다양한 사용 사례를 나열하고 연락처 양식을 올바른 위치로 자동 라우팅하는 드롭다운 필드를 양식 상단에 추가합니다.

어느 쪽이든 양식 레이블과 주변 텍스트를 사용하여 방문자에게 각 문의 양식의 목적을 절대적으로 명확하게 하십시오.

2. 더 많은 전환을 위해 양식 길이를 제한합니다(그러나 품질을 잊지 마십시오).

모든 것이 같다면, 데이터는 더 긴 연락 양식이 더 적은 제출을 의미한다는 것을 시사하는 것 같습니다.

예를 들어 HubSpot은 40,000개가 넘는 랜딩 페이지를 분석하고 전환율과 양식 필드 수 사이의 명확한 상관 관계를 확인했습니다.

최대 전환율은 약 3개 필드입니다. 전환율은 평평해지기 전에 8개의 양식 필드까지 꾸준히 하락합니다.

원천

더 일화적인 메모에서 Marketo는 HubSpot과 유사한 결과를 가진 세 가지 형식을 테스트했습니다.

• 5개 필드 - 13.4% 전환율

• 7개 필드 - 12.0% 전환율

• 9개 필드 - 10.0% 전환율

물론 단순히 더 많은 문의 양식 제출을 얻는 것이 실제 목표가 아닐 수 있으므로 양식의 필드 수를 최소한으로 줄이는 것만큼 간단하지 않습니다.

예를 들어 필드를 줄여 더 많은 제출물을 얻을 수 있지만 진입 장벽이 너무 낮아 제출물의 품질이 좋지 않을 수 있습니다.

전반적으로 좋은 경험 법칙은 불필요한 필드를 모두 제거하는 것이지만, 특히 해당 정보가 리드를 검증하는 데 도움이 되는 경우 양식을 줄이기 위해 중요한 정보를 수집하는 필드를 제거하지 마십시오.

3. 스마트 현미경을 사용하여 필드 설명

연락처 양식에 표준 "이름, 이메일, 메시지" 필드 이상이 있는 경우 방문자를 혼동시킬 위험이 있습니다.

예를 들어 "예산" 필드가 있는 경우 해당 예산이 무엇을 위한 것인지 명확하지 않을 수 있습니다. 전체 프로젝트를 위한 것입니까? 특정 부분에만 해당되나요?

이러한 혼란을 피하기 위해 연락처 양식에 "마이크로카피"를 추가할 수 있습니다.

Microcopy는 기본적으로 양식 필드를 더 명확하게 만들기 위해 함께 제공되는 작은 설명 텍스트입니다. 예를 들어 아래의 지불 금액 필드를 살펴보십시오(이 예도 나중에 볼 수 있습니다).

4. 다양한 형식으로 실험

대부분의 사람들은 연락처 양식을 생각할 때 대부분의 웹 사이트에서 볼 수 있는 것과 동일한 기본 내장 양식을 떠올립니다. 그러나 사람들이 쉽게 연락할 수 있도록 하려면 팝업이나 알림 표시줄과 같은 다양한 표시 방법을 실험하는 것이 좋습니다.

예를 들어 사이트 측면에 떠 있는 연락처 버튼이 있으면 지원 문의 양식에 유용할 수 있습니다. 사용자가 귀하의 연락처 페이지를 검색할 필요 없이 문제가 발생하는 즉시 귀하에게 연락하는 것이 매우 쉽습니다.

5. 사람들에게 다음 단계를 알리고 기대치를 설정합니다.

사람들이 제출을 누르면 연락처 양식 디자인이 완료되지 않습니다!

더 나은 사용자 경험을 제공하기 위해 사람들에게 다음에 일어날 일과 소요 시간을 정확히 알려야 합니다. 예를 들어…

• 모든 문의에 응답합니까 아니면 일부에만 응답합니까?

• 응답하는 데 얼마나 걸립니까?

• 이메일이나 다른 방법으로 응답하시겠습니까?

명확한 기대치를 설정하면 방문자는 무슨 일이 일어나고 있는지, 양식이 제대로 작동하는지 궁금해하지 않을 것입니다.

실제 웹사이트의 8가지 훌륭한 연락처 양식 예

이제 모범 사례를 알았으므로 실제 문의 양식 디자인을 살펴보고 영감을 얻고 이러한 모범 사례를 실제로 보여 드리겠습니다.

1. 스트라이프

Stripe의 영업 연락처 양식은 때때로 약간의 추가 정보를 수집하면 연락처 양식이 더 많은 자격을 갖춘 리드를 생성할 수 있음을 보여주는 좋은 예입니다(기본 전환율을 약간 낮출 수 있음에도 불구하고).

표준 정보 필드 외에도 Stripe은 지불 볼륨 필드를 추가하여 각 리드의 잠재적 품질을 더 잘 이해할 수 있습니다.

그 외에도 다음과 같은 멋진 디자인 옵션이 있습니다.

• 사회적 증거 — 측면에 있는 로고는 Stripe를 사용하는 모든 성공적인 비즈니스를 표시하여 사회적 증거를 추가합니다.

• Microcopy — "Payments volume"이라는 용어는 약간 혼란스러울 수 있으므로 Stripe은 필드를 채우는 방법을 설명하는 몇 가지 유용한 현미경을 추가합니다.

• 목적 — Stripe은 이 양식이 판매 문의용임을 분명히 합니다. 이렇게 하면 사람들이 지원 또는 기타 비판매 용도로 사용하려고 하지 않습니다.

2. 겟사이트 컨트롤

여기 Getsitecontrol에서 문의 양식 디자인을 약간 다르게 처리합니다.

방문자가 탐색해야 하는 전용 "문의하기" 페이지를 만드는 대신 바로 팝업을 연 다음 페이지를 새로고침할 필요가 없는 문의하기 링크를 포함하기만 하면 됩니다.

이것은 사람들이 할 수 있기 때문에 정말 편리합니다.

• 사이트의 모든 페이지에서 문의 양식에 액세스하고,

• 다른 작업을 중단하지 않고 메시지를 보냅니다(이 블로그 게시물 읽기 등).

Getsitecontrol 문의 양식은 간단하고 작성하기 쉽습니다. 또한 Getsitecontrol 블로그를 확인하기 위해 CTA와 함께 양식을 제출한 후 다음 단계를 명확하게 전달합니다.

3. 킨스타

Kinsta에는 페이지를 다시 로드할 필요 없이 사용자를 적절한 연락처 양식으로 자동 안내하는 단일 "문의하기" 페이지가 있습니다.

Kinsta는 가장 인기 있는 5가지 연락 요청을 나열합니다.

1. 가격 또는 계획

2. 기능 또는 기술 정보

3. 마이그레이션 또는 관련 질문 요청

4. 게스트 게시물, 후원 게시물 또는 백링크 요청

5. 다른 모든 것

사용자가 목표를 선택하면 Kinsta는 개인화된 연락처 양식이나 메시지를 표시합니다.

이를 통해 Kinsta는 관련 없는 필드로 방문자에게 부담을 주지 않고 필요한 정보를 정확하게 수집할 수 있습니다.

예를 들어, 가격 책정 또는 계획 문의 양식에서 Kinsta는 해당 사용자가 호스팅하려는 웹 사이트 및 방문자 수를 이해하기 위해 추가 필드를 추가하지만 해당 필드는 "기타 항목" 양식에는 표시되지 않습니다.

Kinsta는 또한 "영업일 기준 1일 이내에 연락을 드리겠습니다"라는 명확한 기대치를 설정합니다.

4. 선택 심사

Choice Screening에는 긴 문의 양식이 있습니다. 언뜻 보기에는 양식의 전환율이 낮아질 것이라고 생각할 수 있습니다. 그리고 그것은 일종의 사실입니다. Choice Screening은 의심할 여지 없이 더 짧은 양식을 사용하는 것보다 더 적은 수의 양식 제출을 받습니다.

그러나 때때로 이것이 괜찮은 이유와 이것이 훌륭한 문의 양식의 예인 이유에 대해 이야기해 보겠습니다.

Choice Screening은 매우 전문화된 B2B 공간에서 운영됩니다. 그들은 단순히 연락처 양식 제출이 아니라 오랜 고객으로 전환할 자격을 갖춘 리드를 얻으려고 노력하고 있습니다.

자세한 서비스 목록과 많은 체크박스가 있는 이 양식은 아직 무엇을 원하는지 확신이 서지 않는 사람들을 제거하고 고객으로 전환할 가능성이 높은 자격을 갖춘 리드만 통과시킵니다.

Choice Screening이 이 문의 양식으로 잠재 고객을 심사 하고 있다고 말할 수 있습니다!

5. Joel Klettke / 비즈니스 캐주얼 카피라이팅

Joel은 전문 카피라이터이므로 그의 연락처 양식 디자인과 카피가 적절할 것입니다.

Joel의 양식 자체는 표준 필드와 개인의 예산에 대한 몇 가지 추가 자격 필드가 있는 단순합니다. 그러나 이것이 좋은 연락처 양식의 예가 되는 것은 양식 옆 에서 진행되는 모든 것입니다.

그 텍스트에서 Joel은 기대치를 설정하고 리드를 검증하는 일을 훌륭하게 수행합니다. 그는 또한 최소 요금에 대해 논의하여 의도적으로 저예산 고객을 몰아냅니다. Joel은 더 높은 초기 전환율을 얻기 위해 이러한 언급을 제거할 수 있지만, 그렇게 하면 실제로 적격 리드의 비율이 낮아지고 결국 Joel의 시간을 낭비하게 됩니다.

6. 닐 파텔

Neil Patel은 세계에서 가장 인기 있는 디지털 마케팅 웹사이트 중 하나를 운영하므로 그가 많은 문의 양식 제출을 받는다는 것을 확신할 수 있습니다.

이러한 제출물을 올바른 위치로 라우팅하는 데 도움이 되도록 Neil은 사람들이 미리 설정된 옵션 범위에서 선택할 수 있는 "채팅하고 싶습니다" 드롭다운을 포함합니다. 그는 또한 사람들에게 메시지를 짧고 요점으로 유지하도록 간청하기 위해 자리 표시자 상자에 약간의 마이크로카피를 사용합니다.

이것은 간단합니다. 그러나 때로는 단순한 것이 연락처 양식 디자인에 필요한 전부입니다.

7. 포커스 랩

좋습니다. 이것은 재미있고 기발하며 모든 비즈니스에 적합하지 않을 것입니다. 그러나 (Focus Lab이 있는) 창의적인 공간에 있다면 이와 같은 기발한 연락처 양식 디자인을 만드는 것은 상자 밖에서 생각할 수 있다는 것을 보여줄 수 있습니다.

Focus Lab은 전통적인 형식을 만드는 대신 방문자가 기존 단락에 정보를 입력하는 Mad Libs 스타일 접근 방식을 더 많이 사용합니다. Focus Lab은 이 접근 방식을 사용하여 보다 전통적인 연락처 양식 디자인이 가질 수 있는 인상적인 모양 없이 더 많은 정보(예: 목표 및 예산)를 수집할 수도 있습니다.

8. 캐미시브

CAMICB는 Community Association Managers International Certification Board의 약자로 미국의 커뮤니티 협회에 대한 인증을 제공합니다.

CAMICB 문의 양식에서 주목할만한 점은 하이브리드 팝업/"문의하기" 페이지 접근 방식을 사용한다는 것입니다. 사용자가 Contact Us 페이지를 방문하면 CAMICB 웹사이트는 방문자가 메시지를 제출할 수 있는 간단한 팝업 문의 양식을 즉시 엽니다.

CAMICB는 단 3개의 필드로 형식을 짧고 요점으로 유지합니다. 그런 다음 팝업 접근 방식은 초점이 전적으로 양식에 있는 멋진 방해 없는 인터페이스를 만듭니다.

이렇게 하면 가능한 한 원활하게 문의를 제출할 수 있습니다.

또한 작업을 더욱 쉽게 하기 위해 CAMICB는 사용자가 바닥글에 액세스할 수 있는 슬라이드업 연락처 양식도 표시합니다.

사용자 지정 가능한 연락처 양식 디자인을 만드는 방법

이 8가지 문의 양식 예제를 살펴보고 나면 이러한 원칙을 자신의 문의 양식 디자인에 적용하는 방법에 대해 많은 아이디어를 얻었을 것입니다.

시작하고 싶다면 [Getsitecontrol](/feedback-popup/을 사용하여 즉시 실행할 수 있습니다.

대부분의 문의 양식 솔루션과 달리 Getsitecontrol을 사용하면 4가지 유연한 위치와 수십 가지 서식 파일 중에서 선택할 수 있습니다. CAMICB 및 Getsitecontrol 웹 사이트에서 본 것과 같은 전통적인 팝업을 만들 수 있습니다. 또는 슬라이드인, 알림 표시줄, 버튼 등을 사용하여 상황을 바꿀 수 있습니다.

적격한 제출을 위해 필요한 만큼(또는 적은 수) 필드를 추가할 수 있으며 방문자가 양식을 작성하는 데 도움이 되도록 마이크로카피를 삽입할 수도 있습니다.

지금 Getsitecontrol에 가입하면 몇 분 안에 작업 문의 양식을 만들 수 있습니다.