WordPress에서 다중 페이지 양식을 디자인하기 위한 4가지 쉬운 단계

게시 됨: 2022-06-10

WordPress 웹 사이트에 긴 양식이 있습니까? 전환율이 낮습니까? 온라인 양식이 길수록 작성하려는 사람이 줄어들기 때문입니다. 왜요? 사람들이 너무 많은 질문으로 긴 양식을 작성하는 데 압도감을 느끼기 때문입니다. 그러나 교육 기관, 음식 배달 사이트, 차량 제공업체 등과 같은 많은 비즈니스에서는 웹사이트에 긴 양식이 필요합니다.

그래서, 해결책은 무엇입니까? WordPress의 강력한 양식 빌더를 사용하여 웹사이트에 여러 페이지 양식을 추가해 보세요. 결과적으로 연락처 양식을 더 쉽고 간단하게 만들 수 있으며 방문자는 양식을 작성하는 데 지루함을 느끼지 않을 것입니다.

이 기사에서는 강력한 양식 작성기 Fluent Forms를 사용하여 여러 페이지 양식 WordPress를 만드는 방법과 양식 유형의 몇 가지 예를 살펴보고 영감을 얻고 WordPress 웹 사이트를 위한 효율적인 다단계 양식을 만들기 시작할 것입니다. .

Fluent Forms는 초보자에게 가장 친숙한 양식 빌더입니다. 지금 다운로드하고 아름다운 양식을 무료로 제작하세요!!!

다중 페이지 양식이란 무엇입니까?

다중 페이지 양식은 여러 페이지로 분할된 긴 양식입니다. 일반적으로 등록 양식, 체크아웃 양식 등과 같은 긴 양식에 사용됩니다. 고객을 위해 긴 양식의 작은 부분을 활성화하여 긍정적인 사용자 경험을 만들고 웹사이트의 전환율을 높일 수 있습니다.

다중 페이지 양식의 훌륭한 예

다음은 WordPress용 다중 페이지 양식을 만드는 몇 가지 좋은 예입니다.

"Khoros"의 데모 받기

영국에 기반을 둔 디지털 고객 참여 플랫폼 회사인 Khoros는 웹사이트에 진행률 표시줄과 함께 놀라운 다단계 양식을 배치했습니다. 홈페이지에서 데모 받기 버튼을 클릭하면 다단계 양식을 받게 됩니다. 형태는 아래 이미지와 같습니다.

다중 페이지 양식 WordPress, 다중 페이지 양식 예, — *Khoros.com의 다단계 양식*

데모를 받으려면 이메일 주소부터 시작하여 단계별 프로세스를 거쳐야 합니다. 분홍색으로 표시된 다음 버튼을 클릭하면 추가 필드를 채울 수 있습니다. 양식은 매우 단순하지만 쉽고 스마트하며 아름다운 인터페이스를 제공합니다.

"Uber"로 가입 양식

Uber는 다단계 양식의 또 다른 좋은 예입니다. 이 사이트는 기본적으로 음식 배달, 자동차 타기 등에 관한 것입니다. 예를 들어, Uber 서비스에서 운전사가 되고 싶습니다. 그러기 위해서는 우선 거기에 회원가입을 해야 합니다. 따라서 Uber 웹 사이트로 이동하여 전면 페이지의 오른쪽 상단 모서리에 있는 가입 버튼을 클릭합니다. 그런 다음 가입 범주에서 드라이버 옵션을 선택하면 양식이 표시됩니다.

첫 페이지에 이름, 이메일, 전화번호 등과 같은 몇 가지 기본 정보를 제공해야 합니다. 그런 다음 다음 버튼을 클릭하면 더 많은 필드를 채울 수 있습니다. 따라서 이것은 또한 우수한 다단계 양식 샘플입니다. 전체 과정은 사용자가 성형 과정을 거치는 것을 느끼지 않도록 단계별 작업을 통해 수행됩니다.

"Quick Base"에서 무료 평가판 시작

