웹 양식의 정적 요소

사용자가 양식의 페이지에 상호 작용이 없는 요소를 포함할 수 있습니다.이미지, HTML 컨텐츠, 가로 막대 또는 하이퍼텍스트 링크와 같은 정적 요소입니다. 이러한 요소는 Static elements​을 선택하여 도구 모음의 첫 번째 단추를 통해 만들어집니다.

다음 유형의 필드를 사용할 수 있습니다.

  • 이전에 제공된 답변(양식의 컨텍스트) 또는 데이터베이스를 기반으로 하는 값입니다.

  • 하이퍼텍스트 링크, HTML, 가로 막대. HTML 콘텐츠 삽입을(를) 참조하십시오.

  • 리소스 라이브러리 또는 사용자가 액세스할 수 있는 서버에 저장된 이미지입니다. 이미지 삽입을(를) 참조하십시오.

  • 클라이언트측 및/또는 서버측에서 실행되는 스크립트입니다. 클라이언트 측에서 올바로 실행되도록 하려면 JavaScript로 작성하고 대부분의 브라우저와 호환되어야 합니다.

    노트

    서버측에서 스크립트는 캠페인 JSAPI 설명서에 정의된 함수를 사용할 수 있습니다.

HTML 컨텐츠 삽입

양식 페이지에 HTML 컨텐츠를 포함할 수 있습니다.하이퍼텍스트 링크, 이미지, 서식이 지정된 단락, 비디오 등

HTML 편집기를 사용하면 양식 페이지에 삽입할 컨텐트를 입력할 수 있습니다. 편집기를 열려면 Static elements > HTML 을 클릭합니다.

컨텐츠를 직접 입력하고 포맷하거나 소스 코드 창을 표시하여 일부 외부 컨텐츠에 붙여넣을 수 있습니다. "소스 코드" 모드로 전환하려면 도구 모음에서 첫 번째 아이콘을 클릭합니다.

데이터베이스 필드를 삽입하려면 개인화 단추를 사용합니다.

노트

HTML 편집기에 입력된 문자열은 Texts 하위 탭에 정의된 경우에만 번역됩니다. 그렇지 않으면 수집되지 않습니다. 자세한 내용은 웹 양식 번역을 참조하십시오.

다음 예와 같이 편집 창의 필드를 채웁니다.

