WordPress에 다단계 양식을 추가하는 5가지 쉬운 단계

당신은 알고 계십니까 단일 단계 WordPress 양식을 다중 단계로 변환 WordPress에서 양식을 만들 수 있습니다. 너의 거의 60%로 변환? 실제로 어떤 경우에는 전환율은 300%만큼 높아질 수 있습니다..

예. 왜냐하면 요즘 사람들은 너무 바빠서 집중할 시간이 부족하기 때문입니다. 게다가, 한 단계의 긴 양식을 작성하도록 요청하면 양식이 불완전한 상태로 웹사이트를 떠날 가능성이 높습니다.

그러나 WordPress 사이트에 대한 다단계 양식을 사용하여 이 시나리오를 변경할 수 있습니다. 하지만 문제는 어떻게? 

글쎄, 그래서 내가 너에게 보여주려고 여기 온 거야 WordPress에 다단계 양식을 추가하는 방법에 대한 단계별 가이드입니다.

단 몇 분 만에 WordPress 웹사이트에서 다단계 양식을 쉽게 만드는 방법을 알아보려면 계속 읽어보세요.

다단계 양식이란 무엇입니까?

이름에서 알 수 있듯이 질문/입력 필드를 한 단계에 모두 넣는 것이 아니라 여러 단계로 나누어지는 여러 단계가 있는 양식입니다. 정의를 찾고 있다면 다음과 같습니다. 허브스팟 다단계 형식을 정의합니다.

다단계 형식은 여러 조각으로 나누어진 긴 형식입니다. 긴 형식을 덜 위협적이고 어렵게 만드는 데 사용됩니다.

– 허브스팟

다단계 양식은 기본적으로 입력 필드가 너무 많은 긴 양식을 대체합니다. 비교적 작은 형태를 가지고 있다면 원스텝 형태를 고수할 수 있습니다.

이제 다단계 양식이 무엇인지 알았으니 WordPress 사이트에 다단계 양식 추가를 고려해야 하는 몇 가지 이유를 살펴보겠습니다.

WordPress에서 다단계 양식을 사용하는 이유는 무엇입니까?

음, 간단한 대답은 전환율을 급상승시키는 것입니다. 다단계 양식은 현재 등록 양식, 예약 양식, 음식 주문 양식 등과 같은 용도로 웹사이트에서 매우 인기가 높아지고 있습니다. 웹사이트에서 다단계 양식 사용을 고려해야 하는 몇 가지 이유는 다음과 같습니다.

• 사용자의 관심을 끌 때 다단계 양식이 더 잘 작동합니다. 결과적으로 사람들은 더 많이 참여하고 양식 제출을 더 자주 완료합니다.
• 사용자는 다단계가 더 사용자 친화적이라고 생각하며 긴 한 단계 형식보다 더 나은 사용 편의성을 제공합니다.
• 다단계 양식이 포함된 탐색 표시줄/진행률 표시줄이 있으므로 사용자는 다단계 양식을 완료하는 데 더 큰 힘을 얻습니다.
• 조건부 다단계 양식은 필요한 관련 데이터만 수집하는 데 적합합니다.
• 위에서 언급한 모든 긍정적인 측면의 결과로 다단계 형태는 전환율을 높입니다.

이제 WordPress 사이트에서 다단계 양식을 사용해야 한다는 점을 알았으므로 이제 다중 부분 양식을 작성하는 데 필요한 완벽한 설정을 만들 차례입니다.

WordPress 다단계 양식을 작성해야 하는 설정

WordPress와 함께 WordPress에서 다단계 양식을 쉽게 만들려면 두 개의 플러그인이 더 필요합니다. 해당 WordPress 플러그인은 다음과 같습니다.

1. 엘레멘터 (무료 버전)
2. MetForm (무료 및 프로)

Elementor는 최고의 WordPress 페이지 빌더이며 MetForm은 가장 빠르게 성장하는 WordPress 다단계 양식 플러그인 중 하나입니다. MetForm 설치에 도움이 필요하면 다음 문서를 참조하세요. MetForm을 설치하는 방법.

설치가 완료되면 Metform을 사용하기 전에 Elementor 페이지 빌더로 페이지를 생성해야 합니다. 그러려면 다음으로 가세요. 대시보드 ⇒ 페이지 ⇒ 신규 추가.

이제 적절한 것을 제공하십시오 제목, 선택하다 요소 전체 너비 템플릿으로, 퍼블리스를 클릭하세요시간. 그 후 다음을 클릭하세요. Elementor로 편집하세요.

마지막으로 다단계 양식을 작성하도록 설정되었습니다. 이제 주요 프로세스로 넘어 갑시다.

