Elementor로 전환율이 높은 양식을 구축하는 방법

어떤 종류의 의사소통도 없이 성공적인 비즈니스를 운영하는 것을 상상할 수 있습니까? 

안 돼요!

고객과의 적절한 커뮤니케이션을 유지하는 것은 항상 비즈니스 성장을 위한 #1 우선순위입니다. 당신이 무엇을 하든, 의사소통의 격차는 확실히 당신의 사업을 무너뜨릴 것입니다.

그리고 웹사이트에 웹 양식을 포함해야만 이 문제를 해결할 수 있습니다. 아시다시피 웹 양식은 소유자와 고객 간의 의사소통 다리를 만듭니다. 최근 클러치 연구 86%의 사람들이 적어도 일주일에 한 번은 다른 웹 양식을 사용한다는 것을 보여줍니다.

엄청나죠?

따라서 이제 귀하의 웹사이트에 대한 전환율이 높은 웹 양식을 구축할 때입니다. 명확하고 간결한 웹 양식은 비즈니스를 성장시키고 리드를 생성하며 고객과의 대화 경험을 개선하는 데 도움이 됩니다.

웹 양식을 디자인하는 모범 사례는 무엇입니까?

온라인 세계에는 수천 가지의 양식이 있습니다. 그러나 이들 모두는 청중이 양식을 작성하도록 설득하기에 충분하지 않습니다. 

그렇다면 웹 양식이 모든 사람에게 좋은 이유는 무엇일까요? 전환율이 높은 양식을 디자인하려면 다섯 가지 핵심 구성 요소가 있습니다. 그것들을 살펴봅시다 –

1. 주요 구성 요소 포함

모든 성공적인 웹 양식에는 몇 가지 주요 구성 요소가 포함되어 있어야 합니다. 웹 양식에 해당 필드를 포함해야 합니다. 주요 구성요소를 살펴보겠습니다.

• 양식 구조

양식 구조는 사용자 경험(UX)을 개선하고 더 많은 리드를 생성하는 데 중요한 역할을 합니다. 입력 필드를 체계적이고 상호 연관되게 유지해야 합니다. 필드 간의 논리적 연결은 사용자가 양식을 작성하도록 권장합니다.

• 입력 필드

전문 웹 양식에는 여러 입력 필드가 포함되어야 합니다. 기본 필드는 텍스트 필드, 비밀번호 필드, 버튼, 체크박스, 슬라이더 등입니다.

• 적절한 필드 라벨

적절한 필드는 사용자가 상자에 입력해야 할 내용을 이해하기 위해 입력하는 데 도움이 됩니다. 

• 피드백 메시지

피드백 메시지는 사용자가 상자에 올바른 정보를 입력했는지 아니면 잘못된 정보를 입력했는지 이해하는 데 도움이 됩니다. 사용자가 이메일 상자에 자신의 전화번호를 입력하면 문의 양식에 사용자에게 이 실수를 알리는 메시지가 표시되어야 한다고 가정해 보겠습니다.

• 액션 버튼

작업 버튼은 양식 데이터를 제출하는 데 사용됩니다. 일반적으로 이 버튼은 웹 양식 하단에 위치합니다. 그러나 텍스트 유효성 검사, 숫자 유효성 검사 등과 같은 다른 작업 버튼은 거의 없습니다.

• 검증

실수하는 것은 인간이다. 사용자가 해당 양식을 작성하는 동안 실수를 하는 것은 매우 정상적인 현상입니다. 이 유효성 검사는 사용자가 이러한 문제를 해결하는 데 도움이 됩니다.

2. 꼭 필요한 것만 물어보세요

적을수록 좋습니다!

웹 양식을 디자인하는 동안 양식에 수많은 입력 필드를 너무 많이 입력하지 마십시오. 사용자는 항상 더 짧은 형식을 선호합니다. 양식을 작성하는 데 시간이 덜 걸리기 때문입니다.

ㅏ 허브 보고서에스냄비 입력 필드를 3개로 줄임으로써 최대 25%까지 전환율을 높일 수 있음을 보여줍니다.

입력 필드 수에 따른 양식 전환율

웹 양식에 5~7개의 입력 필드를 추가할 수 있습니다. 사용자가 양식을 작성하는 데 2분 이상 걸리지 않는다는 점을 명심하세요. Clutch의 또 다른 연구에 따르면 44%의 사용자는 양식을 작성하는 데 2분 이상을 소비하고 싶어하지 않습니다.

따라서 양식에 추가 필드를 추가하지 마십시오. 최대한 간단하고 간결하게 유지하세요. 정말로 더 많은 필드를 추가하고 싶다면 다단계 양식을 사용해 보세요.

