الدليل النهائي للنماذج التفاعلية في البريد الإلكتروني

نشرت: 2020-05-21

"النماذج في البريد الإلكتروني لا تعمل."

"النماذج مدعومة من JavaScript - وهذا غير مدعوم في البريد الإلكتروني."

هل سمعت هذه الكلمات من قبل؟ نحن كذلك. يعتقد العديد من المسوقين أن استخدام النماذج التفاعلية في البريد الإلكتروني ببساطة غير ممكن ، لكننا هنا لكسر هذه الأسطورة. الحقيقة هي أن النماذج التفاعلية مدعومة في العديد من عملاء البريد الإلكتروني المشهورين ويمكن أن تكون أداة قوية لجعل رسائل البريد الإلكتروني أكثر جاذبية وزيادة التحويلات - إذا كنت تعرف كيفية القيام بذلك.

قام مطور البريد الإلكتروني غير العادي Mark Robbins بأخذ نظرة عميقة في النماذج التفاعلية في البريد الإلكتروني في Litmus Live 2019 - والتي ألهمت فريقنا هنا في Litmus لتجربة النماذج التفاعلية أيضًا. في هذا المنشور ، سنشارك المبادئ الأساسية من حديث مارك جنبًا إلى جنب مع النصائح والنصائح الإضافية من الاختبارات الخاصة بنا حتى تتمكن من إنشاء نماذج تفاعلية في رسائل البريد الإلكتروني الخاصة بك أيضًا.

جاهز للغطس؟ لنذهب!

قوة النماذج التفاعلية في البريد الإلكتروني

فكر في جميع الأوقات التي تستخدم فيها البريد الإلكتروني لتوجيه المشتركين إلى صفحة مقصودة لتشجيعهم على ملء نوع من النماذج. ماذا لو كنت قادرًا على تخطي هذه الخطوة تمامًا وتمكين المشتركين في قناتك من اتخاذ الإجراءات الصحيحة أينما كانوا ، ضمن بريدك الإلكتروني؟

على سبيل المثال ، يمكنك ...

اجمع مراجعات المنتج أو تعليقات NPS مباشرة في البريد الإلكتروني
قم بإجراء استطلاعات الرأي القصيرة دون الحاجة إلى إرسال المشتركين إلى صفحة مقصودة
اسمح للمشتركين بتحديث ملفات تعريف المستخدمين أو تفضيلات البريد الإلكتروني دون الحاجة إلى زيارة إعدادات حساب المستخدم الخاصة بهم
قم بتضمين نماذج توليد العملاء المحتملين داخل حملاتك مباشرة
و اكثر!

يمكن أن يؤدي تقديم نموذج داخل البريد الإلكتروني نفسه إلى التخلص من الحاجة إلى صفحة مقصودة. كل خطوة إضافية يتعين على المشتركين اتخاذها لتحقيق هدف ما تضيف احتكاكًا. يمكن أن يؤدي تضمين نموذج في بريدك الإلكتروني إلى تقليل الاحتكاك وتقصير مسار التحويل وزيادة التحويلات في النهاية.

دعم عميل البريد الإلكتروني للنماذج في البريد الإلكتروني

أحد أكبر الأسباب التي تجعل مصممي البريد الإلكتروني والمطورين يخجلون من استخدام النماذج التفاعلية هو أنهم قلقون من أنه قد لا يتم دعمهم في العديد من عملاء البريد الإلكتروني. ومع ذلك ، فإن أسطورة عدم كفاية الدعم لم تعد صحيحة. في الواقع ، 4 من أفضل 5 عملاء بريد إلكتروني — Gmail و iOS Mail و Apple Mail و Yahoo! البريد — يدعم النماذج التفاعلية ، وهذه تمثل أكثر من 80٪ من جميع رسائل البريد الإلكتروني المفتوحة ، وفقًا لمشاركة سوق عميل البريد الإلكتروني في Litmus.

إليك ما وجدناه عند اختبار دعم النموذج التفاعلي عبر عملاء البريد الإلكتروني المشهورين:

