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

며칠 전 누군가 WordPress에서 다단계 양식을 만드는 방법에 대해 질문했습니다. 나는 파티에 있었고 어떻게 든 대화에서 문제가 발생했습니다. 나는 그 순간에 대해 설명할 기분이 아니었지만 워드프레스로 작업하면서 그를 설득하고 어떻게든 이해하게 해야 했습니다.

나중에 이 문제를 고려하여 다른 사람들이 WordPress에서 다단계 양식을 만드는 데 도움이 될 수 있는 자습서 기반 게시물을 작성하는 것을 생각했습니다. 그것이 내가 이것을 가능하게 하기 위해 노력하는 이유입니다.

다단계 양식을 디자인하는 이유는 무엇입니까?

양식은 정보를 수집하고 청중과 연락하는 가장 쉬운 방법 중 하나입니다. 단순한 캐주얼 양식일 수도 있고 비즈니스 양식일 수도 있고 설문조사와 관련된 모든 종류의 양식일 수도 있습니다.

WP Fluent Forms Pro

지금 Fluent Forms를 사용해 보고 직접 확인하십시오!

지금 다운로드

그러나 긴 형식은 때때로 사용자에게 역겹고 궁극적으로 나쁜 UX로 간주될 수도 있습니다. 이 문제를 해결하기 위해 거의 모든 대기업은 섹션과 페이지로 나누어진 다단계 양식을 사용하고 있습니다.

페이지 상단의 진행률 표시줄은 사용자에게 양식 작성에 대한 더 많은 편안함과 제어를 제공하며 가장 중요한 것은 사용자와 다른 방식의 상호 작용성을 제공한다는 것입니다. 또한 사용자와의 참여도를 빠르게 증가시킵니다.

WP Fluent 양식으로 다중 페이지 WordPress 양식을 만드는 방법

이해를 돕기 위해 여기에서 WP Fluent Form을 사용하겠습니다. WP Fluent Form은 모든 종류의 양식을 만들기 위한 빠르게 성장하는 사용자 친화적인 WordPress 양식 플러그인입니다.

먼저 WordPress에 WP Fluent Form 플러그인을 설치하고 활성화해야 합니다. 자세한 내용 은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 참조하세요.

WP Fluent Forms 플러그인을 활성화하고 라이선스 프로세스를 완료하면 웹사이트에서 다단계 양식을 만들기에 적합한 환경을 갖게 됩니다.

지금 하고 있는 것처럼 3단계 다단계 양식을 만들 것입니다. 첫 번째 단계는 사용자의 개인 정보, 두 번째 페이지는 사용자의 교육 정보, 세 번째 페이지는 사용자의 취미입니다. 이제 WP Fluent Form을 사용하여 이를 수행하는 방법을 보여 드리겠습니다.

WP Fluent Forms는 60개 이상의 다양한 기본 제공 양식 템플릿을 제공합니다. 클릭 한 번으로 그 중 하나를 각각의 목적에 맞게 사용할 수 있습니다. 클릭이 완료되면 해당 양식이 자동으로 생성된 것을 볼 수 있습니다.

양식을 처음부터 수동으로 만들 수도 있습니다. 처음부터 양식을 만들려면 Fluent Form —> Create a Blank Form 으로 이동하면 세 가지 기본 양식 형식과 새 양식을 만들기 위한 사용자 지정 옵션이 있는 대화 상자가 표시됩니다.

자세한 내용 은 Fluent Forms로 새 양식을 만드는 방법을 참조하세요.

빈 양식 만들기를 클릭하면 구성 옵션과 함께 표시되는 양식 빌더를 찾을 수 있습니다. 오른쪽 사이드바에서 끌어서 놓을 수 있는 입력 필드를 찾아 양식에 특정 기능을 추가할 수 있습니다.

양식을 만든 후 이제 해당 양식에 필요한 필드를 입력해야 합니다. 이를 가능하게 하려면 원하는 필드를 끌어다 놓습니다. 예를 들어, 귀하의 개인 정보에 대해 양식에 4개의 다른 필드를 넣습니다.

입력 필드가 있으므로 양식에 기능을 추가하려면 특정 입력 필드를 클릭하거나 끌어다 놓아야 합니다. 입력 필드를 추가했으면 원하는 이름에 따라 각 부품의 요소 레이블 을 변경하십시오. 이해를 돕기 위해 스크린샷 몇 장을 남깁니다.

