Drupal 8/9용 Webform 모듈 심층 분석

게시 됨: 2021-10-12

Webform 모듈은 Drupal을 위한 가장 강력하고 유연한 양식 빌더 및 제출 관리자입니다. 사이트 빌더는 복잡한 양식을 즉시 쉽게 만들 수 있습니다. 특정 수준의 기본 설정이 제공되며 요구 사항에 따라 사용자 지정할 수도 있습니다.

Drupal 8/9 사이트에서 Webform 모듈을 시작하는 데 도움이 되는 이 놀라운 블로그 - Drupal 8 Webform Module - A Brief Tutorial을 확인하십시오. 이렇게 하면 기본 사항을 쉽게 이해하는 데 도움이 됩니다.

Webform 모듈에는 많은 흥미로운 기능이 포함되어 있으며 여기에서 몇 가지를 언급하고 싶습니다.

웹 양식 모듈

웹 양식 기능

1. 형태 및 요소 변경

모든 양식, 요소 및 관련 설정은 각각의 후크를 사용하여 변경할 수 있습니다. 다음은 사용할 수 있는 몇 가지 후크이며 webform.api.php 파일에서 더 많은 것을 찾을 수 있습니다.

  • 폼 후크

◦ hook_webform_submission_form_alter()
◦ 웹 양식 제출 양식이 렌더링되기 전에 변경을 수행합니다.

  • 요소 후크

◦ hook_webform_element_alter()
◦ 웹 양식 요소를 변경합니다.

  • 옵션 후크

◦ hook_webform_options_alter()
◦ 웹 양식 옵션을 변경합니다.

  • 핸들러 후크

◦ hook_webform_handler_invoke_alter()
◦ 메소드가 호출될 때 웹 양식 핸들러에서 작동합니다.

  • 더 많은 후크…

◦ hook_webform_access_rules_alter() 등.
◦ 웹 양식 수준별로 관리해야 하는 액세스 규칙 목록을 변경합니다.

2. YAML 소스

Webform 모듈은 사람들이 YAML 마크업을 작성하여 양식을 작성할 수 있도록 하는 YAML 양식 모듈로 시작되었습니다. 어느 시점에서 YAML Form 모듈은 UI를 갖기 시작했고 Drupal 8용 Webform 모듈이 되었습니다.

  • YAML은 웹 양식의 요소를 빌드 및 대량 편집하기 위한 간단하고 배우기 쉬운 마크업 언어를 제공합니다.
  • (보기) 소스 페이지에서 개발자는 YAML 마크업을 사용하여 웹 양식의 렌더 배열을 편집할 수 있습니다. 개발자는 (보기) 소스 페이지를 사용하여 웹 양식의 레이블을 빠르게 변경하고, 여러 요소를 잘라내어 붙여넣고, 요소를 재정렬하고, 요소에 사용자 정의 속성 및 마크업을 추가하기 위해 웹 양식을 직접 코딩할 수 있습니다.
  • 다음은 문의 양식 및 해당 YAML 소스 코드의 예입니다.

끌어서 놓기 UI가 있는 문의 양식

드래그 앤 드롭 UI가 있는 연락처 양식

YAML 소스 코드

문의 양식의 YAML 소스 코드

3. 조건부 필드

Webform을 사용하면 양식 내의 요소에 조건부 논리를 추가할 수 있습니다. 양식 내 다른 요소의 값을 기반으로 요소의 가시성을 조건부로 처리해야 하는 작은 예를 살펴보겠습니다.

다음은 2단계 필드, '이메일' 및 '휴대전화 번호' 옵션이 있는 STEP 1 (무선 요소)이 있는 예제 양식입니다. '이메일'과 '휴대전화 번호'의 두 가지 요소가 있는 2 단계 (필드셋).

빌드 페이지

양식 작성 페이지

양식 보기 페이지

양식 보기 페이지

위의 예에서 1단계에서 '이메일' 옵션을 선택한 경우 '이메일' 필드를 표시하고, 1단계에서 '휴대전화 번호' 옵션을 선택한 경우 '휴대전화 번호' 필드를 표시하고 싶습니다.

이를 달성하려면 '이메일' 필드를 편집하고 '조건' 탭을 클릭하고 '상태'를 '표시'로 선택하고 '트리거/값'을 '단계 1 [라디오] 값이 이메일임'으로 설정합니다. 마찬가지로 동일한 단계에 따라 '모바일 번호' 필드에 조건부 논리를 추가하고 '트리거/값'을 'STEP 1 [Radios] 값은 mobile_number'로 설정합니다. Webform의 최종 모습은 다음과 같습니다.

이메일 요소 수정

조건부 논리 설정

1 단계

STEP 1 '이메일' 선택 시 폼 작성

2 단계

STEP 1 '휴대폰번호' 선택 시 폼 작성

4. 사용자 지정 옵션 속성

Webform을 사용하면 from 요소에 사용자 지정 옵션 속성을 추가할 수 있습니다.

양식 내 다른 요소의 값을 기반으로 라디오 요소의 옵션을 조건부로 처리하려는 시나리오를 상상해 보십시오. 어떻게 하시겠습니까?

글쎄, 나는 UI에서 조건부 논리 설정을 통해 그것을 처리 할 수있는 방법을 찾지 못했습니다. 그러나 요소에 '사용자 지정 옵션 속성'을 설정하는 조항이 있습니다. 여기서 YAML 코드를 사용하여 요소 내의 옵션을 대상으로 하는 필수 조건부 논리를 작성합니다.

