이메일의 대화형 양식에 대한 궁극적인 가이드

게시 됨: 2020-05-21

"이메일 양식이 작동하지 않습니다."

"양식은 JavaScript로 구동되며 이메일에서는 지원되지 않습니다."

이전에 이러한 단어를 들어본 적이 있습니까? 우리도. 많은 마케터들은 이메일에 대화형 양식을 사용하는 것이 불가능하다고 생각하지만 우리는 그 통념을 깨기 위해 왔습니다. 사실 대화형 양식은 널리 사용되는 많은 이메일 클라이언트에서 지원되며 방법을 알고 있다면 이메일을 더욱 매력적으로 만들고 전환율을 높이는 강력한 도구가 될 수 있습니다.

이메일 개발자인 Mark Robbins는 Litmus Live 2019에서 이메일의 대화형 양식에 대해 자세히 설명했으며, 이는 Litmus의 우리 팀에서도 대화형 양식을 실험하도록 영감을 주었습니다. 이 게시물에서는 Mark의 대화에서 얻은 기본 원칙과 자체 테스트에서 얻은 추가 팁 및 조언을 공유하여 대화형 양식을 이메일에서도 생생하게 만들 수 있도록 합니다.

다이빙 할 준비가 되셨습니까? 가자!

이메일에서 대화형 양식의 힘

이메일을 사용하여 구독자를 방문 페이지로 유도하여 특정 유형의 양식을 작성하도록 권장하는 모든 시간에 대해 생각해 보십시오. 이 단계를 모두 건너뛰고 구독자가 이메일 내에서 그들이 있는 곳에서 바로 조치를 취하도록 권한을 부여할 수 있다면 어떨까요?

예를 들어, 다음을 수행할 수 있습니다.

이메일 내에서 바로 제품 리뷰 또는 NPS 피드백 수집
구독자를 방문 페이지로 보낼 필요 없이 간단한 설문조사 실행
가입자가 사용자 계정 설정을 방문하지 않고도 사용자 프로필 또는 이메일 기본 설정을 업데이트할 수 있도록 허용
캠페인에 바로 리드 생성 양식 포함
그리고 더!

이메일 자체에 양식을 표시하면 랜딩 페이지가 필요하지 않습니다. 구독자가 목표를 달성하기 위해 취해야 하는 모든 추가 단계는 마찰을 더합니다. 이메일에 양식을 포함하면 마찰을 줄이고 전환 경로를 단축하며 궁극적으로 전환을 늘릴 수 있습니다.

이메일 양식에 대한 이메일 클라이언트 지원