메모: 이 튜토리얼에서는 페이지에 다단계 양식을 추가하는 방법을 보여 드리겠습니다. 하지만 당신도 할 수 있습니다 MetForm으로 구축된 양식을 모달 팝업에 쉽게 추가하세요.

WordPress에서 다단계 양식을 만드는 방법

이 블로그에서는 간단한 5단계를 통해 처음부터 현대적인 다단계 양식을 만드는 방법을 배웁니다.

1단계: MetForm 끌어서 놓기 

일단 들어가면 Elementor로 편집 방법, 찾다 MetForm 및 끌어서 놓기 양식을 표시할 위치에 

2단계: 새 양식 만들기

양식 섹션을 클릭하여 해당 페이지로 이동하세요. MetForm 편집 옵션. 딸깍 하는 소리 에 양식 편집 단추.

새 창 팝업이 나타나면

• 새로 선택 (새 양식 만들기)
• 양식 제공 이름 양식에 대한
• 빈 템플릿을 선택하고, 
• 그리고 양식 편집

3단계: MetForm 및 Elementor 페이지 빌더를 사용하여 처음부터 다단계 양식 작성

양식 편집을 클릭하면 Elementor 페이지 빌더가 있는 또 다른 새 창에 액세스하여 처음부터 양식을 만들 수 있습니다. 에게 하나의 단계를 구축 다단계 형식으로 구성하려면 다음 네 단계를 따르십시오.

✅ 새로운 섹션 추가

✅ 요구사항에 따라 입력 필드를 드래그 앤 드롭하세요.

✅ 양식의 문구에 따라 이전/다음/제출 버튼을 드래그 앤 드롭하세요.

✅ 섹션에 적절한 이름을 입력하세요.

이 블로그에서는 위에서 언급한 단계를 사용하여 3단계 호텔 예약 다단계 양식의 데모를 만들 예정입니다. 양식의 세 단계에는 개인 정보, 예약 정보 및 추가 정보가 포함됩니다.

1️⃣ 예약 양식 1단계 – 개인 정보:

• 개인정보 섹션을 보려면 다음을 클릭하세요. 엘레멘터 + 상 그리고 다음을 선택하세요 두 개의 동일한 열이 있는 구조.

• 텍스트 검색 입력 필드를 클릭하고 왼쪽 열에 양식 필드를 끌어다 놓습니다.

• 이제 이 입력 필드의 속성을 편집하려면 편집 기호를 클릭하고 다음으로 이동하십시오. 내용 ⇒ 내용 다음 옵션을 편집합니다.
  • 라벨 표시: 입력 필드의 레이블을 표시하려면 이 옵션을 켜십시오. 
  • 위치:  라벨 위치를 상단 또는 왼쪽으로 선택할 수 있습니다.
  • 상표: 라벨에 이름을 지정하세요. 저는 "이름"을 사용하겠습니다. 
  • 이름:  이름 필드는 필수이며 고유해야 합니다. 따라서 각 필드에 다른 이름을 지정하고 공백을 밑줄/하이픈으로 바꾸십시오.
  • 자리표시자: 자리표시자 텍스트를 제공하세요.
  • 도움말 텍스트: 사용자에게 도움말 텍스트를 제공하려는 경우 여기에서 수행할 수 있습니다.

• 다음으로 이동 콘텐츠 ⇒ 설정  다음 옵션을 수정하려면:
  • 필수의:  이 양식 필드를 필수로 만들려면 이 옵션을 켜십시오.
  • 검증 유형: 문자 길이, 단어 길이 및 표현을 기반으로 텍스트 필드에 대해 다양한 유형의 유효성 검사를 설정할 수 있습니다.
  • 경고 메시지: 여기서 요구 사항이 충족되지 않을 경우 표시될 경고 메시지를 설정할 수 있습니다.

메모:  나는 조건부 논리 이 양식의 두 번째 단계에 있는 기능입니다.

이름과 마찬가지로 성에 대한 또 다른 텍스트 입력 필드를 추가합니다. 개인 정보 단계의 일부로 여기에 두 개의 필드를 더 추가하겠습니다. 이메일과 휴대폰 번호.

이메일 및 휴대폰 번호 필드의 설정 수정이 완료되면. 검색 및 다음 단계 버튼을 드래그 앤 드롭하세요.. 라벨, 버튼 정렬, 아이콘, 아이콘 위치 등과 같은 다양한 버튼 설정을 변경할 수 있습니다.

• 이제 첫 번째 단계에 대한 섹션이 준비되었으며, 첫 번째 단계에 적절한 이름을 부여할 수 있습니다.
  • 6개의 점 아이콘을 클릭하여 설정 옵션을 열고 다음으로 이동하세요. 레이아웃 ⇒ 다단계.  
  • 이름을 입력하세요. 다단계 탭 제목 옵션
  • 라이브러리에서 아이콘을 선택하거나 SVG를 업로드하세요.
  • 업데이트를 클릭하여 저장하세요.

