자습서:응용 양식 만들기

02-create-adaptive-form-main-image

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

자습서 정보

적응형 양식은 동적이고 응답 속도가 빠른 차세대 양식입니다. 적응형 양식을 사용하여 개인화된 경험을 제공할 수 있습니다. 또한 사용 통계를 위해 Adobe Analytics과 적응형 양식을 통합하고 캠페인 관리를 위한 Adobe Campaign을 통합할 수 있습니다. 적응형 양식 기능에 대한 자세한 내용은 적응형 양식 작성 소개를 참조하십시오.

적절한 프로세스를 진행할 때 양식을 손쉽게 만들고 관리할 수 있습니다. 이 문서에서는 다음 방법을 알아봅니다.

문서의 끝 부분에 다음과 유사한 양식이 있습니다.

[ ![](do-not-localize/form-preview-mobile.gif)](assets/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. 만들기​를 누릅니다. 적응형 양식이 만들어지고 편집할 양식을 여는 대화 상자가 나타납니다. 열기​를 눌러 새로 만든 양식을 새 탭에서 엽니다. 편집할 양식이 열립니다. 또한 필요에 따라 새로 만든 양식을 사용자 정의하는 사이드바를 표시합니다.

    적응형 양식 작성 인터페이스 및 사용 가능한 구성 요소에 대한 자세한 내용은 적응형 양식 작성 소개를 참조하십시오.

    새롭게 생성된 적응형 양식

AEM Forms은 적응형 양식에 대한 정보를 표시하는 여러 구성 요소를 제공합니다. 머리글 및 바닥글 구성 요소를 사용하면 일관된 모양과 느낌을 양식에 제공할 수 있습니다. 머리글에는 일반적으로 법인의 로고, 양식 제목 및 요약이 포함됩니다. 바닥글은 일반적으로 저작권 정보와 다른 페이지에 대한 링크를 포함합니다.

  1. toggle-side-panel > treeexpandall을 누릅니다. 구성 요소 브라우저가 열립니다. 구성 요소 브라우저의 헤더 구성 요소를 적응형 양식으로 드래그합니다.

  2. 로고​를 누릅니다. 도구 모음이 나타납니다. 도구 모음에서 aem_6_3_edit을 탭하고 We.Retail​을 입력한 다음 aem_6_3_forms_save를 탭합니다.

  3. 이미지를 누릅니다. 도구 모음이 나타납니다. cmppr을 누릅니다. 화면 왼쪽에 속성 브라우저가 열립니다. 로고 이미지를 찾아 업로드합니다. aem_6_3_forms_save를 누릅니다. 이미지가 헤더에 나타납니다.

    파일 가져오기를 눌러 이 아티클에 사용된 로고를 다운로드할 수 있습니다.

    파일 가져오기

  4. treeexpandall의 바닥글 구성 요소를 적응형 양식으로 드래그합니다. 이 단계에서 양식은 다음과 같습니다.

    adaptive-form-with-headers-and-footers

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

구성 요소는 적응형 양식의 기본 요소를 만듭니다. AEM Forms은 적응형 양식으로 정보를 캡처하고 표시하는 다양한 구성 요소를 제공합니다. 구성 요소를 treeexpandall에서 양식으로 드래그할 수 있습니다. 사용 가능한 구성 요소 및 해당 기능에 대한 자세한 내용은 적응형 양식 작성 소개를 참조하십시오.

  1. 숫자 상자 구성 요소를 적응형 양식으로 드래그합니다. 바닥글 구성 요소 앞에 배치합니다. 구성 요소의 속성을 열고, 구성 요소의 제목​을 Customer ID​으로 변경하고, 요소 이름​을 customer_ID​로 변경하고, 필수 필드 옵션을 활성화하고 HTML5 번호 입력 유형 사용 옵션을 활성화하고 <a를 탭합니다. 10/>aem_6_3_forms_save🔗.
  2. 3개의 텍스트 상자 구성 요소를 적응형 양식으로 드래그합니다. 바닥글 구성 요소 앞에 배치합니다. 이러한 텍스트 상자에 대해 다음 속성을 설정합니다.:
속성 텍스트 상자 1
 텍스트 상자 2
 텍스트 상자 3
제목 이름
 배송 주소 상태
요소 이름 customer_Name
 customer_Shipping_Address customer_state
필수 필드 활성화됨 활성화됨 활성화됨
여러 줄 허용
 비활성화 활성화됨 비활성화

  1. 바닥글 구성 요소 앞에 숫자 상자 구성 요소를 드래그합니다. 구성 요소의 속성을 열고 아래 표에 나열된 값을 설정하고 aem_6_3_forms_save를 누릅니다.

    속성 값
    제목 우편 번호
    요소 이름 customer_ZIPCode
    최대 자릿수 6
    필수 필드 활성화됨
    패턴 유형 표시 패턴 없음

  2. 바닥글 구성 요소 앞에 이메일 구성 요소를 드래그합니다. 구성 요소의 속성을 열고 아래 표에 나열된 값을 설정한 다음 aem_6_3_forms_save를 누릅니다.

    속성 값
    제목 이메일
    요소 이름 customer_Email
    필수 필드 활성화됨

  3. 바닥글 구성 요소 앞에 첨부 파일 구성 요소를 드래그합니다. 구성 요소의 속성을 열고 아래 표에 나열된 값을 설정한 다음 aem_6_3_forms_save를 누릅니다.

속성 값
제목 정부 승인 주소 증명
요소 이름 customer_Address_Proof
필수 필드 활성화됨

  1. 제출 단추 구성 요소를 적응형 양식으로 드래그합니다. 바닥글 구성 요소 앞에 배치합니다. 구성 요소의 속성을 열고 요소 이름을 address_addition_update_submit​으로 변경하고 aem_6_3_forms_save를 누릅니다. 양식의 레이아웃이 완료되었으며 양식은 다음과 같습니다.

    adaptive-form-with-all-the-components

4단계:응용 양식에 대한 제출 작업을 구성합니다.

사용자가 적응형 양식의 [제출] 단추를 누르면 제출 작업이 트리거됩니다. 제출 작업을 사용하여 양식 데이터를 로컬 저장소에 저장하고, 양식 데이터를 REST 종단점으로 보내고, 양식 데이터를 이메일로 보내는 등의 작업을 수행할 수 있습니다. 적응형 양식에서는 즉시 사용 가능한 몇 가지 제출 동작을 제공합니다. 자세한 내용은 제출 작업 구성을 참조하십시오.

다음 단계를 사용하여 전자 메일 제출 작업을 구성하고 양식의 데모 제출 작업을 구성할 수 있습니다.

  1. 이메일 서버를 구성합니다. 자세한 내용은 이메일 알림 구성을 참조하십시오.

    /content/help/en/experience-manager/6-4/sites-administering/notification.html

  2. 콘텐트 브라우저에서 양식 컨테이너​를 누르고 cmppr을 누릅니다. 속성 브라우저가 왼쪽에 열립니다.

  3. 제출 > 제출 작업​으로 이동합니다. 이메일 보내기​를 선택합니다. 다음 값을 지정하고 aem_6_3_forms_save를 누릅니다.

    속성 값
    시작 donotreply@weretail.com
    끝 ${customer_Email}
    제목 확인:We.Retail 웹 사이트에 배송 주소를 추가했습니다.
    이메일 템플릿 ${customer_Name}님, 다음 주소가 계정에 대한 배송 주소로 추가됩니다.
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    감사합니다, 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입니다.
  2. 다양한 장치에서 양식이 어떻게 보이는지 보려면 눈금자를 사용합니다.
  3. 양식의 필드를 채우고 제출​을 누릅니다. 양식이 제출되고 기본 감사 인사 페이지로 리디렉션됩니다. 사용자 지정 감사 페이지를 지정할 수도 있습니다. 자세한 내용은 리디렉션 페이지 구성을 참조하십시오.

주소를 추가하는 적응형 양식이 준비되었습니다. 자습서에 언급된 이름을 사용하고 AEM Forms 서버를 실행하는 시스템에서 양식에 액세스한 경우 이 양식은 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html에서 사용할 수 있습니다.

이 페이지에서는

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now