Quickbase는 비즈니스 및 IT 팀이 함께 안전하게 작업할 수 있도록 모든 기술적 배경을 해결하는 앱입니다. 또한 지속 가능성을 통해 애플리케이션 생태계를 만들 수 있습니다. 또한 웹 사이트에 진행률 표시줄이 있는 다단계 양식을 제공합니다. 예를 들어 홈 페이지에서 무료 평가판 시작 버튼을 클릭하면 여러 페이지로 된 양식으로 전환됩니다.

양식은 각 단계에 2개의 양식 필드가 있는 매우 간단합니다. 게다가 즐기는 것도 다채롭다.

"Hello Fresh"로 식단을 선택하세요.

Hello Fresh는 식단 제공업체 웹사이트입니다. 미국 최대의 밀키트 공급업체이며 덴마크, 뉴질랜드, 스웨덴, 캐나다, 호주 및 서유럽에서도 서비스를 제공합니다. 홈페이지에서 플랜 보기 옵션으로 이동하면 다단계 양식이 표시됩니다. 그들의 양식은 보기에 매우 놀랍습니다. 그리고 당신이 이것을 채울 때 당신은 그것이 양식이라는 사실조차 깨닫지 못할 것입니다. 그것은 당신을 순조로운 과정으로 데려갈 것이며, 당신은 또한 양식 상단에 진행률 표시줄을 볼 수 있습니다.

WordPress 웹사이트에서 다중 페이지 양식의 개념을 이해하시기 바랍니다. 이제 이러한 양식이 온라인 비즈니스에 어떻게 도움이 되는지 살펴보겠습니다.

웹사이트에 다중 페이지 양식을 사용해야 하는 이유는 무엇입니까?

분할 양식이 어떻게 더 많은 정보를 제공하고 더 나은 사용자 경험을 제공하는 데 좋은 방법이 될 수 있는지 자문해 볼 수 있습니다. 좋은 질문입니다.

답은 다단계 형식이 더 많은 양의 긴 형식 정보를 보다 조직화된 방식으로 제시하고 부담을 덜게 한다는 것입니다. 또한 다중 페이지 양식은 단일 단계 양식보다 더 많은 전환을 유도합니다. 예를 들어, 우수한 다단계 양식은 전환율을 100%까지 높일 수 있습니다. 또한, 한 실험에서 단일 단계 형태가 다단계 형태로 전환될 때 59.2%의 성장을 달성했습니다.

또 뭔데? 다단계 양식을 사용하면 방문자를 지루하게 하지 않고 더 많은 질문을 할 수 있고 더 많은 자격을 갖춘 리드를 수집할 수 있습니다. WordPress 웹사이트에서 다단계 양식을 사용할 때의 주요 이점은 다음과 같습니다.

사용자 친화적인 경험 제공
브랜드 인지도 제고에 도움
전환율 증가
영업 팀을 위한 양질의 리드 확보

이제 Fluent Forms for WordPress를 사용하여 다단계 양식을 디자인하는 주요 부분으로 이동하겠습니다. 이를 위해 Fluent Forms를 선택한 이유는 무엇입니까? 이유는 아래에 설명되어 있습니다.

왜 Fluent Forms인가?

Fluent Forms는 WordPress 리포지토리의 강력하면서도 가벼운 양식 빌더입니다. 60개 이상의 필드, 70개 이상의 사전 제작 템플릿, 40개 이상의 타사 통합을 통해 양식을 아름답게 만들 수 있습니다. 입력 필드 섹션에서는 파일 업로드, 이미지 업로드, 체크박스, 객관식, 사용자 정의 HTML, 작업 후크, 체크 가능한 후크, 범위 슬라이더, 순 프로모터 점수, 라디오 버튼, 사용자 정의 제출 버튼, 색상 선택기 필드, 퀴즈 점수 필드를 다룹니다. , 포스트/CPT 선택, 양식 단계 등 옵션을 통해 다단계 양식을 환상적인 모양으로 만들 수 있습니다. 또한 Stripe, PayPal, Mollie, RazorPay, PayStack 등과 같은 컨테이너, 결제 필드 및 결제 통합을 지원합니다.