이제 첫 번째 섹션이 준비되었으므로 두 번째 단계를 만들어 보겠습니다.

2️⃣ 예약 양식 2단계 – 예약 정보:

• 두 번째 단계에서는 새 섹션을 선택해야 합니다. 단일 열이 있는 새 섹션을 선택한 다음 두 개의 동일한 열이 있는 새 내부 섹션을 추가하겠습니다. 
• 열을 선택한 후 체크인 및 체크아웃 옵션에 대한 2개의 날짜 입력 필드를 끌어서 놓습니다.

반드시 따라야 할 규칙: 당신은해야합니다 새로운 단계를 시작하려면 새 섹션을 선택하세요그렇지 않으면 추가하는 모든 입력 필드가 이전 단계에 추가됩니다. 그러니 항상 기억하세요. 새로운 단계에는 새로운 섹션이 필요합니다 레이아웃이 동일하더라도.

• 텍스트 필드에 대해 언급된 설정 옵션과 함께 날짜 입력 필드에 대해 다음 설정이 제공됩니다. 콘텐츠 ⇒ 설정
  • 현재 날짜를 최소 날짜로 설정: 현재 날짜를 최소 날짜로 설정하려면 이 옵션을 켜세요.
  • 최소 날짜를 수동으로 설정하십시오. 현재 날짜를 최소 날짜로 설정하고 싶지 않은 경우 최소 날짜를 수동으로 설정할 수도 있습니다.
  • 최대 날짜를 수동으로 설정하십시오.  여기에서 최대 날짜를 설정할 수 있습니다.
  • 비활성화 날짜 목록: 이 옵션을 사용하여 일부 날짜를 비활성화할 수 있습니다. 날짜를 비활성화하려면 +항목 추가 버튼을 클릭하고 날짜를 선택하세요.
  • 범위 날짜 입력: 이 옵션을 켜면 사용자가 날짜 범위를 선택할 수 있는 옵션을 활성화할 수 있습니다. 하지만 이 양식에서는 이 옵션을 꺼진 상태로 두겠습니다. 
  • 연도 입력: 날짜 입력의 일부로 1년을 사용하려면 이 옵션을 켜십시오.
  • 월 입력: 날짜 입력의 일부로 월을 활성화하려면 이 옵션을 켜십시오.
  • 날짜 입력: 날짜 입력의 일부로 날짜(일)를 사용하려면 이 옵션을 켜십시오.
  • 날짜 형식: 여기에서 날짜 입력 형식을 설정합니다.
  • 현지화: 원하는 대로 드롭다운에서 위치를 선택하세요.
  • 시간을 입력하고 싶다면: 데이터와 함께 시간을 입력으로 사용하려면 이 옵션을 켜십시오. 이 옵션을 선택하면 24시간 활성화라는 또 다른 옵션이 표시됩니다. 이 옵션을 사용하면 24시간 형식을 활성화할 수 있습니다.

이제 마지막으로 다음을 사용하겠습니다. 조건부 양식 기능 체크 아웃 필드에 대해 체크인 필드가 비어 있을 때만 체크아웃 필드를 표시하려면,  

• 이름 값을 복사합니다. 체크인 입력 필드의 필드입니다.
• 그런 다음 내용 ⇒ 조건부, 켜세요 ~할 수 있게 하다 옵션
• AND를 선택하세요. 조건 일치 기준 드롭다운에서
• 작업 드롭다운 옵션에서 다음을 선택합니다. 이 필드 표시.
• 클릭 + 항목 추가, if 입력 필드에 복사한 체크인 필드 이름 값을 붙여넣습니다.
• 선택하다 "비어 있지 않음일치(비교) 드롭다운에서 ”를 선택합니다.

이제 미리보기 버튼을 클릭해서 확인해 보세요. 체크아웃 필드는 체크인 날짜를 선택한 후에만 표시되어야 합니다.

새 내부 섹션 추가 따라서 조건부 옵션이 처음에 체크아웃을 숨길 때 양식이 나빠 보이지 않습니다. 숫자 양식 필드를 두 번 끌어서 놓습니다. 객실 수와 인원 수에 대한 필드를 두 개 더 만듭니다.

그리고 중간 단계이기 때문에 이전 버튼과 다음 버튼을 모두 포함.

이 섹션에 추가된 모든 필드에 대한 설정 편집을 마쳤으면 레이아웃의 섹션/단계 이름 ⇒ 다단계 첫 번째 섹션에서 했던 것처럼요. 나는 그것을 예약 정보라고 명명하고 있습니다.

이제 두 번째 단계가 준비되었습니다. 세 번째 단계로 넘어가겠습니다.

3️⃣  예약 양식 3단계 – 추가 정보