다음은 두 개의 라디오 요소를 볼 수 있는 예이며 첫 번째 요소에서 선택한 옵션에 따라 두 번째 요소 내 옵션의 가시성이 변경되어야 합니다.

양식 작성 페이지

양식 작성 페이지

사용자 정의 옵션

사용자 지정 옵션 속성을 추가하기 전의 양식 보기 페이지:

  • 'Type A'를 선택하면 두 번째 요소에서 'Option 1'과 'Option 2'가 표시되어야 합니다. 마찬가지로 '유형 B'를 선택하면 '옵션 3'과 '옵션 4'가 표시되어야 합니다. 두 번째 요소를 편집하려면 '고급' 탭으로 이동하여 '옵션(사용자 정의) 속성' 섹션으로 스크롤한 다음 YAML에 필요한 논리를 작성하십시오.
옵션 요소옵션 요소 편집

옵션 속성 설정

유형 선택

'A형' 선택 시 형태

유형 B를 선택하십시오

'B형' 선택 시 형태

5. 웹 양식 제출 이메일 처리기

  • 이메일 핸들러

이메일 처리기는 이메일을 통해 웹 양식 제출을 보냅니다. 웹 양식에 이메일 처리기를 추가하려면 '설정'으로 이동한 다음 '이메일/처리기' 탭으로 이동합니다. 다음으로 '이메일 추가 / 핸들러 추가' 버튼을 클릭합니다.

이메일 핸들러

이메일 핸들러 추가

  • 아래 이미지와 같이 '일반' 탭에서 '제목'을 추가하고 '보내기'와 '보내기' 세부사항을 설정합니다. 필요에 따라 '제목' 및 '본문' 메시지를 추가하고 구성 양식을 저장합니다.
이메일 확인확인 처리기이메일 확인 핸들러메세지제목 설명

그게 다야. 양식이 제출될 때마다 핸들러가 시작됩니다.

  • 웹 양식에 조건부 이메일 핸들러를 설정할 수도 있습니다. 즉, 양식 내의 특정 요소 값에 따라 다른 이메일 핸들러를 트리거할 수 있습니다.
  • 예를 들어, 값이 'Type 1' 및 'Type 2'인 'Select' 요소를 고려해 보겠습니다. 사용자가 '유형 1'을 제출하면 '받는 사람' 주소를 ' [이메일 보호] '로 설정한 '이메일 - 유형 1' 처리기를 트리거합니다. 사용자가 '유형 2'를 제출하면 '받는 사람' 주소를 ' [이메일 보호] '로 설정한 '이메일 - 유형 2' 처리기를 트리거합니다.
  • 이메일 처리기에 조건부 논리를 추가하려면 처리기를 하나 만들고 이름을 '이메일 - 유형 1'로 지정합니다. 'To' 주소를 ' [email protected] '으로 설정하고, 'Conditions' 탭으로 전환하고, 'State'를 'Visible'로 선택하고, 'Trigger/Value'를 'Select Type [Select] 값은 type_1'로 설정합니다.
  • 마찬가지로 두 번째 처리기를 만들고 이름을 '이메일 - 유형 2'로 지정합니다. '받는 사람' 주소를 ' [이메일 보호됨] '으로 설정하고, '조건' 탭으로 전환하고, '상태'를 '표시'로 선택하고, '트리거/값'을 '유형 선택 [선택] 값이 type_2'로 설정합니다.
이메일 유형

  • 예약된 이메일 핸들러

    • Webform 모듈의 전자 메일 처리기를 확장하여 전자 메일을 예약할 수 있도록 합니다. 이 기능을 사용하려면 'Webform Scheduled Email Handler' 하위 모듈을 활성화하십시오.
    • 양식 제출 이메일 전송을 예약하려면 '처리기 추가' 버튼을 클릭하십시오. 여기에서 '예약 이메일' 처리기를 선택합니다.
핸들러 선택

일반 '이메일 처리기'와 비교하여 '예약된 이메일' 처리기에는 하나의 추가 구성 설정만 있습니다. 일반 설정 탭에서 이메일 날짜 예약을 추가하는 것입니다.

이메일 처리기 예약

예약된 이메일 핸들러

핸들러를 트리거할 날짜를 설정하고 다음 cron이 실행되면 이메일이 전송됩니다!

도움말 찾기

webform 모듈에 대한 도움을 구할 수 있는 다양한 방법이 있습니다. 다음은 몇 가지 소스 목록입니다.

  • 문서, 요리책 및 스크린캐스트
    • https://www.drupal.org/docs/8/modules/webform
  • 웹 양식 문제 대기열
    • https://www.drupal.org/project/issues/webform
  • 드루팔 답변
    • http://drupal.stackexchange.com
  • 슬랙 채널
    • Drupal slack 작업 공간 내의 #webform 채널에서 Webform 모듈에 대한 쿼리를 언제든지 게시할 수 있습니다. 커뮤니티의 모든 사람, 심지어 모듈 관리자 자신도 항상 주변에 있으며 문제를 안내할 만큼 친절합니다.

Drupal 8/9 Webform 모듈에 대한 끊임없는 지원에 대해 Jacob Rockowitz에게 큰 박수를 보냅니다. Webform은 그가 없었다면 지금의 모습이 아니었을 것입니다.