다른 무엇? 플러그인은 전체 웹사이트를 실행할 수 있는 모든 액세스 권한을 제공하기에 충분합니다. MailChimp, CleverReach, Zapier, Gist, Platformly, CampaignMonitor, Getrespone, ActiveCampaign, Trello, Drip, Sendinblue, Zoho, Moosend, SendFox, FluentCRM, Ninja Tables, WP Social Ninja, Twilio, Hubspot, 지속적인 접촉, Discord, MailerLite, Salesforce, Slack, Telegram 및 더 많은 옵션. 놀랍지 않습니까?

또한 퀴즈 빌더 모듈과 대화식 양식 기능은 플러그인을 시장의 다른 양식 빌더보다 더 가치있게 만들었습니다. 또한 양식 제출 후 사용자에게 이메일 알림을 보내고 양식을 제한 및 예약하고 전역 스타일러 옵션을 사용하여 양식을 더 아름답게 만드는 등의 작업을 수행할 수 있습니다. 보안을 위해 Fluent Forms에는 hCaptcha, reCAPTCHA(v2 및 v2), Honeypot 및 사용자 정보를 보호하기 위한 전용 GDPR 필드가 있습니다. 이 도구의 더 놀라운 점은 도구의 모든 기능에 액세스하는 데 코딩 경험이 필요하지 않다는 것입니다. 매끄러운 인터페이스와 부드러운 드래그 앤 드롭 기능으로 초보자라면 누구나 플러그인을 사용할 수 있습니다.

Fluent Forms Pro 받기

그래서 더 이상 고민하지 않고 프로세스로 넘어 갑시다.

Fluent Forms를 사용하여 여러 페이지로 된 양식을 손쉽게 디자인

제품 웹 사이트에 대한 결제 양식을 만들고 단계 양식을 통해 표시하려고 한다고 가정합니다. 양식을 디자인하는 이 네 가지 쉬운 단계를 따릅니다.

양식 만들기
양식 사용자 정의
양식 설정
게시

1단계: 양식 만들기

다중 페이지 양식 옵션을 사용하려면 프로 추가 기능 팩이 필요하므로 Fluent Forms Pro 대시보드로 이동하십시오. 그런 다음 모든 양식 옵션을 선택하고 열린 새 탭에서 새 양식 추가 버튼을 클릭합니다. 여기에서 대화 형식 만들기 옵션이나 드롭다운 메뉴 모음에서 게시물 형식 만들기 버튼을 선택할 수 있습니다.

여기에서는 대화 형식이 필요하지 않기 때문에 Create Post Form 옵션을 선택한다고 가정해 보겠습니다. 버튼을 클릭하면 게시물 유형을 선택해야 합니다. 게시물, 페이지, 문서 또는 케이던스 요소에 양식을 붙여넣으려면 팝업에서 원하는 사람을 선택하세요.

더 간단하게 작성하려면 드롭다운 메뉴 부분을 건너뛰고 새 양식 추가 버튼을 직접 클릭하면 됩니다. 우리는 두 번째 옵션으로 갈 것인데, 미리 만들어진 다른 템플릿이 아닌 빈 양식 그림을 선택합니다.

이제 폼을 디자인해 보겠습니다.

2단계: 양식 사용자 지정

양식을 만든 후에는 Fluent Forms 인터페이스가 표시됩니다. 여기에서 기본 인터페이스, 입력 필드 및 입력 사용자 정의의 세 가지 영역을 확인할 수 있습니다. 이제 양식에 필요한 필드를 추가할 차례입니다. 그렇다면 결제 양식에 어떤 필드를 추가해야 할까요? 그것은 간단합니다. 너무 많은 체크아웃 양식을 작성했고 양식 필드가 이미 머리 속에 있기 때문입니다.