이메일 디자이너와 개발자가 대화형 양식을 사용하는 것을 꺼리는 가장 큰 이유 중 하나는 많은 이메일 클라이언트에서 지원되지 않을까봐 걱정하기 때문입니다. 그러나 불충분한 지원이라는 신화는 더 이상 사실이 아닙니다. 실제로 상위 5개 이메일 클라이언트 중 4개(Gmail, iOS Mail, Apple Mail, Yahoo! 메일—대화형 양식을 지원하며 Litmus의 이메일 클라이언트 시장 점유율에 따르면 모든 이메일 열기의 80% 이상을 차지합니다.

다음은 널리 사용되는 이메일 클라이언트에서 대화형 양식 지원을 테스트할 때 발견한 내용입니다.

이메일 클라이언트	지원되는 양식?	노트
애플 메일	예	"GET"이 예상대로 작동합니다. "POST"는 이메일에서 제출하는 대신 양식이 포함된 방문 페이지를 엽니다.
아이폰 메일 앱	약간	"GET"이 예상대로 작동합니다. "POST"는 제출하지 않습니다.
Gmail 데스크톱 웹메일	예	팝업 경고와 함께 제출합니다.
지메일(iOS)	약간	iOS GANGA에서는 제출하지 않습니다. "POST" 입력도 비활성화됩니다.
지메일 안드로이드	약간	"GET"만 작동하지만 이메일에서 제출하는 대신 양식이 있는 방문 페이지를 엽니다. "POST"를 사용하면 양식이 시각적으로 나타나지만 사용자 입력이 허용되지 않습니다.
Gmail 모바일 웹메일	예
Windows의 Outlook	아니요
윈도우 10 메일	아니요
아웃룩 맥OS	아니요	이 양식은 시각적으로 나타나며 Microsoft 전자 메일 주소에 대한 사용자 입력을 허용하지만 제출은 허용하지 않습니다.
아웃룩닷컴	아니요	받은 편지함 보기에서 제출하는 대신 이메일이 자체 창에서 열릴 때만 제출합니다. 제출 시 입력 속성에 "x_"가 접두사로 붙기 때문에 데이터 수집에 문제가 발생할 수 있습니다. 이 클라이언트에 대해 숨기기를 권장합니다.
아웃룩 iOS	예
아웃룩 안드로이드	약간	양식은 시각적으로 표시되지만 키보드는 사용자가 정보를 입력할 수 있는 것처럼 보이지 않으므로 사용자는 텍스트를 복사하여 붙여넣어 입력해야 합니다. 키보드 입력이 사용되는 경우 이 클라이언트에 대해 숨기기를 권장하지만 다른 입력을 사용하는 경우 양식을 허용합니다.
야후! 데스크탑 웹메일	예	팝업 경고와 함께 제출합니다.
야후! iOS	아니요	양식이 시각적으로 나타나고 사용자 입력이 허용되지만 제출은 허용되지 않습니다.
야후! 기계적 인조 인간	약간	양식은 시각적으로 표시되지만 사용자가 입력할 수 있도록 키보드가 표시되지 않습니다.
AOL 데스크탑 웹메일	예
AOL iOS	아니요	양식이 시각적으로 나타나고 사용자 입력이 허용되지만 제출은 허용되지 않습니다.
AOL 안드로이드	예
삼성 메일 앱	약간	양식은 시각적으로 표시되지만 사용자가 정보를 입력할 수 있도록 키보드가 표시되지 않습니다. 키보드 입력이 사용되는 경우 이 클라이언트에 대해 숨기기를 권장하지만 다른 입력을 사용하는 경우 양식을 허용합니다.

이메일에서 대화형 양식을 작성하는 방법

그러나 HTML 이메일 캠페인에서 양식을 정확히 어떻게 구현합니까? Mark의 방법을 단계별로 분석해 보겠습니다.

1. 기본 설정

정말 간단한 프레임워크로 시작해 보겠습니다.

가장 기본적인 수준에서 양식을 작동시키는 두 가지 속성이 있습니다.

<form action="[example_url]" method="get">
<!-- Form content -->
</form>

동작
이는 양식 데이터가 전송되는 방문 페이지 또는 대상을 정의합니다.
방법
데이터를 해당 대상에 제출하는 방법에는 GET 또는 POST 요청을 통한 두 가지가 있습니다. GET은 이메일에서 더 나은 지원을 제공하지만 한 가지 명심해야 할 것이 있습니다. GET 방법을 통해 데이터를 제출하는 경우 기본적으로 해당 데이터를 URL에 첨부하므로 제출된 양식 데이터가 페이지 주소 필드에 표시됩니다. .

예를 들어 양식을 통해 이름을 제출하면 다음과 같은 URL을 생성하게 됩니다.

 http://example.com?Fname=마크

2. 양식 필드 설정

다음으로 구독자로부터 수집하려는 정보와 이를 개별 양식 필드로 변환하는 방법을 생각해야 합니다.

각 양식 필드에는 레이블이 필요하며 이는 이메일 독자에게 이 양식 필드의 용도를 알려주는 정보입니다. 독자에게 다음과 같은 이름을 묻는 양식 필드의 경우:

<label for="fname">
 First Name:
</label>
<input type="text" id="fname">

id=”fname”이 있는 요소에 대한 텍스트 입력을 수집하려고 하며 레이블 for=”fname”이 이 둘을 연결합니다. 일부 웹 메일 클라이언트는 코드를 변경하고 for & id 접근 방식을 지원하지 않습니다. 그들은 클래스와 ID 이름에 접두사를 추가하는 것을 좋아하므로 ID는 변경될 수 있지만 for 속성은 변경되지 않습니다. 결과: 레이블이 더 이상 ID와 일치하지 않아 양식이 손상됩니다. 이를 방지하기 위한 간단한 해결책은 다음과 같습니다.

<label>

First Name: <input type="text">

</label>

다음을 포함하여 선택할 수 있는 몇 가지 다른 유형의 텍스트 입력이 있습니다.

 <입력 유형="텍스트">
<입력 유형="이메일">
<입력 유형="전화">
<입력 유형="숫자">
<입력 유형="url">
<텍스트 영역></텍스트 영역>

각 양식 필드에 올바른 유형의 입력을 선택하면 다음 두 가지 작업을 수행하는 데 도움이 됩니다. 모바일에서 볼 때 필요한 입력과 일치하도록 키보드 레이아웃을 변경할 수 있습니다. 또한 지원되는 경우 몇 가지 기본 유효성 검사가 있습니다.

양식을 통해 제출하는 모든 정보에 대해 이름과 값이라는 두 가지를 제출해야 합니다.

이름:
이것은 개발자가 정의한 양식 필드 이름이며 URL 문자열을 통해 전달됩니다.
값:
양식 필드의 이름과 연결된 개발자 또는 사용자 정의 값입니다.

위의 이름 예를 기억하십니까? http://example.com?Fname=Mark는 양식 필드 First Name(=name)에 대해 이름 "Mark"(=value)를 제출하는 URL입니다.

양식에 주석 영역(name=”comment”)을 추가해 보겠습니다.

<input type="text" name="Fname">

<textarea name="comment">

</textarea>

양식 제출의 결과 URL은 다음과 같습니다.

 http://example.com?Fname=Mark&comment=hello

체크박스와 라디오 버튼

텍스트 입력을 설정하는 방법을 알고 있지만 양식에 확인란이나 라디오 버튼을 추가하려면 어떻게 해야 할까요?

체크박스의 경우 값은 선택 사항입니다. 체크박스에 대한 값을 정의하지 않으면 "on" 또는 "off"로 제출됩니다. 작동하지만 수신 측에서 데이터를 처리하는 방법에 따라 값을 다른 표현으로 업데이트할 수 있습니다.

예를 들어 구독자가 귀하의 이용 약관에 동의하는 확인란을 선택하는 경우 "동의" 값을 제출하는 확인란은 다음과 같습니다.

<input type="checkbox" name="t-c" value="agree" >

 http://example.com?tc=동의

그러나 라디오 버튼의 경우 값이 필요하며 이름 요소는 라디오 버튼을 함께 그룹화하는 것입니다. 이 예에서는 라디오 버튼 그룹과 TV 버튼 그룹이 있으며 각 그룹에서 하나의 방송국을 선택하게 됩니다.

<input type="radio" name="radio" value="radio1" checked>

<input type="radio" name="radio" value="radio2">

<input type="radio" name="tv" value="BBC1">

<input type="radio" name="tv" value="BBC2">

첫 번째 라디오 버튼에서 체크 표시 를 찾았습니까? 이것이 미리 선택된 옵션으로 표시하려는 라디오 버튼을 표시하는 방법입니다.

그룹화 옵션

라디오 버튼이나 체크박스를 함께 그룹화하려는 경우 필드셋과 범례가 필요합니다.

Fieldsets는 관련 항목을 함께 그룹화합니다.
범례는 기본적으로 바로 그 항목에 대한 레이블입니다.

이 예에서는 좋아하는 색상을 선택하는 라디오 버튼 세트에서 빨간색과 파란색 옵션 중에서 선택하게 됩니다.

<fieldset>

<legend>Favourite color</legend>

<label>Red

<input type="radio" name="color" value="r">

<div class="button red"></div>

</label>

<label>Blue

<input type="radio" name="color" value="b">

<div class="button blue"></div>

</label>

</fieldset>

Fieldset은 주소(거리, 우편번호, 주, 국가)와 같은 다양한 정보를 그룹화하려는 경우에 유용합니다.

라디오 버튼과 체크박스의 기본 스타일은 좋지 않습니다. 둘 다 다소 작게 표시되어 많은 독자가 액세스할 수 없습니다. 그렇기 때문에 위에서 기본 라디오 버튼 스타일을 선택한 스타일로 대체할 수 있는 div 클래스를 추가했습니다.

기본 라디오 버튼 스타일 덮어쓰기

라디오 버튼의 기본 스타일을 덮어쓰려면 몇 단계가 필요합니다. 하나씩 분해해 보겠습니다.

우선 다음 스타일을 사용하여 기본 라디오 버튼을 숨기고 싶을 것입니다.

.hidden-radio{

display:inline-block;

opacity:0;

width:0;

height:0;

margin:0 -9999px 0 0;

float:right;

position:absolute;
}

이제 기본 입력을 숨겼으므로 포커스 입력 상태를 자체 스타일로 바꿔 독자가 집중하고 있는 요소에 하이라이트 또는 개요를 추가해야 합니다.

input:focus + .button{

outline: Highlight auto

2px;

outline:

-webkit-focus-ring-color

auto 5px;

}

마지막으로 일반적으로 스타일을 지정하는 것처럼 버튼의 스타일을 지정합니다. 호버 효과를 사용하여 버튼의 스타일을 지정하고 클릭을 유도하는 경우 여기에서도 할 수 있습니다. 또한 라디오 버튼의 "선택된" 상태에 스타일을 추가하여 선택된 라디오 버튼과 선택되지 않은 라디오 버튼을 쉽게 구분할 수 있습니다.

.button{

/* style */

}

.button:hover,

input:focus + .button{

/* style */

}

input:checked + .button{

/* style */

}

3. 숨겨진 정보 전달

사용자가 양식에 수동으로 입력 하지 않고도 양식 을 통해 전달하려는 정보가 있을 수 있습니다. 예를 들어 이름, 사용자 ID 또는 이메일 주소와 같은 항목이 될 수 있습니다. "hidden" 입력 유형을 사용하여 숨겨진 정보를 배후에서 전달할 수 있습니다. 이 작업은 사용자가 보거나 수정할 수 없습니다.

예를 들어, 이 코드 비트는 다음과 같이 사용자 ID를 전달합니다.

<input type="hidden" name="user-id" value="U12345">

 http://example.com?user-id=U12345

4. 양식 제출

알겠습니다. 양식이 작성되었습니다. 이제 독자가 제출할 수 있는 방법이 필요합니다. 입력 유형 "제출" 및 버튼 유형 "제출"의 두 가지 방법이 있습니다.

<input type="submit" value="Submit your form" >

<button type="submit">
Submit your form

</button>

둘 다 매우 유사하게 작동하지만 차이점은 텍스트를 넣는 위치입니다. 입력 유형 경로로 이동하는 경우 텍스트를 값으로 설정하고 싶을 것입니다. 버튼을 사용하는 경우 제출 사본은 버튼 닫기 태그 바로 앞에 위치합니다.

이메일의 대화형 양식에 대한 대체 전략

모든 대화형 이메일에 대해 대체를 설정하는 것이 중요합니다. 대체는 양식이 완벽하게 작동하지 않는 모든 이메일 클라이언트에서 양식을 숨기고 대신 대체를 표시하도록 합니다. 양식에 대한 모바일 지원은 여전히 부족하기 때문에 모든 Litmus 이메일에 대해 모바일에서 양식을 숨기고 대화식 양식 기능을 지원하는 가장 인기 있는 이메일 클라이언트에서 완전한 대화식 경험을 목표로 합니다. 즉, 우리는 다음과 같은 코드를 구현했습니다.

대화형 양식을 표시합니다.
- 애플 메일
- Gmail(데스크톱 웹)
- 야후(데스크톱 웹)
대체를 표시합니다.
- 모든 Outlook 및 Windows 메일
- 모든 휴대기기

코드에서 다음과 같이 표시됩니다.

CSS

.interactive-form {
	display: block !important;
	max-height: inherit !important;
	overflow: visible !important;
}
.fallback-form {
	display: none;
}

body[data-outlook-cycle] .outlookshow{ display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
body[data-outlook-cycle] .outlookhide{ display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

[class~="x_outlookshow"] { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
[class~="x_outlookhide"] { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

@media only screen and (max-width: 640px) {
  .fallback-form {
    display:block !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
    max-height:inherit !important;
    max-width:inherit !important;
    line-height: auto !important;
    margin-top: 0px !important;
    visibility:inherit !important;
  }
  .interactive-form, 
  .interactive-form p, 
  .interactive-form label, 
  .interactive-form input  {
    display:none !important;
    display:none !important;
    overflow:hidden !important;
    max-height: 0px !important;
    max-width: 0px !important;
    line-height: 0px !important;
    visibility:hidden !important;
  }
}

HTML

<!--[if mso | ie]>
<style>
.fallback-form {
  display: block !important;
  max-height: inherit !important;
  overflow: visible !important;
}
</style>
<![endif]-->


<!-- start FORM_INTERACTIVE -->
<!--[if (!mso)&(gte IE 10)]> <! -- -->
<div class="interactive-form outlookhide" style="display:none; max-height:0; line-height:0; font-size:0; mso-hide:all;">
    [Insert Interactive Form code here]
</div>
<!--<![endif]-->
<!-- end FORM_INTERACTIVE -->

<!-- start FORM_FALLBACK -->
<div class="fallback-form outlookshow">
    [Insert fallback for form section here]
</div>
<!-- end FORM_FALLBACK -->

예: 작동 중인 이메일에서 대화형 양식 보기

모든 작업이 궁금하세요?

이 이메일에는 독자가 Litmus 전문가 중 한 명과 쉽게 연락할 수 있도록 양식을 추가했습니다.

Indiana Pacers는 이메일 내에서 팬에게 피드백을 요청합니다.

하지만 코딩을 할 수 없다면?

상호 작용 및 특히 상호 작용 양식과 같은 고급 요소에는 상당한 코딩 기술이 필요합니다. 이미 이메일 코드에 익숙한 이메일 개발자라면 이 단계별 가이드가 다음 캠페인에서 양식을 구현하는 데 도움이 되기를 바랍니다.

하지만 경력의 초기 단계에 있는 많은 마케터와 이메일 개발자에게 양식과 같은 대화형 요소를 구현하는 것은 불가능한 작업처럼 느껴질 수 있습니다. 그러나 적어도 Salesforce Marketing Cloud에서 이메일을 작성하는 경우에는 좋은 소식이 있습니다. Salesforce의 Mark와 그의 팀은 최근 Salesforce의 Content Builder에 양식 블록을 추가하여 마케터가 이메일에 양식을 추가하고 필요에 맞게 사용자 정의할 수 있도록 했습니다. 코딩 기술이 필요하지 않습니다. Salesforce 고객인 경우 확인하는 것이 좋습니다!

더 많은 이메일 서비스 제공업체가 마케팅 담당자가 캠페인에서 대화형 요소를 쉽게 구현할 수 있도록 합니까? Salesforce의 동적 양식 블록 출시는 그 방향으로 가는 첫 번째 단계가 될 수 있습니다.