عميل البريد الإلكتروني	دعم النماذج؟	ملحوظات
بريد أبل	نعم	يعمل "GET" كما هو متوقع. يفتح "POST" صفحة مقصودة بنموذج بدلاً من الإرسال من البريد الإلكتروني
تطبيق iPhone Mail	قليلا	يعمل "GET" كما هو متوقع. "POST" لا يقدم.
بريد ويب Gmail على سطح المكتب	نعم	يقدم مع تنبيه منبثق.
Gmail (iOS)	قليلا	لا يقدم في iOS GANGA. يتم أيضًا تعطيل إدخال "POST".
جوجل الروبوت	قليلا	يعمل "GET" فقط ، ولكنه يفتح صفحة مقصودة بنموذج بدلاً من الإرسال من البريد الإلكتروني. مع "POST" ، يظهر النموذج بشكل مرئي ، لكنه لا يسمح بإدخال المستخدم.
بريد ويب Gmail للجوال	نعم
Outlook على Windows	لا
بريد Windows 10	لا
Outlook MacOS	لا	يظهر النموذج بشكل مرئي ويسمح للمستخدم بإدخال عناوين البريد الإلكتروني لـ Microsoft ، لكنه لا يسمح بالتقديم.
Outlook.com	لا	يتم الإرسال فقط عند فتح بريد إلكتروني في نافذته الخاصة ، بدلاً من الإرسال من عرض البريد الوارد. عند الإرسال ، تبدأ سمات الإدخال بـ "x_" حتى يمكن أن تتسبب في حدوث مشكلات في جمع البيانات. أوصي بالاختباء لهذا العميل.
Outlook iOS	نعم
Outlook Android	قليلا	يظهر النموذج بشكل مرئي ، ولكن لا يبدو أن لوحة المفاتيح تسمح للمستخدمين بإدخال المعلومات بحيث يضطر المستخدمون إلى نسخ النص ولصقه للإدخال. أوصي بالإخفاء لهذا العميل عند استخدام مدخلات لوحة المفاتيح مع السماح بالنماذج في حالة استخدام مدخلات أخرى.
ياهو! بريد الويب المكتبي	نعم	يقدم مع تنبيه منبثق.
ياهو! iOS	لا	يظهر النموذج بشكل مرئي ويسمح للمستخدم بإدخال ، لكنه لا يسمح بالتقديم.
ياهو! ذكري المظهر	قليلا	يظهر النموذج بشكل مرئي ، لكن لا يبدو أن لوحة المفاتيح تسمح للمستخدمين بالإدخال.
بريد الويب الخاص بسطح المكتب من AOL	نعم
AOL iOS	لا	يظهر النموذج بشكل مرئي ويسمح للمستخدم بإدخال ، لكنه لا يسمح بالتقديم.
AOL أندرويد	نعم
تطبيق بريد سامسونج	قليلا	يظهر النموذج بشكل مرئي ، لكن لا يبدو أن لوحة المفاتيح تسمح للمستخدمين بإدخال المعلومات. أوصي بالإخفاء لهذا العميل عند استخدام مدخلات لوحة المفاتيح مع السماح بالنماذج في حالة استخدام مدخلات أخرى.

كيفية بناء نموذج تفاعلي في البريد الإلكتروني

ولكن كيف تقوم بالضبط بتنفيذ نموذج في حملات البريد الإلكتروني بتنسيق HTML؟ دعنا نقسم طريقة مارك خطوة بخطوة:

1. قم بإعداد الأساسيات

لنبدأ بإطار عمل بسيط حقًا:

على المستوى الأساسي ، هناك نوعان من السمات التي تجعل النموذج يعمل:

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

عمل
يحدد هذا الصفحة المقصودة أو الوجهة التي يتم إرسال بيانات النموذج إليها.
طريقة
هناك طريقتان لإرسال بياناتك إلى تلك الوجهة: عبر طلب GET أو POST. يتمتع GET بدعم أفضل في البريد الإلكتروني ولكن هناك شيء واحد يجب مراعاته: إذا كنت ترسل البيانات عبر طريقة GET ، فأنت تقوم بشكل أساسي بإرفاق تلك البيانات بعنوان URL ، لذلك ستكون بيانات النموذج المقدمة مرئية في حقل عنوان الصفحة .

على سبيل المثال ، يعني إرسال اسمك الأول عبر النموذج أنك تنشئ عنوان URL يبدو كالتالي:

 http://example.com؟Fname=Mark

2. قم بإعداد حقول النموذج الخاص بك

بعد ذلك ، عليك التفكير مليًا في المعلومات التي ترغب في جمعها من المشتركين لديك - وكيفية ترجمة ذلك إلى حقول نماذج فردية.