이제 입력 필드 섹션에서 필드를 드래그 앤 드롭하거나 선택합니다. Fluent Forms에서는 입력 필드의 네 부분인 일반 필드 , 고급 필드 , 컨테이너 및 지불 필드 를 얻을 수 있습니다. 일반 필드 섹션에서 이름, 이메일, 번호 및 주소 필드를 가져옵니다.

필드 설정을 사용자 정의하려면 입력 사용자 정의 섹션으로 이동하십시오. 예를 들어 주소 필드의 설정을 지정하고 있습니다. 여기서 우리는 체크아웃 프로세스를 위해 두 번째 주소와 주 이름을 수집하고 싶지 않습니다. 그래서 우리는 옵션을 해제하고 있습니다.

그 후 고급 필드 옵션으로 이동합니다. 이제 양식이 긴 형식이 될 것이기 때문에 양식 단계 필드를 선택합니다. 우리는 고객이 다음 페이지로 이동할 수 있도록 여기에서 휴식을 취하고 싶습니다.

Fluent Forms를 사용하여 다중 페이지 양식을 사용자 정의하는 핵심 부분이 있습니다. 플러그인의 양식 단계 필드에는 세 가지 다른 부분이 있습니다. 아래에 설명되어 있습니다.

페이징 시작

양식 단계 필드의 첫 번째 옵션입니다. 이 부분은 양식의 첫 번째 페이지를 보유합니다. 양식의 첫 번째 부분을 완료하면 자동으로 페이징 시작 섹션으로 변환됩니다. 이 섹션을 사용자 정의하려면 옵션의 편집 아이콘을 클릭하십시오. 그것은 세 가지 다른 섹션을 다룹니다. 옵션에 대해 논의해 보겠습니다.

요소 클래스: 입력 필드 자체에 사용자 정의 CSS 클래스를 추가합니다.
진행률 표시기: 이 옵션은 사용자가 선택에 따라 양식의 진행률을 볼 수 있도록 도와줍니다. 진행률 표시줄, 단계 및 없음의 세 가지 표시줄 스타일 중에서 선택할 수 있습니다. 진행률 표시줄 옵션을 선택하고 있습니다. 진행률 표시줄로 이동하면 표시줄에 백분율로 표시된 양식의 진행률이 표시됩니다. 단계 버튼을 선택하면 양식 프로세스가 단계적으로 표시되고 없음 버튼은 양식 진행에 대해 아무 것도 표시하지 않습니다.

단계 제목: 이 섹션에서 양식 단계 또는 부분의 이름을 지정할 수 있습니다. 예를 들어 1단계는 개인정보로, 2단계는 상품정보로 설정하고 있습니다. 고객은 아래 이미지와 같은 양식을 보게 됩니다.

마지막 부분은 양식의 자동 스크롤을 비활성화하고 자동 페이지를 활성화하고 단계별 데이터 저장을 활성화하는 것입니다.

-자동 스크롤은 단계 양식에서 기본적으로 활성화되어 있습니다. "각 페이지를 변경할 때 자동 초점 비활성화" 버튼을 선택하여 비활성화할 수 있습니다.

"자동 페이지 단일 라디오 필드 활성화" 옵션을 활성화하면 다단계 양식의 다음 페이지에서 마지막 라디오 버튼 필드가 트리거됩니다.

마지막으로 "단계별 데이터 저장 활성화" 필드를 활성화하면 현재 데이터가 저장됩니다. 결과적으로 사용자는 떠난 날 다시 시작할 수 있습니다. 재개 세션을 활성화하려면 이 섹션을 선택한 후 열린 필드를 클릭하십시오.

페이지 나누기