필요에 따라 이름 필드 , 주소 필드 , 이메일 을 추가하십시오. 모든 입력 필드를 사용자 정의하고 관리 필드 레이블, 자리 표시자, 요소 레이블 등을 변경할 수 있습니다.

주소 필드 이전에 편집기에 드롭다운 입력 필드를 추가하고 이름을 Gender 로 지정합니다. 성별 섹션에서 드롭다운 메뉴에 대한 옵션을 구성해야 합니다.

드래그 앤 드롭으로 간단히 입력 필드를 재정렬할 수도 있습니다. 다음 이미지에서 볼 수 있듯이 성별 입력 필드를 드래그 앤 드롭합니다.

양식의 첫 번째 단계를 완료하려는 양식 단계 입력 필드를 추가합니다. 이렇게 하면 다단계 양식에 페이지 나누기가 만들어집니다. 다음 페이지에 표시하려면 그 아래에 다른 필드를 추가하십시오.

이제 커서를 페이징 시작 섹션 위에 놓으면 편집 옵션(연필 아이콘)이 표시됩니다. 그것을 클릭하면 Input Customization 으로 이동합니다. 거기에서 진행률 표시줄 버튼을 클릭하여 모든 단계에 제목을 지정해야 합니다.

각 단계의 제목 이름을 적어 두십시오. 예를 들어, 1단계 입력 필드에 개인 정보 를 작성합니다. 2단계 입력 필드 등에 Education 을 입력합니다. 이제 미리보기 섹션을 살펴보십시오.

그림은 폼의 상단과 하단에 각각 하나의 진행 표시줄과 하나의 다음 버튼이 표시되는 것을 보여줍니다.

이제 양식의 교육 부분을 나타내는 양식의 두 번째 페이지에서 작업해야 합니다. 이를 위해 University & College 의 Simple Text 필드를 입력용으로 사용할 수 있습니다. 양식의 '학위' 입력에는 드롭다운 필드를 사용해야 합니다.

각 입력 필드에 대한 스크린샷을 살펴보겠습니다. 대학교 및 대학교의 경우 먼저 레이블을 사용자 정의해야 합니다.

학위 입력 필드의 경우 드롭다운 입력 필드를 사용해야 합니다. 이 경우 먼저 레이블을 사용자 정의한 다음 드롭다운 목록에 대한 옵션을 제공해야 합니다.

이제 사용자의 취미와 관련된 세 번째 페이지로 이동합니다. 이를 수행하려면 이에 대한 접근 방식을 만들기 위해 Form Step 을 다시 선택해야 합니다.

페이징 시작 섹션에서 양식 단계 필드를 클릭하면 새 입력 필드가 즉시 생성됩니다. '양식 단계' 섹션의 편집 옵션을 클릭하여 세 번째 단계의 제목 이름을 기록합니다.

입력 필드에 Hobby 를 입력하여 제목을 적습니다. 그런 다음 양식의 세 번째 섹션으로 이동합니다. 취미별로 간단한 텍스트 필드를 선택할 수 있습니다.

양식 제출 버튼 바로 위에 드롭해야 합니다.

이런 식으로 두 개의 단순 텍스트 영역을 더 가져와서 양식의 세 번째 섹션에 전체 보기를 제공할 수 있습니다. 그런 다음 Hobby One 의 텍스트로 '요소 레이블'을 사용자 지정합니다.

Hobby Two 와 Hobby Three 라는 이름으로 나머지 두 필드를 사용자 지정해야 합니다. 그런 다음 이 인터페이스의 미리보기를 보십시오.

페이지 하단에서 이용약관 필드를 입력하여 전체 절차를 완료할 수 있습니다. 그런 다음 양식 제출의 전체 프로세스를 살펴볼 수 있습니다.

이제 궁극의 미리보기를 살펴보십시오.

이것이 WP Fluent Form 을 사용하여 다단계 양식 을 만드는 방법입니다. 이것은 WP Fluent Form 으로 작업하는 것이 매우 편리하고 효과적입니다. 특정 목적을 위해 다단계 양식을 만드는 가장 편리한 기능을 제공하기 때문입니다.

이 기능을 사용하고 아름답고 간결하며 직관적인 다단계 양식을 만들려면 지금 WP Fluent Form Pro Add-on을 다운로드하십시오!

WordPress 관련 팁과 요령을 얻으려면 YouTube 채널을 구독하십시오. 또한 Twitter와 Facebook에서 우리를 팔로우하십시오.