하이퍼텍스트 링크를 추가하려면 Static elements > Link​로 이동합니다.

  • Label​은 양식 페이지에 표시될 하이퍼텍스트 링크의 컨텐츠입니다.

  • URL​은 원하는 주소입니다(예::😃.https://www.adobe.com(웹 사이트용) 또는 info@adobe.com에서 메시지를 보냅니다.

  • Window 필드를 사용하면 사이트의 경우 링크에 대한 표시 모드를 선택할 수 있습니다. 새 창, 현재 창 또는 다른 창에서 링크를 열 수 있습니다.

  • 아래와 같이 도구 설명을 추가할 수 있습니다.

  • 링크를 단추나 이미지로 표시하도록 선택할 수 있습니다. 이렇게 하려면 Type 필드에서 표시 유형을 선택합니다.

기본적으로 링크는 URL 유형 작업과 연관되어 URL 필드에 링크 대상 주소를 입력할 수 있습니다.

사용자가 링크를 클릭하여 다음을 수행할 수 있도록 링크에 대한 다른 작업을 정의할 수 있습니다.

  • 페이지 새로 고침

    이렇게 하려면 Action 필드의 드롭다운 상자에서 Refresh page 옵션을 선택합니다.

  • 다음/이전 페이지 표시

    이렇게 하려면 Action 필드의 드롭다운 상자에서 Next page 또는 Previous page 옵션을 선택합니다.

    링크로 대체하려면 Next 및/또는 Back 단추를 숨길 수 있습니다. 이 페이지를 참조하십시오.

    링크는 기본적으로 사용되는 Next 단추를 대체합니다.

  • 다른 페이지 표시

    Enable a transition 옵션을 사용하면 Transition 필드에서 선택한 나가는 전환과 연관된 특정 페이지를 표시할 수 있습니다.

    기본적으로 한 페이지에는 출력 전환이 하나만 있습니다. 새 전환을 만들려면 페이지를 선택한 다음 아래와 같이 Output transitions 섹션에서 Add 단추를 클릭합니다.

    다이어그램에서 이 추가는 다음과 같습니다.

    노트

    웹 양식의 페이지 순서 지정에 대한 자세한 내용은 웹 양식 페이지 순서 지정 정의를 참조하십시오.

  • Facebook 프로필에서 가져온 데이터로 양식 필드 미리 로드

    주의

    이 함수는 Social Marketing 응용 프로그램을 설치한 경우에만 사용할 수 있습니다. 이 옵션을 사용하려면 Facebook Connect 유형 외부 계정과 함께 Facebook 애플리케이션을 만들어야 합니다. 자세한 정보는 이 페이지를 참조하십시오.

    Preload with Facebook 옵션을 사용하면 Facebook 프로필 정보를 사용하여 필드를 미리 로드하는 단추를 양식에 삽입할 수 있습니다.

    사용자가 Fill in automatically 단추를 클릭하면 Facebook 권한 요청 창이 열립니다.

    노트

    외부 계정을 구성할 때 확장 권한 목록을 변경할 수 있습니다. 확장 권한을 입력하지 않으면 Facebook은 기본적으로 기본 프로필 정보를 전달합니다.
    확장 권한 목록 및 해당 구문을 보려면 다음을 클릭하십시오.https://developers.facebook.com/docs/reference/api/permissions/

    사용자가 정보를 공유하기로 동의하면 양식 필드가 미리 로드됩니다.

이러한 사용 사례를 위해 다음 요소로 구성된 웹 응용 프로그램을 만들었습니다.

  • 양식을 포함하는 페이지
  • Record 활동
  • End 활동

미리 로드 단추를 추가하려면 다음 단계를 적용합니다.

  1. 양식을 만듭니다.

  2. 양식의 필드와 동일한 수준으로 이동한 후 링크를 추가합니다.

  3. 레이블을 입력하고 Button 유형을 선택합니다.

  4. Action 필드로 이동하여 Preload with Facebook​을 선택합니다.

  5. Application 필드로 이동하여 이전에 만든 외부 계정 유형을 선택합니다. Facebook Connect 자세한 정보는 이 페이지를 참조하십시오.

HTML 컨텐츠 개인화

이전 페이지에 기록된 데이터로 양식 페이지의 HTML 컨텐츠를 개인화할 수 있습니다. 예를 들어 자동차 보험 웹 양식을 만들 수 있습니다. 이 웹 양식을 통해 자동차 브랜드 및 연락처 정보를 제공할 수 있습니다.

개인화 필드를 사용하여 사용자 이름과 선택한 브랜드를 다음 페이지에 다시 삽입합니다. 사용할 구문은 정보 저장 모드에 따라 다릅니다. 자세한 내용은 수집된 정보 사용을 참조하십시오.

노트

보안상의 이유로 <%= 공식에 입력한 값이 이스케이프된 문자로 대체됩니다.

이 예제에서 받는 사람의 이름과 성은 데이터베이스의 필드에 저장되고 자동차 브랜드는 변수에 저장됩니다. 2페이지에 개인화된 메시지의 구문은 다음과 같습니다.

<P>Welcome <%= ctx.recipient.@firstName %> <%= ctx.recipient.@lastName %>,</P>
<P>To start your customized study, please select your car <%=ctx.vars.marque%> and its year of purchase.</P>

이렇게 하면 다음과 같은 결과가 생성됩니다.

텍스트 변수 사용

Text 탭에서는 다음 구문을 사용하여 <%= 및 %> 문자 사이의 HTML에서 사용할 수 있는 변수 필드를 만들 수 있습니다.$(IDENTIFIER).

이 메서드를 사용하여 문자열을 쉽게 현지화할 수 있습니다. 웹 양식 변환 참조

예를 들어 HTML 콘텐츠에 "마지막 연락처 날짜:" 문자열을 표시할 수 있도록 연락처 필드를 만들 수 있습니다. 이렇게 하려면 아래 단계를 수행합니다:

  1. HTML 텍스트의 Text 탭을 클릭합니다.

  2. Add 아이콘을 클릭합니다.

  3. Identifier 열에 변수 이름을 입력합니다

  4. Text 열에 기본값을 입력합니다.

  5. HTML 내용에 <%= $(연락처) %> 구문을 통해 이 텍스트 변수를 삽입합니다.

    주의

    HTML 편집기에 이러한 문자를 입력하면 <​필드가 이스케이프 처리된 문자로 바뀝니다. 이 경우 HTML 텍스트 편집기의 Display source code 아이콘을 클릭하여 소스 코드를 수정해야 합니다.

  6. 양식의 Preview 레이블을 열어 HTML에 입력한 값을 봅니다.

이 운영 모드에서는 웹 양식의 텍스트를 한 번만 정의하고 통합 번역 도구를 사용하여 번역을 관리할 수 있습니다. 자세한 내용은 웹 양식 번역을 참조하십시오.

이미지 삽입

양식에 포함하려면 외부에서 액세스할 수 있는 서버에 이미지를 저장해야 합니다.

Static elements > Image 메뉴를 선택합니다.

삽입할 이미지의 소스를 선택합니다.공용 리소스 라이브러리에서 가져오거나 외부에서 액세스할 수 있는 외부 서버에 저장할 수 있습니다.

라이브러리의 이미지인 경우 필드의 콤보 상자에서 선택합니다.외부 파일에 있으면 액세스 경로를 입력합니다. 이미지 위에 커서를 놓거나(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