조건부 논리를 사용하여 다양한 Divi 문의 양식을 만드는 방법

모든 방문자가 같은 이유로 귀하의 사이트를 방문하는 것은 아닙니다. 고객과 클라이언트를 위한 단일 옵션이 아닌 다양한 제품 또는 서비스를 제공할 수 있습니다. 그렇기 때문에 여러 대상 연락처 양식을 사용하면 사이트의 UX를 원활하게 할 수 있으므로 고객(및 잠재 고객)이 가능한 한 마찰을 최소화하면서 필요한 사항에 대해 정확히 연락할 수 있습니다. Divi 문의 양식 모듈과 조건부 논리 기능을 사용하여 가능한 한 귀하와 귀하의 사용자 사이에 최상의 파이프라인을 만드는 과정을 안내해 드리겠습니다.

조건부 문의 양식 미리보기

모든 것이 말하고 완료되면 방문자가 사용할 준비가 된 이와 유사한 것을 사이트에 갖게 됩니다.

데스크탑

이동하는

조건부 논리란 무엇입니까?

먼저 조건부 논리 가 의미하는 바를 간단히 설명하고자 합니다. 이 자습서에서 수행할 작업은 사용자가 선택하거나 선택하지 않은 항목을 기반으로 표시되는 일련의 문의 양식을 설정하는 것입니다.

예를 들어 방문자가 필요로 하는 서비스 또는 제품에 따라 조정되는 단일 문의 양식을 가질 수 있습니다. 그렇게 하면 정보를 작성하지 않고도 필요한 형식으로 정보를 얻을 수 있습니다. 연락처 양식의 조건부 논리는 의사 소통을 향상시키고 사용자에게 제공하는 능력을 촉진할 수 있습니다.

이를 염두에 두고 대상 연락처 양식을 만드는 방법을 살펴보겠습니다.

조건부 논리를 사용하여 연락처 양식을 만드는 방법

Divi 빌더 로드

Divi Contact Form 모듈을 사용하고 있으므로 Divi Builder에 들어가야 합니다. 이 튜토리얼에서는 랜드스케이프 유지 관리 레이아웃 팩을 예제로 사용할 것입니다. 원하는 레이아웃이나 디자인을 사용할 수 있지만 Divi Contact Form Module을 사용하고 스타일을 지정할 수 있어야 합니다.

시작하려면 WordPress 웹 사이트의 백엔드에서 Divi Builder를 입력하십시오. 페이지 편집기 내부에 Divi Builder 사용 (또는 이미 페이지를 만든 경우 Divi Builder로 편집) 이라는 보라색 버튼이 표시됩니다.

문의 양식 모듈 추가 또는 찾기

그런 다음 페이지에 이미 있는 문의 양식 모듈 을 찾거나 검은색 + 원 아이콘을 클릭하고 드롭다운 메뉴에서 문의 양식 을 찾고 싶을 것입니다.

문의 양식 설정 입력

Divi 연락처 양식 모듈에는 기본적으로 Name , Email 및 Message 의 3개 필드가 있습니다. 우리가 할 일은 방문자가 쿼리를 지시할 수 있을 만큼 충분한 정보를 제공할 때까지 이러한 옵션이 표시되지 않는 문의 양식을 만드는 것입니다.

첫 번째 조건부 질문 추가

콘텐츠 탭과 이미 양식에 있는 필드 아래에 새 필드 추가 버튼이 표시됩니다. 클릭하세요.

그렇게 하면 필드 설정 창이 열리고 필드 ID 및 제목 항목에 대한 위치가 표시되어야 합니다. 필드 ID 는 당신을 위한 것입니다. 그것이 당신이 추적할 수 있도록 모듈 설정 안에 나타나는 것입니다. 제목 은 방문자가 양식의 프런트 엔드에서 보게 될 텍스트입니다. (제목은 양식을 제출할 때 받는 이메일에도 표시됩니다.)

방문자가 양식에서 보게 될 첫 번째 질문이기 때문에 필드 ID 에 "조건부"라는 레이블을 지정했습니다. 그것에 대한 그들의 반응은 그들이 다음에 보게 될 것을 결정할 것입니다. 이것은 양식의 질문과 답변의 흐름을 추적하는 쉬운 방법입니다.

필드 옵션 추가

그런 다음 콘텐츠 탭 에서 필드 옵션 섹션으로 스크롤합니다. 여기에서 사용자가 선택할 수 있는 선택 항목을 추가합니다. 이들 각각은 특정 후속 질문에 대한 방아쇠가 될 것입니다. 이 예에서는 확인란 을 입력 유형으로 사용 합니다 . 이것은 사용자가 원하는 만큼 선택할 수 있음을 의미합니다.

