v7 v8

웹 양식의 정적 요소

마지막 업데이트: 2023-05-24
  • 주제:
  • Web Forms
    이 항목에 대한 자세한 내용 보기

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

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

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

  • 하이퍼텍스트 링크, HTML, 가로 막대형 다음을 참조하십시오 HTML 컨텐츠 삽입.

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

  • 클라이언트측 및/또는 서버측에서 실행되는 스크립트. 클라이언트측에서 올바른 실행을 위해 JavaScript로 작성되어야 하며 대부분의 브라우저와 호환되어야 합니다.

    노트

    서버측에서 스크립트는에 정의된 함수를 사용할 수 있습니다. Campaign 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 필드에 링크 대상 주소를 입력할 수 있습니다.

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

  • 페이지 새로 고침

    이렇게 하려면 Refresh page 드롭다운 상자의 옵션 Action 필드.

  • 다음/이전 페이지 표시

    이렇게 하려면 Next page 또는 Previous page 드롭다운 상자의 옵션 Action 필드.

    다음을 숨길 수 있습니다. Next 및/또는 Back 링크로 대체해야 하는 단추입니다. 다음을 참조하십시오. 페이지.

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

  • 다른 페이지 표시

    다음 Enable a transition 옵션에서 선택한 아웃바운드 전환과 연관된 특정 페이지를 표시할 수 있습니다. Transition 필드.

    기본적으로 페이지에는 출력 전환이 하나만 있습니다. 새 전환을 만들려면 페이지를 선택한 다음 Add 의 단추 Output transitions 섹션에 자세히 설명되어 있습니다.

    다이어그램에서 이 추가는 다음과 같이 표시됩니다.

    노트

    웹 양식의 페이지 시퀀싱에 대한 자세한 내용은 웹 양식 페이지 순서 정의.

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에서 사용할 수 있는 변수 필드를 만들 수 있습니다. $(식별자).

이 메서드를 사용하면 문자열을 쉽게 현지화할 수 있습니다. 다음을 참조하십시오 웹 양식 번역

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

  1. 을(를) 클릭합니다 Text HTML 텍스트 탭입니다.

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

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

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

  5. HTML 컨텐츠에서 다음을 통해 이 텍스트 변수를 삽입합니다. <%= $(Contact) %> 구문.

    주의

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

  6. 를 엽니다. Preview HTML에 입력한 값을 보기 위한 양식 레이블:

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

이미지 삽입

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

다음 항목 선택 Static elements > Image 메뉴 아래의 제품에서 사용할 수 있습니다.

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

라이브러리의 이미지인 경우 필드의 콤보 상자에서 이미지를 선택하고 외부 파일에 있는 경우 액세스 경로를 입력합니다. 레이블은 이미지(HTML의 ALT 필드와 일치함) 위에 커서를 놓거나 이미지가 표시되지 않을 때 표시됩니다.

이미지는 편집기의 중앙 섹션에서 볼 수 있습니다.

이 페이지에서는