3. 양식을 사용자 친화적으로 유지하세요

사용자에게 보다 원활한 양식 환경을 제공하려면 양식을 단순화해야 합니다. 귀하의 주요 목표는 사용자로부터 필요한 정보만 얻는 것입니다. 덜 중요한 입력 필드로 양식을 복잡하게 만들지 마십시오. 

그런데 다음 규칙을 유지하면 웹 양식을 단순화할 수 있습니다.

• 구체적으로 작성하세요 – 자리 표시자를 통해 사용자에게 구체적인 지침을 표시합니다. 예를 들어 자리 표시자로 "이름"만 쓰지 마세요. 그 대신 "이름"이나 "성"과 같은 특정 자리 표시자를 작성하세요.

• 예를 들어보세요 – 특정 자리 표시자를 작성하는 것 외에 예제를 제공해야 하는 텍스트 상자가 거의 없습니다. 특정 날짜를 수집하는 입력 필드를 입력했다고 가정해 보겠습니다.

전 세계에는 mm/dd/yy, dd/mm/yy, yy/mm/dd 등과 같은 다양한 날짜 형식이 있습니다. 이 경우 자리 표시자에 선호하는 형식을 포함해야 합니다.

• 별표 사용 – 입력 항목을 필수 항목으로 설정하려면 입력 항목 상단에 별표를 표시하세요. 간단한 별표(*) 표시는 사용자에게 이 필드를 작성해야 한다는 메시지를 보냅니다. 

• 대문자 사용 – 문장 케이스를 사용하여 가독성을 높여야 합니다. 웹 양식에서 CTA 버튼을 사용할 때 확인해야 할 가장 중요한 사실입니다.

4. 효과적인 CTA 버튼을 포함하세요

클릭 유도 버튼은 사용자를 다음 단계로 안내하는 데 사용됩니다. 전환율을 변화시키는 데 중요한 역할을합니다. 사용자의 의도를 표현하고 다음 단계로 안내하는 효과적인 CTA 버튼을 포함해야 합니다.

CTA 버튼을 디자인할 때는 버튼 디자인과 텍스트를 모두 확인해야 합니다. 클릭 유도문안 버튼을 디자인할 때 몇 가지 사항을 염두에 두어야 합니다.

• 웹페이지에서 눈에 띄는 위치에 버튼을 배치하세요.
• 배경 디자인에 잘 어울리는 유망한 색상을 추가하세요.
• 버튼에 3D 스타일을 추가해보세요
• 버튼 텍스트 옆에 단순한 아이콘을 추가하세요.

이는 CTA 버튼을 디자인하는 일반적인 관행입니다. 그러나 버튼 텍스트도 최적화되어야 합니다.

Unbounce에 대한 연구에 따르면 기존 CTA 텍스트를 사용하면 전환율이 약 3% 정도 감소하는 것으로 나타났습니다. 전통적인 버튼 텍스트로는 '제출', '등록', '다운로드', '이동' 등이 있습니다. 

전통적인 텍스트를 피하고 여기를 클릭하세요, 자세히 알아보기, 시작하자, 연결하자 등과 같은 고유한 CTA 버튼 텍스트를 포함시키세요. 그런데 버튼 텍스트가 2~3단어를 초과하지 않는지 확인하세요.

5. 시각적으로 매력적인 양식 만들기

대부분의 웹사이트 소유자는 웹 양식이 데이터 수집용으로만 설계되었다고 생각합니다. 디자인에 집중할 필요가 없습니다. 그러나 현실은 전혀 다릅니다. 

연구에 따르면 사용자는 0.05초 페이지에 머물기를 원하는지 여부를 결정합니다. 그렇기 때문에 눈 깜짝할 사이에 사용자를 설득할 수 있는 시각적으로 놀라운 형태를 디자인해야 합니다. 

시각적으로 멋진 형태를 디자인하는 동안 다음 사실을 고려해야 합니다. 

• 입력 필드 수 – 불필요한 입력 필드를 줄이고 양식을 최대한 단순하게 유지하십시오. 양식에 5개 이하의 입력 필드가 포함되어 있으면 더 좋습니다.
• 설계 – 색상 대비, 입력 필드, 텍스트 서식을 눈에 띄게 만드세요. 
• 주의를 산만하게 하는 요소 제거 – 웹 양식의 주요 목표는 리드를 생성하거나 대화를 시작하는 것입니다. 따라서 원치 않는 방해 요소를 제거하여 양식을 최소한의 모양으로 유지하는 것이 좋습니다. 

