이 자습서는 첫 번째 적응형 양식 만들기 시리즈의 한 단계입니다. 전체 자습서 사용 사례를 이해하고, 실행하고, 시연하기 위해 시리즈를 시간순으로 따르는 것이 좋습니다.
적응형 양식은 동적이고 응답 속도가 빠른 차세대 양식입니다. 적응형 양식을 사용하여 개인화된 경험을 제공할 수 있습니다. 또한 사용 통계를 위해 Adobe Analytics과 적응형 양식을 통합하고 캠페인 관리를 위한 Adobe Campaign을 통합할 수 있습니다. 적응형 양식 기능에 대한 자세한 내용은 적응형 양식 작성 소개를 참조하십시오.
적절한 프로세스를 진행할 때 양식을 손쉽게 만들고 관리할 수 있습니다. 이 문서에서는 다음 방법을 알아봅니다.
문서의 끝 부분에 다음과 유사한 양식이 있습니다.
[ ](assets/form-preview-mobile.gif)
AEM 작성자 인스턴스에 로그인하고 Adobe Experience Manager > Forms > Forms & 문서로 이동합니다. 기본 URL은 http://localhost:4502/aem/forms.html/content/dam/formsanddocuments입니다.
만들기를 누르고 적응형 양식을 선택합니다. 템플릿을 선택하는 옵션이 나타납니다. 빈 템플릿을 눌러 선택하고 다음을 누릅니다.
속성 추가에 대한 옵션이 나타납니다. 제목 및 이름 필드는 필수입니다.
Add new or update shipping address
필드에 지정합니다. 제목 필드는 양식의 표시 이름을 지정합니다. 제목은 AEM Forms 사용자 인터페이스에서 양식을 식별하는 데 도움이 됩니다.shipping-address-add-update-form
에 지정합니다. 이름 필드는 양식의 이름을 지정합니다. 지정된 이름의 노드가 저장소에 생성됩니다. 제목을 입력하기 시작하면 이름 필드에 대한 값이 자동으로 생성됩니다. 제안된 값을 변경할 수 있습니다. 이름 필드에는 영숫자, 하이픈 및 밑줄만 포함할 수 있습니다. 잘못된 입력은 모두 하이픈으로 바뀝니다.만들기를 누릅니다. 적응형 양식이 만들어지고 편집할 양식을 여는 대화 상자가 나타납니다. 열기를 눌러 새로 만든 양식을 새 탭에서 엽니다. 편집할 양식이 열립니다. 또한 필요에 따라 새로 만든 양식을 사용자 정의하는 사이드바를 표시합니다.
적응형 양식 작성 인터페이스 및 사용 가능한 구성 요소에 대한 자세한 내용은 적응형 양식 작성 소개를 참조하십시오.
AEM Forms은 적응형 양식에 대한 정보를 표시하는 여러 구성 요소를 제공합니다. 머리글 및 바닥글 구성 요소를 사용하면 일관된 모양과 느낌을 양식에 제공할 수 있습니다. 머리글에는 일반적으로 법인의 로고, 양식 제목 및 요약이 포함됩니다. 바닥글은 일반적으로 저작권 정보와 다른 페이지에 대한 링크를 포함합니다.
>
을 누릅니다. 구성 요소 브라우저가 열립니다. 구성 요소 브라우저의 헤더 구성 요소를 적응형 양식으로 드래그합니다.
로고를 누릅니다. 도구 모음이 나타납니다. 도구 모음에서 을 탭하고 We.Retail을 입력한 다음
를 탭합니다.
이미지를 누릅니다. 도구 모음이 나타납니다. 을 누릅니다. 화면 왼쪽에 속성 브라우저가 열립니다. 로고 이미지를 찾아 업로드합니다.
를 누릅니다. 이미지가 헤더에 나타납니다.
파일 가져오기를 눌러 이 아티클에 사용된 로고를 다운로드할 수 있습니다.
의 바닥글 구성 요소를 적응형 양식으로 드래그합니다. 이 단계에서 양식은 다음과 같습니다.
구성 요소는 적응형 양식의 기본 요소를 만듭니다. AEM Forms은 적응형 양식으로 정보를 캡처하고 표시하는 다양한 구성 요소를 제공합니다. 구성 요소를 에서 양식으로 드래그할 수 있습니다. 사용 가능한 구성 요소 및 해당 기능에 대한 자세한 내용은 적응형 양식 작성 소개를 참조하십시오.
Customer ID
으로 변경하고, 요소 이름을 customer_ID
로 변경하고, 필수 필드 옵션을 활성화하고 HTML5 번호 입력 유형 사용 옵션을 활성화하고 <a를 탭합니다. 10/>aem_6_3_forms_save](/docs/experience-manager-64/assets/aem_6_3_forms_save.png?lang=ko).![속성 | 텍스트 상자 1 |
텍스트 상자 2 |
텍스트 상자 3 |
제목 | 이름 |
배송 주소 | 상태 |
요소 이름 | customer_Name |
customer_Shipping_Address | customer_state |
필수 필드 | 활성화됨 | 활성화됨 | 활성화됨 |
여러 줄 허용 |
비활성화 | 활성화됨 | 비활성화 |
바닥글 구성 요소 앞에 숫자 상자 구성 요소를 드래그합니다. 구성 요소의 속성을 열고 아래 표에 나열된 값을 설정하고 를 누릅니다.
속성 | 값 |
---|---|
제목 | 우편 번호 |
요소 이름 | customer_ZIPCode |
최대 자릿수 | 6 |
필수 필드 | 활성화됨 |
패턴 유형 표시 | 패턴 없음 |
바닥글 구성 요소 앞에 이메일 구성 요소를 드래그합니다. 구성 요소의 속성을 열고 아래 표에 나열된 값을 설정한 다음 를 누릅니다.
속성 | 값 |
---|---|
제목 | 이메일 |
요소 이름 | customer_Email |
필수 필드 | 활성화됨 |
바닥글 구성 요소 앞에 첨부 파일 구성 요소를 드래그합니다. 구성 요소의 속성을 열고 아래 표에 나열된 값을 설정한 다음 를 누릅니다.
속성 | 값 |
제목 | 정부 승인 주소 증명 |
요소 이름 | customer_Address_Proof |
필수 필드 | 활성화됨 |
제출 단추 구성 요소를 적응형 양식으로 드래그합니다. 바닥글 구성 요소 앞에 배치합니다. 구성 요소의 속성을 열고 요소 이름을 address_addition_update_submit으로 변경하고 를 누릅니다. 양식의 레이아웃이 완료되었으며 양식은 다음과 같습니다.
사용자가 적응형 양식의 [제출] 단추를 누르면 제출 작업이 트리거됩니다. 제출 작업을 사용하여 양식 데이터를 로컬 저장소에 저장하고, 양식 데이터를 REST 종단점으로 보내고, 양식 데이터를 이메일로 보내는 등의 작업을 수행할 수 있습니다. 적응형 양식에서는 즉시 사용 가능한 몇 가지 제출 동작을 제공합니다. 자세한 내용은 제출 작업 구성을 참조하십시오.
다음 단계를 사용하여 전자 메일 제출 작업을 구성하고 양식의 데모 제출 작업을 구성할 수 있습니다.
이메일 서버를 구성합니다. 자세한 내용은 이메일 알림 구성을 참조하십시오.
/content/help/en/experience-manager/6-4/sites-administering/notification.html
콘텐트 브라우저에서 양식 컨테이너를 누르고 을 누릅니다. 속성 브라우저가 왼쪽에 열립니다.
제출 > 제출 작업으로 이동합니다. 이메일 보내기를 선택합니다. 다음 값을 지정하고 를 누릅니다.
속성 | 값 |
---|---|
시작 | 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에서 사용할 수 있습니다.
미리 보기 옵션을 사용하여 양식의 모양과 동작을 평가할 수 있습니다. 미리 보기 모드에서 양식을 제출하고 양식에 적용된 유효성 검사를 확인할 수도 있습니다. 예를 들어 필수 필드를 비워 둘 때 오류가 표시되는 경우
적응형 양식에서는 다양한 장치에 대한 양식의 경험을 에뮬레이션하는 옵션도 제공합니다. 예: iPhone, iPad 및 Desktop. 미리 보기 및 에뮬레이터 옵션을 모두 함께 사용하여 서로 다른 화면 크기의 장치에 대한 양식을 미리 볼 수 있습니다.
주소를 추가하는 적응형 양식이 준비되었습니다. 자습서에 언급된 이름을 사용하고 AEM Forms 서버를 실행하는 시스템에서 양식에 액세스한 경우 이 양식은 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html에서 사용할 수 있습니다.