체크 박스뿐만 아니라, 디비는 다른 옵션을 허용 : 입력 필드와 텍스트 영역을 사용자 자신이 입력 된 응답을, 전자 메일 주소 항목에 대한 단수가 제공 선택뿐만 아니라 이메일 필드를 선택 드롭 다운 및 라디오 버튼. 기본 이름 필드는 입력 필드 이고 메시지 는 텍스트 영역 입니다.

확인란을 선택하면 나중에 다른 옵션을 트리거할 선택 항목을 입력합니다. 그런 다음 사용자가 양식을 조기에 제출할 수 없도록 이것이 필수 필드 인지 확인하려고 합니다.

여기에서 이 단계에 조건부 논리 를 추가하지 않는다는 점에 유의하는 것이 중요합니다. 이것은 트리거이므로 사용자에게 상관없이 나타납니다.

조건부 응답에 대한 새 필드 추가

그러나 다음으로 후속 응답으로 추가하는 새 필드에 대한 조건부 논리 를 추가합니다. 초기 질문에 3개의 옵션을 포함했기 때문에 양식에 3개의 새로운 해당 필드를 추가할 것 입니다. 각각에 대해 다음 단계를 반복합니다.

새 필드의 조건부 응답 이름 지정

조건부 1 (첫 번째 조건부 트리거를 나타내기 위해)의 명명 규칙을 사용한 다음 후속 응답에 1a , 1b 및 1c 의 명명 규칙을 사용했습니다. 또한 그것들이 무엇인지 추적할 수 있도록 적절하게 레이블을 지정했습니다.

첫 번째 질문과 마찬가지로 방문자가 보게 될 질문으로 제목 도 입력합니다.

응답 필드에 조건부 논리 추가

그런 다음 해당 필드의 내용 탭 아래에 있는 조건부 논리 섹션으로 스크롤합니다. 조건부 논리에 대한 토글을 활성화합니다. 그런 다음 이 항목에 대한 관계 를 선택합니다. 즉, 임의 (많은 응답이 이 옵션을 표시할 수 있음) 또는 모두 (특정 응답 조합만 이 필드를 표시함)로 설정할 수 있습니다.

우리처럼 단일 트리거 규칙을 사용하는 경우 일부 또는 모두 가 작동합니다.

규칙 아래에서 이 필드를 트리거하는 필드가 표시되고 오른쪽에서 트리거할 선택 항목을 선택할 수 있습니다. 중심은 같음, 같지 않음, 보다 작음, 보다 큼 등과 같은 한정자입니다. 이 특정 필드에 대해 조건부 1 로 설정한 질문을 선택한 다음 이 필드가 나타나도록 특별히 트리거하는 옵션을 선택합니다.

모든 조건부 응답에 대해 이 작업을 반복합니다.

단일 조건부 질문에 세 가지 다른 응답을 추가했으므로 다른 필드에 대해서도 이 정확한 프로세스를 반복할 것입니다. 해당 선택에 대한 적절한 상관 응답만 생성합니다.

연락처 양식 Fiends '이름/이메일/메시지'가 나타나도록 설정

조건부 논리에 대한 응답을 설정했으면 방문자가 실제로 양식을 제출할 수 있기를 바랍니다. 이를 위해 Name , Email 및 Message 필드에서 조건부 논리를 조정할 것입니다. 이들 각각에 대한 설정은 정확히 동일하므로 다시 한 번 이 작업을 3회 반복합니다.

Name , Email 및 Message 필드 설정 내에서 Conditional Logic 으로 이동합니다. 그것을 활성화하고 조건부 후속 질문에 대한 최종 응답 이 있는 만큼 추가합니다. 우리의 경우 3개의 후속 질문이 있으므로 3개의 규칙을 사용합니다.

각 규칙에 대해 후속 질문을 트리거로 선택합니다. 한정자를 is not empty 로 설정하면 방문자가 질문에 대답하는 한 조건이 충족됨을 의미합니다. 그러면 답변이 충분함을 나타내는 마지막 상자가 회색으로 표시됩니다.

변경 사항을 저장 하고 양식 제출을 허용하도록 표시하려는 모든 필드에 대해 이 작업을 반복합니다 . 그리고 그게 다야! 귀하의 양식은 즉시 사용자의 요구에 맞게 조정됩니다.

최종 결과

조건부 논리가 실제로 어떻게 작동하는지 아래에서 볼 수 있습니다.

데스크탑

이동하는

마무리

문의 양식은 웹사이트에서 가장 보편적인 요소 중 하나입니다. 거의 모든 사이트에 하나가 있고 거의 모든 사이트에 하나가 필요합니다. 그러나 모든 사용자가 같은 이유로 귀하의 사이트를 방문하는 것은 아닙니다. Divi의 조건부 논리 기능을 사용하여 연락처 양식을 사용자가 통신할 수 있는 다목적 도구로 사용자 지정할 수 있습니다.

Divi 조건부 논리 기능을 사용하여 어떤 종류의 양식을 만드셨습니까?

Kubko의 기사 특집 이미지 / Shutterstock.com