이것이 바로 고객과 완벽한 유대 관계를 구축하기 위한 웹 양식을 디자인하는 방법입니다. 이제 Elementor를 사용하여 전환율이 높은 양식을 구축하는 방법에 대해 알아볼 시간입니다. 

의 시작하자.

Elementor로 전환율이 높은 양식을 구축하는 방법

이제 구식 웹 양식을 버리고 우아한 웹 양식으로 교체할 때입니다. 그리고 사실 Elementor를 사용하여 전환율이 높은 양식을 구축하는 것은 생각만큼 복잡하지 않습니다. 몇 가지 도구를 사용하기만 하면 됩니다.

전제조건

• • WordPress 기반 웹사이트
• • 엘레멘터
• • MetForm

전환율이 높은 양식을 작성하는 단계별 절차를 진행해 보겠습니다.

#1단계: 환경 구성

귀하가 이 페이지를 방문했을 때 귀하는 이미 WordPress 웹사이트를 소유하고 있다고 가정합니다. 따라서 이 점에 대해서는 추가할 내용이 없습니다. 다른 플러그인을 설치해 보겠습니다. MetForm 설치부터 시작하겠습니다.

WordPress 관리자 패널 대시보드에 로그인하고 다음으로 진행하세요. 플러그인 > 새로 추가. 그런 다음 MetForm을 검색하여 설치하세요. 

서버에 따라 설치에 약간의 시간이 걸릴 수 있습니다. 설치 후에는 플러그인을 활성화하는 것을 잊지 마세요.

MetForm 설치

알아 들었 니? 브라보!

이제 이와 정확히 유사한 프로세스를 따라 Elementor 플러그인을 설치하십시오.

#2단계: 새 페이지 만들기

다시 관리자 대시보드로 이동하세요. 이제 페이지 > 새로 추가 연락처 양식에 대한 새 페이지를 만듭니다.

이제 새로 생성된 페이지에 이름을 추가하세요. 예를 들어 문의 양식을 작성하겠습니다. 그래서 이름을 "연락처"로 지정했습니다. 또한 웹페이지의 목적을 가장 잘 나타내는 적절한 이름을 웹페이지에 추가해야 합니다.

그러나 기본 WordPress 편집기(일명)는 사용하지 않습니다. 구텐베르크 양식을 작성합니다. 우리는 Elementor를 사용하여 이 멋진 테마를 만들 것입니다. 그렇기 때문에 Elementor로 페이지를 열어야 합니다. Elementor로 페이지를 편집하려면 "Elementor로 편집” 버튼을 누르면 완료됩니다. 그런데 Elementor를 로드하는 데 몇 초가 걸릴 수 있습니다. 인내심을 가지세요!

새 페이지 추가

그런데 기존 페이지에도 양식을 추가할 수도 있습니다. 예를 들어, 새 페이지에 양식을 추가하고 있습니다. 이 문서의 뒷부분에서는 기존 콘텐츠에 양식을 추가하는 과정을 보여 드리겠습니다.

#3단계: MetForm 삽입

왼쪽에 있는 Elementor 패널에서 MetForm 위젯을 찾으세요. 그런 다음 이 Elementor 양식 빌더 위젯을 웹페이지에 끌어서 놓습니다. 

MetForm 삽입

#4단계: 양식 편집

이제 “를 클릭하세요.양식 편집추가 편집을 위해 ” 버튼을 누르세요. MetForm Elementor 애드온을 처음 사용하는 경우 "새로운"버튼. 기성 양식 라이브러리가 열립니다. 우리 라이브러리에는 30개 이상의 사전 정의된 양식이 있습니다. 

이제 원하는 양식을 클릭하고 이 페이지 하단에 있는 “양식 편집” 버튼을 클릭하세요. 그런 다음 선택한 양식이 설정 페이지에서 열립니다.

양식 편집

그런데 원하는 경우 처음부터 새 양식을 작성할 수도 있습니다. 빈 문서를 선택하여 처음부터 자신만의 양식을 디자인하세요.

#5단계: 입력 필드 추가 또는 제거

선택한 양식은 양식 설정 페이지에 표시됩니다. 양식에서 해당 입력 필드를 추가하거나 제거할 수 있습니다. 그러나 MetForm을 사용하면 사용자가 양식에 입력 필드를 무제한으로 추가할 수 있습니다. MetForm Elementor 애드온에는 양식에 추가할 수 있는 40개 이상의 다양한 입력 필드가 포함되어 있습니다.

입력 필드 추가 또는 제거

MetForm은 다양한 무료 및 프리미엄 텍스트 입력 필드를 제공합니다. 이러한 입력 필드 중 몇 가지를 간단히 살펴보겠습니다.

