Show Menu
화제×

자습서:적응형 양식 만들기

이 자습서는 첫 번째 적응형 양식 만들기 시리즈의 한 단계입니다 . 전체 자습서 사용 사례를 이해하고, 실행하고, 시연하려면 연순의 순서로 시리즈를 따르는 것이 좋습니다.

자습서 정보

적응형 양식은 동적이고 응답 속도가 빠른 새로운 생성 양식입니다. 적응형 양식을 사용하여 개인화된 경험을 전달할 수 있습니다. 또한 사용 통계 및 캠페인 관리를 위해 적응형 양식 Adobe Analytics 을 통합할 Adobe Campaign 수 있습니다. 적응형 양식 기능에 대한 자세한 내용은 적응형 양식 작성 소개를 참조하십시오 .
적합한 프로세스를 진행할 때 양식을 손쉽게 만들고 관리할 수 있습니다. 이 문서에서는 다음 방법을 알아봅니다.
문서의 끝 부분에 다음과 유사한 양식이 있습니다. form-preview-mobile.gif

1단계:적응형 양식 만들기

  1. AEM 작성자 인스턴스에 로그인하고 Adobe Experience Manager > Forms > Forms ​및 문서로 이동합니다. 기본 URL은 http://localhost:4502/aem/forms.html/content/dam/formsanddocuments 입니다 .
  2. 만들기 누르고 적응형 양식을 선택합니다 . 템플릿을 선택하는 옵션이 나타납니다. 빈 템플릿을 눌러 선택하고 다음을 누릅니다 .
  3. 속성 추가 옵션이 나타납니다. #이름 필드는 필수입니다.
    • 제목: 제목 Add new or update shipping address 필드 ​에서 지정합니다. 제목 필드는 양식의 표시 이름을 지정합니다. 제목은 AEM Forms 사용자 인터페이스에서 양식을 식별하는 데 도움이 됩니다.
    • 이름: 이름 shipping-address-add-update-form 필드 에서 지정합니다 . 이름 필드는 양식의 이름을 지정합니다. 지정한 이름의 노드가 저장소에 생성됩니다. 제목을 입력하기 시작하면 이름 필드에 대한 값이 자동으로 생성됩니다. 제안된 값을 변경할 수 있습니다. 이름 필드에는 영숫자, 하이픈 및 밑줄만 포함할 수 있습니다. 잘못된 입력은 모두 하이픈으로 대체됩니다.
  4. 만들기를 누릅니다 . 응용 양식이 만들어지고 편집할 양식을 여는 대화 상자가 나타납니다. 열기 눌러 새로 만든 양식을 새 탭에서 엽니다. 편집할 양식이 열립니다. 필요에 따라 새로 만든 양식을 사용자 정의하는 사이드바를 표시합니다.
    적응형 양식 작성 인터페이스 및 사용 가능한 구성 요소에 대한 자세한 내용은 적응형 양식 작성 소개를 참조하십시오 .

3단계:구성 요소를 추가하여 정보 캡처 및 표시

구성 요소는 적응형 양식의 기본 요소를 만듭니다. AEM Forms 는 정보를 캡처하고 적응형 양식으로 표시하는 많은 구성 요소를 제공합니다. Treeexpandall에서 으로 구성 요소를 드래그할 수 있습니다. 사용 가능한 구성 요소 및 해당 기능에 대한 자세한 내용은 응용 양식 작성 소개를 참조하십시오 .
  1. 숫자 상자 구성 요소를 응용 양식으로 드래그합니다. 바닥글 구성 요소 앞에 놓습니다. 구성 요소의 속성을 열고, 구성 요소의 제목을 다음으로 변경하고, Customer ID ​요소 이름을 변경하고, # 를 활성화합니다 옵션을 활성화하고, #customer_ID # ** . # HTML5 번호 입력 유형 입력 유형 옵션 및 tapaem_6_6_forms_save를 탭합니다.
  2. 세 개의 텍스트 상자 구성 요소를 응용 양식으로 드래그합니다. 바닥글 구성 요소 앞에 놓습니다. 이러한 텍스트 상자에 대해 다음 속성을 설정합니다.:
    속성 텍스트 상자 1 텍스트 상자 2 텍스트 상자 3
    제목 이름 배송 주소 상태
    요소 이름 customer_Name customer_Shipping_Address customer_State
    필수 필드 활성화됨 활성화됨 활성화됨
    여러 줄 허용 비활성화 활성화됨 비활성화
  3. 바닥글 구성 요소 앞에 숫자 상자 구성 요소를 드래그합니다. 구성 요소의 속성을 열고 아래 표에 나열된 값을 설정합니다. .
    속성
    제목
    우편 번호
    요소 이름
    customer_ZIPCode
    최대 자릿수
    6
    필수 필드
    활성화됨
    패턴 유형 표시
    패턴 없음
  4. 바닥글 구성 요소 앞에 이메일 구성 요소를 드래그합니다. 구성 요소의 속성을 열고 아래 표에 나열된 값을 설정한 다음 .
    속성
    제목
    이메일
    요소 이름
    customer_Email
    필수 필드
    활성화됨
  5. 바닥글 구성 요소 앞에 파일 첨부 구성 요소를 드래그합니다. 구성 요소의 속성을 열고 아래 표에 나열된 값을 설정한 다음 .
    속성
    제목 정부 승인 주소 증명
    요소 이름 customer_Address_Proof
    필수 필드 활성화됨
  6. 전송 단추 구성 요소를 응용 양식으로 드래그합니다. 바닥글 구성 요소 앞에 놓습니다. 구성 요소의 속성을 열고 요소 이름을 (으)로 변경하고 address_addition_update_submit aem_6_3_forms_save를 누릅니다. 양식의 레이아웃이 완료되었으며 양식은 다음과 같습니다.

