워드프레스 Quform 컨택트 폼 플러그인에서 로직 기능 사용하기

문의 폼에서 사용자가 어떤 필드에서 특정 값을 선택했을 때 다른 필드를 표시하거나 숨기고 싶은 경우가 있을 수 있습니다. 예를 들어, "서비스 유형"에서 "번역 문의"를 선택하면 숨겨져 있던 "문서 분량" 필드와 "예상 납기일" 필드가 표시되도록 하는 경우를 생각해볼 수 있습니다.

워드프레스 Quform 컨택트 폼 플러그인 로직 기능

이와 같이 다른 필드에서 사용자가 선택하는 값에 따라, 또는 특정 조건(예를 들어, 사용자가 입력하는 값이 100보다 큰 경우)에 따라 특정 필드를 표시하거나 숨기는 기능을 '조건부 로직'이라고 합니다. 유료 컨택트 폼 플러그인인 Quform에서는 이런 로직 기능이 기본적으로 제공됩니다.

워드프레스 Quform 컨택트 폼 플러그인 로직 기능 사용하기(조건부 로직)

Quform에서 로직 기능을 사용하려면 사용자가 선택하는 다른 필드의 값에 따라 표시하거나 숨길 필드의 설정 아이콘(톱니바퀴 모양의 아이콘)을 클릭합니다.

Quform 필드 설정 아이콘

해당 필드에 대한 설정 화면이 표시됩니다.

워드프레스 Quform의 로직 기능 사용하기

위와 같은 화면이 표시되면 Logic(1)을 선택하고 Enable conditional logic(2)을 켭니다.

(3)에서 "Show this field(이 필드 표시)"와 "Hide this field(이 필드 숨김)" 중에서 하나를 선택합니다. 조건에 따라 이 필드를 표시하려면 Show this field를, 조건에 따라 이 필드를 숨기려면 Hide this field를 선택하면 됩니다.

(4)에서는 "if all of these rules match(모든 규칙이 일치하는 경우)"와 "if any of these rules match(규칙 중 하나 이상이 일치하는 경우)" 중에서 하나를 선택합니다. 전자는 로직에서 AND의 개념이고, 후자는 OR의 개념입니다.

Add logic rule(5)을 클릭하여 새로운 로직 규칙을 추가하도록 합니다. 그러면 다른 필드 항목과 값을 조건으로 설정할 수 있습니다.

워드프레스 Quform 조건부 로직 사용하기

(1) 왼쪽에서 필드를 선택합니다. (3) 오른쪽에서 필드 값을 선택합니다. 예를 들어, 사용자가 선택하는 "분류"의 값이 "번역 문의"이면 이 필드를 표시하는 경우 위의 그림과 같이 설정하면 됩니다. 만약 "분류"의 값이 "번역 문의"가 아니라면, (2)에서 "is not"을 선택하도록 합니다. (2)에서 다음과 같은 옵션을 선택할 수 있습니다.

  • is (~인 경우)
  • is not (~이 아닌 경우)
  • is empty (값이 빈 경우)
  • is not empty (빈 값이 아닌 경우)
  • is greater than (~보다 큰 경우) - 이하 옵션을 선택하면 (3)에 값을 직접 입력해야 합니다.
  • is less than (~보다 작은 경우)
  • contains (~을 포함하는 경우)
  • starts with (~으로 시작하는 경우)
  • ends with (~으로 끝나는 경우)

조건을 적절히 조합하여 정교하게 로직을 만들 수 있습니다. 여러 개의 로직 규칙을 추가하려면 "Add logic rule"을 클릭하거나 맨 오른쪽의 플러그 아이콘을 클릭하면 됩니다.

무료 컨택트 폼 플러그인인 Contact Form 7을 사용하는 경우에는 Contact Form 7 – Conditional Fields라는 플러그인을 설치하면 조건부 필드를 추가할 수 있습니다.

참고:


2개 댓글

  1. Quform에서 동의함 버튼과 동의안함 버튼을 2개 넣어서 동의안함 버튼을 클릭시 동의함 버튼을 클릭하라고 할 수 있나요?

    1. 안녕하세요, 나그네님. 워드프레스에서 Quform 플러그인을 사용하는 경우 제 블로그의 문의 페이지처럼 동의 상자를 체크하지 않으면 경고를 표시하는 방법으로 진행하는 것이 무난할 것 같습니다.
      예시: https://www.screencast.com/t/4iXiVuAUyl

      만약 원하시는 대로 하시려면 jQuery를 사용하여 동의 안함 버튼을 체크하면 팝업 메시지를 표시를 할 수는 있을 것입니다.

      예시:
      https://stackoverflow.com/questions/6081608/jquery-check-if-it-is-clicked-or-not

댓글 남기기

* 이메일 주소는 공개되지 않습니다.