يتطلب كل حقل نموذج تسمية ، هذه هي المعلومات التي تخبر قارئ البريد الإلكتروني الغرض من حقل النموذج هذا. بالنسبة لحقل النموذج الذي يطلب من القارئ تحديد اسمه الأول الذي يبدو كالتالي:

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

أنت تبحث عن تجميع إدخال نصي لعنصر بالمعرف = ”fname” - وتسمية = ”fname” تربط هذين الاثنين. على الرغم من أن بعض عملاء بريد الويب يغيرون شفرتك ولا يدعمون نهج for & id. إنهم يحبون إضافة بادئات لأسماء فصلك الدراسي ومعرفاتك - لذلك قد يتم تغيير المعرف الخاص بك ولا يتم تغيير السمة الخاصة بك. النتيجة: لم تعد التسمية الخاصة بك تطابق المعرف الخاص بك ، وهذا يكسر النموذج الخاص بك. إليك حل بسيط لمنع ذلك: لف الملصق الخاص بك حول مدخلاتك على النحو التالي:

<label>

First Name: <input type="text">

</label>

سيكون لديك عدة أنواع مختلفة من إدخالات النص للاختيار من بينها ، بما في ذلك:

 <نوع الإدخال = "نص">
<نوع الإدخال = "البريد الإلكتروني">
<input type = "tel">
<نوع الإدخال = "رقم">
<نوع الإدخال = "url">
<textarea> </textarea>

يساعدك تحديد نوع الإدخال الصحيح لكل حقل نموذج على القيام بأمرين: عند عرضها على الهاتف المحمول ، يمكن تغيير تخطيط لوحة المفاتيح لمطابقة الإدخال المطلوب. بالإضافة إلى ذلك ، حيث يتم دعمه ، هناك بعض عمليات التحقق الأساسية.

لكل معلومة نقدمها عبر نموذج ، نحتاج إلى إرسال شيئين: الاسم والقيمة.

اسم:
هذا هو الاسم الذي يحدده المطور لحقل النموذج ، ويتم تمرير هذا عبر سلسلة عنوان URL.
قيمة:
قيمة معرفة المطور أو المستخدم المقترنة بالاسم في حقل النموذج.

تذكر مثال الاسم الأول لدينا أعلاه؟ http://example.com؟Fname=Mark هو عنوان URL الذي يرسل الاسم الأول "علامة" (= القيمة) لحقل النموذج الاسم الأول (= الاسم).

دعنا نضيف منطقة تعليق (الاسم = "تعليق") إلى نموذجنا:

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

<textarea name="comment">

</textarea>

سيبدو عنوان URL الناتج في نموذج الإرسال كما يلي:

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

مربعات الاختيار وأزرار الاختيار

نحن نعلم كيفية إعداد إدخالات النص ، ولكن ماذا لو أردت إضافة مربع اختيار أو زر اختيار إلى النموذج الخاص بك؟

القيم اختيارية لمربعات الاختيار. إذا لم تحدد قيمة لمربع الاختيار ، فسيتم إرسالها على أنها "تشغيل" أو "إيقاف تشغيل". يعمل هذا ، ولكن قد ترغب في تحديث القيمة إلى صيغ مختلفة ، اعتمادًا على كيفية التخطيط للتعامل مع البيانات على الطرف المتلقي.

على سبيل المثال ، إليك مربع اختيار يرسل القيمة "موافق" إذا قام المشترك بتحديد المربع للموافقة على البنود والشروط الخاصة بك:

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

 http://example.com؟tc=agree

ومع ذلك ، بالنسبة لأزرار الاختيار ، فإن القيم مطلوبة ، وعنصر الاسم الخاص بك هو ما يجمع أزرار الاختيار معًا. في هذا المثال هنا ، لديك مجموعتان من أزرار الراديو - واحدة للراديو والأخرى للتلفزيون - وستتمكن من اختيار محطة واحدة في كل مجموعة.

<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">

هل وجدت علامة الاختيار على زر الاختيار الأول؟ هذه هي الطريقة التي تحدد بها زر الاختيار الذي ترغب في عرضه كخيار محدد مسبقًا.

تجميع الخيارات معًا

عندما تبحث عن تجميع أزرار الاختيار أو مربعات الاختيار معًا ، فهذا هو الوقت الذي تظهر فيه مجموعات الحقول والأساطير.

سوف تقوم مجموعات الحقول بتجميع العناصر ذات الصلة معًا
الأساطير هي في الأساس تسميات لتلك العناصر بالذات