세 번째 단계에서는 단일 열이 있는 새 섹션을 추가해 보겠습니다. 텍스트 필드를 추가하고 이름을 추가 정보로 지정합니다.

다음으로 섹션 내에 2열의 내부 섹션을 추가합니다. 이후, 이전 버튼을 드래그 앤 드롭한 다음 제출 버튼을 드래그 앤 드롭하세요. 양식 제출용.

참고: 원하는 만큼 내부 섹션을 추가할 수 있습니다. 하지만 새 단계를 만들려면 새 섹션을 추가해야 합니다.

세 번째 섹션에 이름을 지정하려면 다음으로 이동하세요. 레이아웃 ⇒ 다단계 제목을 추가하세요.추가 정보” 아이콘을 추가합니다.

마침내 3단계로 구성된 WordPress 다중 단계 양식 작성이 완료되었습니다. 이제 업데이트를 클릭하여 저장하고 창을 닫아 다단계 설정으로 이동하세요.

4단계: MetForm의 다단계 양식 옵션 활성화

이제 양식이 있으므로 이를 작동하는 다단계 양식으로 변환할 차례입니다. 그렇게 하려면

• 콘텐츠로 이동 ⇒ 다단계 설정
• 다단계 옵션을 활성화하려면 다단계 활성화 옵션을 켜세요.
• 섹션 메뉴가 맨 위에 표시되도록 Display Multistep Nav를 활성화합니다. 적응형 양식 컨테이너 높이, 맨 위로 스크롤 활성화 등과 같은 다양한 설정을 편집할 수도 있습니다.
• 모두 변경한 후 업데이트를 클릭하여 저장하세요.

5단계: 완료할 확인, 알림 및 기타 설정 구성

이제 다단계 양식을 디자인했습니다. MetForm이 제공하는 모든 양식 설정을 구성해 보겠습니다. WordPress 대시보드에서 MetForm 설정을 수정하려면, MetForm으로 이동 ⇒ Forms ⇒ 편집을 클릭하십시오. 방금 만든 양식의 옵션입니다. 

메모:  여기서 당신은 또한 찾을 수 있습니다 형식의 단축 코드 복사하여 붙여넣기만 하면 웹사이트 어디든 양식을 추가할 수 있습니다. 편집에서 양식 설정에 액세스할 수 있습니다. 형태 옵션도 그렇고.

여기서는 다음 설정을 찾을 수 있습니다:

일반적인: 

일반 설정의 일부로 다음을 수정할 수 있습니다. 제목, 성공 메시지, 로그인 필수, 조회수등을 설정할 수도 있습니다. 사용자 정의 URL 사용자가 양식을 제출한 후 접속하기를 원합니다.

확인:

이 양식 작성기 플러그인을 사용하면 제출된 양식의 사본과 함께 사용자에게 확인 이메일을 보낼 수 있습니다. 확인 옵션을 켜세요 그런 다음 설정할 수 있습니다 이메일 제목, 이메일 보낸 사람, 보낸 이메일, 이메일 회신 및 감사 메시지입니다.

알림 설정:

MetForm을 사용하면 관리자에게도 양식 알림 이메일을 보낼 수 있습니다. 알림 메일 활성화 관리자 옵션으로. 그런 다음 이메일 제목, 이메일 받는 사람, 이메일 보낸 사람, 관리자 메모, 등.

모든 편집을 완료한 후 아래로 스크롤하여 변경 사항 저장을 클릭하여 설정을 업데이트합니다.

설정 외에도 이 블로그에서 다룬 내용은 다음과 같은 통합을 얻을 수 있습니다. REST API, 메일 침프, 구글 시트등. 또한, PayPal, Stripe과 같은 결제 게이트웨이 통합. HubSpot, Zoho, 등 당신은 또한 얻을 로그인 및 등록과 같은 인증 옵션. 이러한 설정에 대한 자세한 내용은 다음을 참조하세요. MetForm 문서.

언급된 단계를 올바르게 수행했다면 아래와 같은 다단계 예약 양식을 받게 됩니다.

마무리

이제 몇 분 안에 WordPress 다단계 양식이 생성되었습니다. 이 양식이 간단하다고 생각한다면 걱정하지 마세요. 이 블로그의 주요 목적은 MetForm을 사용하여 WordPress에서 다단계 양식을 생성하는 방법을 보여주는 것이었습니다.

이제 WordPress 다단계 양식을 만드는 방법을 알았으므로 사용자 정의 양식과 논리를 만들 수 있습니다. MetForm 기능을 활용하여 멋진 다단계 양식을 만들어보시기 바랍니다. 도중에 문제가 발생할 경우 알려주시면 최대한 빨리 답변해 드리겠습니다.

MetForm이 제공하는 모든 놀라운 기능을 확인하는 것을 잊지 마십시오.