4단계:적응형 양식의 제출 작업 구성

사용자가 적응형 양식의 제출 단추를 누를 때 제출 작업이 트리거됩니다. 전송 작업을 사용하여 양식 데이터를 로컬 저장소에 저장하고, 양식 데이터를 REST 종단점에 보내고, 양식 데이터를 이메일로 보내는 등의 작업을 수행할 수 있습니다. 적응형 양식에서는 즉시 사용 가능한 몇 가지 더 많은 전송 작업을 제공합니다. 자세한 내용은 제출 작업 구성을 참조하십시오 .
다음 단계를 사용하여 양식의 이메일 제출 작업 및 데모 제출 작업을 구성할 수 있습니다.
  1. 이메일 서버를 구성합니다. 자세한 내용은 이메일 알림 구성을 참조하십시오 .
  2. 컨텐츠 브라우저에서 양식 컨테이너를 누르고 . 속성 브라우저가 왼쪽에 열립니다.
  3. 제출 > 작업 제출으로 이동합니다 . # **. 다음 값을 지정하고 .
    속성
    시작
    ${customer_Email}
    제목
    확인:We.Retail 웹 사이트에 배송 주소를 추가했습니다.
    이메일 템플릿
    안녕하세요. 계정 ${customer_Name} 의 배송 주소로 다음 주소가 추가됩니다.
    ${customer_Name} , ${customer_Shipping_Address} , ${customer_State} , ${customer_ZIPCode}
    Igns, We.Retail
    첨부 파일 포함
    활성화됨
    양식 준비가 되었습니다. 이제 양식을 미리 보고 기능을 테스트할 수 있습니다. 이 자습서에 언급된 이름을 사용하고 AEM Forms 서버가 실행되는 시스템에서 양식에 액세스한 경우 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html에서 양식을 사용할 수 있습니다 .

5단계:적응형 양식 미리 보기 및 제출

미리 보기 옵션 사용하여 양식의 모양과 동작을 평가할 수 있습니다. 미리 보기 모드에서 양식을 제출하고 양식에 적용된 유효성 검사를 확인할 수도 있습니다. 예를 들어 필수 필드를 비워 둘 때 오류가 표시되는 경우
응용 양식에서는 다양한 장치에 대한 양식의 경험을 에뮬레이션하는 옵션도 제공합니다. 예: iPhone, iPad 및 Desktop. 서로 연동하여 미리 보기 에뮬레이터 옵션을 모두 사용하여 화면 크기가 다른 장치에 대한 양식을 미리 볼 수 있습니다.
  1. 양식 편집기 오른쪽에 있는 미리 보기 옵션을 누릅니다. 양식이 미리 보기 모드로 열립니다. 자습서에 언급된 이름을 사용한 경우 양식의 미리 보기 URL은 http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled입니다. jcr:content?wcmmode=disabled
  2. 눈금자 사용하여 다양한 장치에서 양식이 어떻게 보이는지 봅니다.
  3. 양식의 필드를 채우고 제출을 누릅니다 . 양식이 제출되고 기본 감사 페이지로 리디렉션됩니다 . 사용자 지정 감사 페이지를 지정할 수도 있습니다. 자세한 내용은 리디렉션 페이지 구성을 참조하십시오 .
주소를 추가하는 적응형 양식이 준비되었습니다. 자습서에 언급된 이름을 사용하고 AEM Forms 서버를 실행 중인 시스템에서 양식에 액세스한 경우 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html에서 양식을 사용할 수 있습니다 .