في هذا المثال هنا ، سنتمكن من الاختيار بين الخيارين الأحمر والأزرق في مجموعة من أزرار الاختيار التي تتعلق كلها باختيار اللون المفضل لديك.

<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>

تكون مجموعات الحقول مفيدة إذا كنت تبحث عن تجميع أجزاء مختلفة من المعلومات معًا مثل العنوان — الشارع والرمز البريدي والولاية والبلد.

التصميم الافتراضي لأزرار الاختيار ومربعات الاختيار ليس رائعًا. يتم عرض كلاهما صغيرًا نوعًا ما ، مما يجعل الوصول إليهما غير متاح لكثير من القراء. هذا هو السبب في أننا نضيف أعلاه فئة 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. تمرير المعلومات المخفية

من المحتمل أن هناك بعض المعلومات التي ترغب في تمريرها عبر النموذج دون أن يضطر المستخدم إلى إدخالها يدويًا في النموذج. يمكن أن تكون عناصر مثل الأسماء أو معرّفات المستخدمين أو عناوين البريد الإلكتروني ، على سبيل المثال. يمكنك تمرير المعلومات المخفية خلف الكواليس باستخدام نوع الإدخال "مخفي" - لا يمكن للمستخدم رؤية هذا الإجراء أو تعديله:

على سبيل المثال ، سيمرر هذا الجزء من الكود معرّف مستخدم مثل هذا:

<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 (سطح المكتب على الويب)
- Yahoo (سطح المكتب على الويب)
يظهر الرجوع في:
- كل بريد 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;
  }
}

لغة البرمجة

<!--[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 لدينا:

تطلب عائلة إنديانا بيسرز من معجبيها إبداء آرائهم — مباشرةً في البريد الإلكتروني:

ولكن ماذا لو لم أستطع البرمجة؟

يتطلب التفاعل والعناصر المتقدمة بشكل خاص مثل النماذج التفاعلية قدرًا كبيرًا من مهارات الترميز. إذا كنت مطور بريد إلكتروني مرتاح بالفعل لكود البريد الإلكتروني ، نأمل أن يساعدك هذا الدليل التفصيلي في تنفيذ النماذج في حملتك التالية.

بالنسبة للعديد من المسوقين ومطوري البريد الإلكتروني في المراحل الأولى من حياتهم المهنية ، فإن تنفيذ عناصر تفاعلية مثل النماذج قد يبدو وكأنه مهمة مستحيلة. ولكن هناك بعض الأخبار الجيدة لك — على الأقل إذا كنت تبني بريدك الإلكتروني في Salesforce Marketing Cloud. أضاف مارك وفريقه في Salesforce مؤخرًا قوالب النماذج إلى أداة إنشاء المحتوى في Salesforce ، مما يسمح للمسوقين بإضافة نماذج إلى رسائل البريد الإلكتروني الخاصة بهم وتخصيصها وفقًا لاحتياجاتهم — لا تتطلب مهارات الترميز. إذا كنت أحد عملاء Salesforce ، فنحن نشجعك على التحقق من ذلك!

هل سيسهل المزيد من مزودي خدمة البريد الإلكتروني على المسوقين تنفيذ عناصر تفاعلية في حملاتهم؟ قد يكون إطلاق كتل النماذج الديناميكية لـ Salesforce الخطوة الأولى في هذا الاتجاه.

شارك ، شكرا لك!

كيف تدعم فرق البريد الإلكتروني آلة التسويق: تسجيل الندوة عبر الويب + أسئلة وأجوبة

في هذه الندوة عبر الويب ، استعرضنا كيف يمكنك الاستفادة من قوة نهج البريد الإلكتروني الأول لإخراج الجزء الأكثر إستراتيجية من فريقك.

قراءة المزيد

تسليم الحلقة 20: Litmus Live Everywhere مع Lauren Kremer

في هذه الحلقة من التسليم ، أجرى المضيف جيسون رودريغيز مقابلات مع لورين كريمر - المتحدث السابق في Litmus Live ومدير الأحداث الجديد - حول كيفية تكييف Litmus Live في عام 2020 ، وما يعنيه أن تكون معتمدًا من Litmus ، وجوائز البريد الإلكتروني أولاً ، وكيفية البريد الإلكتروني يمكن للمسوقين في جميع أنحاء العالم التعلم في Litmus Live Everywhere.

قراءة المزيد