새 단계를 수행해야 할 때마다 이 섹션 아래의 양식 필드를 클릭하거나 끌어다 놓습니다. 빌더 포인트에 새 단계 또는 섹션을 자동으로 생성하기 때문입니다. 그런 다음 새 필드나 단계를 입력할 수 있는 새 공간이 생겼음을 알 수 있습니다. 필드 위로 마우스를 가져갈 때 편집 아이콘을 클릭하여 이 세그먼트를 사용자 지정해야 합니다. 여기에서 사용자 정의할 부분이 아래에 표시됩니다.

이전 버튼: 이 부분에서는 기본 또는 이미지의 두 가지 옵션 중에서 선택해야 합니다. 기본 옵션을 선택하면 이전 페이지의 텍스트 버튼이 표시됩니다. 이미지 부분으로 이동하면 선택한 아이콘이 나타납니다.
이전 버튼 텍스트: 이 필드는 이전 버튼 텍스트를 편집하거나 이전 버튼에 추가한 이미지의 아이콘 링크를 추가하는 데 도움이 됩니다.
다음 버튼: 이 버튼의 설정은 이전 버튼과 동일합니다. 유일한 차이점은 다음 버튼에 대한 것입니다. 다음 버튼에 표시할 텍스트 또는 이미지 옵션을 선택해야 합니다.
다음 버튼 텍스트: 이 섹션에서는 선택한 옵션의 텍스트 또는 다음 버튼의 링크를 제공해야 합니다.
요소 클래스: 입력 필드 자체에 사용자 정의 CSS를 추가할 수 있습니다.

페이징 종료

페이징 종료는 Fluent Forms의 Form Step 필드의 마지막 부분입니다. 다중 페이지 양식의 끝을 나타냅니다. 다시 필드의 편집 아이콘을 클릭하여 이 섹션을 편집해야 합니다. 이 옵션에는 세 가지 편집 옵션이 있습니다. 이것들은:

요소 클래스: 입력 필드 자체에 사용자 정의 CSS 클래스를 포함합니다.
이전 버튼: 기본, 텍스트 등 두 가지 옵션 중에서 선택해야 합니다.
이전 버튼 텍스트: 이전 버튼 텍스트 를 사용자 지정하거나 아이콘 링크를 조정하여 이미지를 표시합니다.

그래서 우리는 양식의 첫 번째 단계를 마쳤습니다. 두 번째 단계에서는 컨테이너와 지불 항목, 항목 수량, 지불 방법 등과 같은 일부 지불 필드를 추가합니다. 우수한 지불 양식을 디자인하려면 Fluent Forms 지불 통합을 사용한 지불 수집에 대한 기사를 확인할 수 있습니다. 그리고 말했듯이 이 필드는 페이지 나누기 옵션 뒤에 추가됩니다. 우리의 양식은 2단계 양식이므로 지금은 이것이 우리 양식의 최종 모습입니다.

양식의 미리보기 및 디자인 무드에서 글로벌 스타일 옵션을 사용할 수도 있습니다. Fluent Forms의 글로벌 스타일러 옵션을 사용하면 양식을 다채롭고 아름다운 모양으로 만들 수 있습니다. 이것은 고급 사용자 정의에서 일부 색상을 제공한 후의 양식입니다.

Fluent Forms의 전역 스타일러 옵션을 사용하여 아름다운 양식을 디자인하는 방법에 대한 기사도 읽을 수 있습니다.

3단계: 양식 설정

양식 설정을 사용자 정의하려면 양식 편집기에서 설정 및 통합 부분으로 이동하십시오.

여기에서는 명명된 양식 설정, 지불 설정, 이메일 알림, 마케팅 및 CRM 통합이라는 네 가지 기본 설정 옵션이 제공됩니다. 양식 설정 옵션에서 양식 확인 설정, 양식 레이아웃, 일정 및 제한, 고급 양식 유효성 검사, 설문 조사 결과, 준수 설정 등을 사용자 지정할 수 있습니다.

폼 확인 설정 옵션에서 폼의 폼 제출 후 설정을 할 수 있습니다. 확인 유형, 제출 후 표시할 메시지, 제출 후 섹션에 제출 후 할 일 등을 설정할 수 있습니다.