다음은 무료 입력 필드 –

이러한 무료 입력 필드 외에도 몇 가지 프리미엄 입력 필드도 제공하고 있습니다. 사람들은 -

다음을 사용하여 해당 입력 필드를 모두 포함할 수 있습니다. 메트폼 프로.

#6 단계: 입력 필드 사용자 정의

이제 필수 입력 필드를 포함하는 작업이 완료되었을 것입니다. 이제 해당 필드를 사용자 정의할 차례입니다. 

입력 필드를 사용자 정의하는 동안 해당 입력 필드의 거의 모든 단일 요소를 사용자 정의할 수 있습니다. 예를 들어 -

• 라벨 텍스트
• 라벨 위치
• 자리 표시자 텍스트
• 도움말 텍스트
• 필수 필드로 설정
• 경고 메시지 등

다음은 이러한 작업에 대한 개요입니다.

입력 필드 사용자 정의

#7단계: 스타일 및 타이포그래피 추가

양식을 완성했다면 이제 입력 필드의 스타일과 타이포그래피를 조정할 차례입니다. 스타일 탭에서 다음 사항을 조정할 수 있습니다.

입력 필드에 스타일을 추가하는 과정을 살펴보세요. 이 예에서는 '이름' 필드를 사용자 정의했습니다. 양식에 추가한 다른 입력 필드도 마찬가지로 사용자 정의할 수 있습니다.

스타일과 타이포그래피

사용자 정의가 완료되면 "업데이트 및 닫기"버튼. 버튼을 누르면 사용자 정의된 양식이 웹페이지에 자동으로 배치됩니다.

양식 마무리

빙고!

이 Elementor 양식 애드온을 사용하여 완벽해 보이는 양식을 추가하는 프로세스를 완료했습니다.

MetForm을 사용하여 처음부터 웹 양식을 구축하는 방법은 무엇입니까?

우리는 이미 MetForm 기성 양식을 사용하여 양식을 작성하는 방법을 배웠습니다. 그러나 처음부터 양식을 작성하려는 경우 MetForm을 사용하여 작성할 수도 있습니다.

프로세스를 쉽게 하기 위해 비디오 튜토리얼을 만들었습니다. 처음부터 양식을 작성하는 전체 과정을 보려면 아래 비디오를 확인하십시오.

이 비디오를 따라 성공적으로 양식을 구축할 수 있기를 바랍니다. 프로세스에 대해 질문이나 혼란이 있는 경우 알려주시기 바랍니다. 

MetForm Elementor Addon으로 디자인한 양식을 재사용하는 방법은 무엇입니까?

MetForm을 사용하는 또 다른 주요 이점은 필요할 때마다 양식을 재사용할 수 있다는 것입니다. 양식을 디자인할 때마다. 단축번호가 자동으로 생성됩니다. 해당 단축 코드를 수집하여 원하는 웹페이지에 게시하기만 하면 됩니다. 해당 위치에 자동으로 양식이 게시됩니다.

이전 양식을 찾으려면 다음으로 이동하세요. MetForm > 양식 그러면 해당 특정 도메인에서 디자인한 모든 양식을 찾을 수 있습니다.

MetForm 양식 목록

단축 코드를 복사하여 도메인의 다른 페이지에 붙여넣기만 하면 됩니다. 이 과정은 버터처럼 부드럽습니다. 하지만, 여전히 진행 과정에 어려움을 겪고 계시다면 아래 절차를 확인해 보시기 바랍니다.

양식 재사용

보다? MetForm으로 구축된 양식을 재사용하려면 거의 아무것도 하지 않아도 됩니다. 단축 코드를 복사하여 양식을 원하는 위치에 붙여넣기만 하면 됩니다.

그런데 동일한 브라우저 내의 다른 웹사이트에 이 양식을 복사하여 붙여넣을 수도 있습니다. 하지만 이 작업을 완료하려면 ElementsKit Elementor 애드온을 사용해야 합니다. 이것 도메인 간 복사 붙여넣기 모듈 여러 웹사이트를 소유한 사람들에게 진정한 생명의 구세주입니다.

최종 단어

전환율이 높은 양식을 작성하는 것은 정말 지루한 작업이며 많은 시간을 낭비합니다. MetForm Elementor 애드온 덕분에 양식 작성이 훨씬 쉽고 간단해졌습니다. 

이 튜토리얼이 유용하다고 생각되면 사람들과 공유하세요. MetForm을 사용하는 동안 문제가 발생하는 경우 당사에 연락해 주세요. 최대한 빨리 연락드리겠습니다.