حل مشکل "یک فرم" در عدم استفاده
ابزارهای جستجوگرها | آموزش سئو فنی | بهینه سازی نرخ تبدیل (CRO)
نظرات نویسنده کاملاً خاص خود اوست (به استثنای واقعه غیر ممکن بعید خواب هیپنوتیزم) و ممکن است همیشه منعکس کننده نظرات موز نباشد.
Unbounce چیست؟
Unbounce ابزاری برای ایجاد صفحه فرود شناخته شده و مورد توجه است که با استفاده از این برنامه امکان ایجاد صفحات فرود چشمگیر و تأثیرگذار به مبتدیان HTML فراهم شده و در عین حال زمینه ای را برای رمزگذارهای با تجربه تر فراهم می کند تا کمی سرگرم کننده تر باشند.

در این پست ، می خواهم راه حل هایی را برای آنچه من به عنوان یک مشکل "Unbounce" ، "نقاط قوت و ضعف" آنها ، و شخصاً ترجیح می دهم ، ذکر کنم.

مشکل "یک فرم" چیست؟
مانند هر سیستمی که سعی در انجام مراحل پیچیده و اجرای ساده آنها داشته باشد ، مقدار مشخصی از تفاوت های ظریف و انعطاف پذیری نیز وجود دارد که باید قربانی آن شود.

یک محدودیت این است که هر صفحه فرود در Unbounce فقط می تواند یک فرم تعبیه شده داشته باشد (مثلاً چند مقاله در مورد موضوع بحث می کنند ، برای مثال: 1 ، 2 ، 3 ). اگر در صورت عدم بازدید بازدید کنندگان خود با فرم ها ، خطر قطعی از خستگی در هنگام تماس وجود داشته باشد ، یک شرط منطقی است که بخواهید دسترسی بیش از حد به فرم خود را در بیش از یک نقطه فراهم کنید.

به عنوان مثال ، می توانید با یک تماس جدی برای اقدام و فرم در بالای صفحه ، هدایت شوید و وقتی کاربران وقت داشته اند اطلاعات بیشتری راجع به پیشنهاد شما جذب کنند ، از صفحه پایین بیاورید. یک نمونه ساده از آن صفحه فرود پایین Teambit است که در Hubspot 16 از بهترین نمونه های طراحی صفحه Landing که باید در سال 2017 مشاهده کنید ، نشان داده شد .



در بالای این صفحه Teambit یک فرم جمع آوری ایمیل ساده قرار دارد



پس از بازدید کنندگان فرصتی برای خواندن مطالب دیگر ، در پایین صفحه تکرار می شود.

راه حل های بالقوه برای مسئله تک فرم
حال که مشکل را حل کردیم ، بیایید برخی راه حل ها را اجرا کنیم ، آیا باید؟

خوشبختانه ، چند روش ممکن برای حل این مشکل وجود دارد ، یا با استفاده از ابزار Unbounce داخلی یا اضافه کردن کد از طریق ورودی های HTML باز ، CSS و JavaScript.

شایان ذکر است که یک راه حل این است که به هیچ وجه فرم موجود در صفحه خود را نداشته باشید و دکمه های تماس با شما را به صفحات دیگر با فرم ها پیوند دهید. این روشی است که Unbounce در مثال زیر به کار می برد. اگرچه این رویکرد کاملاً معتبر است ، من آن را راه حل این مشکل به عنوان یک قالب کاملاً متفاوت نمی نامم ، بنابراین من آن را در لیست زیر گنجانده ام.



در اینجا Unbounce از دو CTA (دکمه های نارنجی) استفاده کنید ، اما به داشتن فرم در صفحه اعتماد نکنید.

1. دکمه لنگر پیمایش
این به طور بالقوه ساده ترین راه حل است ، زیرا بومی توسط Unbounce پشتیبانی می شود:

دکمه دیگری را در پایین صفحه ایجاد کنید که در آن فرم دوم خود را می خواهید.
آن دکمه را در قسمت "کلیک کنش" در صفحه تنظیمات دکمه سمت راست ویرایش کنید ، جایی که معمولاً URL ای را که به آن وصل می شوید قرار می دهید.
کد جعبه ای منحصر به فرد را برای جعبه ای که فرم شما را دارد اضافه کنید (می توانید با ویرایش کادر و پیمایش به پایین پانل سمت راست به "Element Metadata" بیابید)


دکمه ثبت نام



قسمت "کلیک بر روی اقدام" از پانل تنظیمات دکمه سمت راست



بخش "Metadata Element" در پایین پانل تنظیم عنصر سمت راست

فواید
اجرای سریع و آسان ، جاوا اسکریپت مستقیم یا دستکاری HTML کمی لازم است.

اشکالاتی
برای رسیدن به این هدف از دیدگاه کاربر روش های بسیار بهتری وجود دارد. حتی با پیمایش صاف (دیدن "امتیاز جایزه" در زیر) ، این تجربه می تواند برای کاربران کمی مشکل باشد ، به خصوص اگر آنها بخواهند به عقب برگردند تا اطلاعات دیگری را در یک صفحه بررسی کنند.

امتیاز جایزه
فقط اضافه کردن اینکه در as-is به معنای یک تجربه زیبا برای کاربران خواهد بود. با کلیک بر روی دکمه ، صفحه به فرم شما پرش می کند انگار که صفحه جدیدی بارگیری شده است. برای کمک به بازدید کنندگان در درک آنچه اتفاق می افتد ، پیمایش صاف را از طریق JavaScript اضافه کنید. Unbounce در اینجا اطلاعات چگونه دارد .

پاداش دو برابر
لنگرهای پیوند با هماهنگی قسمت بالای صفحه نمایش خود با قسمت بالای چیزی که لنگر انداخته اید ، کار می کنند. این می تواند به نظر برسد مانند شما کمی زیرپوش بگذارید ، زیرا فرم تقریباً در حال افتادن از صفحه است. می توانید با قرار دادن یک جعبه کوچک و یک پیکسلی در ابعاد کمی بالاتر از فرم ، بدون پر کردن یا حاشیه ، آن را حل کنید ، آن را به صورت دلخواه خود قرار دهید و به جای آن به شناسه آن جعبه پیوند دهید ، اجازه دهید کمی نفس بکشید. اتاق بالاتر از فرم شما



بدون و با جعبه یک پیکسلی برای صندلی مخصوص صندلی

2. iFrames
Unbounce اجازه می دهد تا بلوک های <HTML> رایگان ، که می توانید از آنها برای جاسازی فرم از سرویس دیگر یا حتی صفحه Unbounce دیگری استفاده کنید که فقط شامل یک فرم است. شما می توانید بلوک "سفارشی HTML" را از نوار سمت چپ به جایی که می خواهید فرم باشد بکشید و در کد iFrame خود بچسبانید.



بلوک "HTML سفارشی" در نوار سمت چپ



جعبه HTML خالی که ظاهر می شود



چگونه بلاک های HTML در ویرایشگر به نظر می رسند

فواید
این امر باعث می شود تا چندین فرم برای هر شکل متفاوت در صفحه قرار بگیرند ، به روشی متفاوت عمل کنند و همچنین برای ورود به هر فرم به صورت متفاوتی برچسب گذاری شود (که بینشی در مورد اثربخشی صفحه ارائه می دهد).

این راه حل همچنین به شما این امکان را می دهد تا از سایر سرویس ها ، مانند Wufoo ، بیشترین کارایی را داشته باشید (Unbounce روند کار را در اینجا مستند کرده است).

اشکالاتی
انتخاب Unbounce به عنوان فروشگاهی متوقف برای ایجاد صفحات فرود ، شکستن آن برای استفاده از فرم های خارجی می تواند قدمی از هدف اصلی در نظر گرفته شود. این همچنین باعث ایجاد عوارض در ساخت و ساز می شود ، زیرا نمی بینید که فرم در صفحه ویرایش چگونه به نظر می رسد. بنابراین گردش کار شما برای تغییرات می تواند به این صورت باشد:

فرم خارجی را تغییر دهید
صفحه را مرور کنید و موارد مربوط به یک ظاهر طراحی را ببینید
طرح را در ویرایشگر Unbounce تغییر دهید
صفحه را مرور کنید و ببینید که فرم خارجی قابل خواندن نیست
فرم خارجی را تغییر دهید
و غیره.
امتیاز جایزه
Unbounce نمی تواند تبدیلات را از طریق iFrame ردیابی کند ، بنابراین حتی اگر از صفحه Unbounce دیگری به عنوان شکلی که ترسیم می کنید استفاده می کنید ، می خواهید از ردیابی بومی Unbounce استفاده کنید. آنها یک اسکریپت در اینجا دارند که می توانید برای ردیابی موفقیت صفحه به طور متمرکز از بازدیدهای ردیابی خارجی استفاده کنید ، بنابراین بیشتر احساس می کنید که صفحات مجزا عملکرد خوبی دارند یا خیر.

پاداش دو برابر
حتی اگر شما از یک صفحه Unbounce یکسان استفاده می کنید تا دو بار قابلیت یکسان را بکشید ، تکمیل فرم را به طور متفاوتی برچسب گذاری کنید تا تصور کنید که آیا کاربران احتمالاً قبل از اینکه حواسشان پرت شود ، در بالای صفحه تغییر می کنند یا پایین می آید. هنگامی که آنها وقت خود را برای جذب مزایای ارائه شما داده اند.

3. فرم چسبنده (همیشه آنجا)
گزینه ای که همه چیز را در همان صفحه نگه می دارد فرم چسبنده ای است. می توانید از یک ظاهر طراحی CSS استفاده کنید تا آن را بر روی صفحه نمایش ثابت کنید و نه در صفحه ، سپس وقتی بازدید کننده شما به سمت پایین می رود ، فرم یا CTA با آنها سفر می کند - همیشه در دسترس باشید.

این کد CSS ساده یک فرم را در سمت راست یک صفحه برای عرض صفحه در بالای 800px برطرف می کند (این در حالی است که Unbounce از دسکتاپ به طراحی موبایل تغییر می یابد ، به این معنی که موقعیت یابی باید متفاوت باشد).

هر عنصر شناسه زیر مربوط به یک جعبه متفاوت است که می خواهم با هم حرکت کنیم. برای مطابقت با شناسه های مورد نظر برای حرکت به پایین صفحه با کاربر ، باید "lp-pom-box-xxx" را در زیر تغییر دهید (می توانید آن شناسه ها را در بخش "Metadata Element" پیدا کنید). راه حل دکمه لنگر بالا در بالا).


  <style>
 media (min-عرض: 800px)  
     موقعیت # lp-pom-box-56:: ثابت؛  سمت چپ: 50٪؛  حاشیه سمت چپ: 123px؛  بالا: 25٪؛  حاشیه بالا: -70px  
     # lp-pom-form-59 {موقعیت: ثابت؛  سمت چپ: 50٪؛  حاشیه سمت چپ: 141px؛  بالا: 25٪؛  حاشیه بالا: 60px  
     موقعیت # lp-pom-box-54:: ثابت؛  سمت چپ: 50٪؛  حاشیه سمت چپ: 123px؛  بالا: 25٪؛  حاشیه بالا: 50px}
 </style>


فواید
این به شما امکان می دهد تا در Unbounce پیگیری کنید. این بخش بسیاری از قسمتهای پشت و چهارم ساخت فرم را در جای دیگر بریده و سپس سعی می کند آن فرم را در یک iFrame بسازد ، در صفحه خود به روشی که می خواهید عمل کنید.

اشکالاتی
مشکلی که در این میان وجود دارد این است که کاربران می توانند به سرعت نسبت به CTA که با آنها سفر می کند ، نابینا شوند ، افزودن نوعی از توجه منظم به دنبال تأثیر ، احتمالاً فقط آنها را اذیت خواهد کرد. راه حل در اینجا اینست که تماس خود را برای اقدام یا فرم در طول قسمت هایی از صفحه مبهم کنید ، فقط برای مجدداً در سایر مواقع مناسب تر (مانند قسمت بعدی) دوباره ظاهر شوید.

دیدن دقیقاً کجای این فرم دشوار است زیرا تغییرات CSS شما در پیش نمایش ویرایشگر تأثیر نمی گذارد ، اما می توانید هنگام ذخیره و پیش نمایش صفحه ، تأثیر آن را مشاهده کنید.

4. فرم چسبنده (ظاهر و ناپدید می شوند)
ساده ترین راه برای دستیابی به این هدف ، استفاده از z-index است . به طور خلاصه ، z-index راهی برای برقراری ارتباط لایه ها از طریق HTML است ، تصویری با شاخص z 2 از همان جعبه با شاخص z 1 به کاربر نزدیکتر می شود ، بنابراین هنگام مشاهده صفحه آن را به نظر می رسد که تصویر جلوی جعبه است.

برای این روش به هر بخش از صفحه خود به نوعی جعبه مات نیاز دارید. جعبه را می توان با یک رنگ ، تصویر ، شیب پر کرد - تا زمانی که شفاف نباشد ، اهمیتی ندارد. بعد از گذاشتن جعبه ها ، از شاخص z آنها ، یادداشت برداری کنید که می توانید در بخش "Meta Data" در نوار تنظیمات سمت راست ، همان مکانی که Element ID نشان داده شده است ، پیدا کنید.



این جعبه دارای یک شاخص Z 31 است ، بنابراین چیزی با شاخص 30 را در بر می گیرد

سپس از CSS استفاده کنید تا عناصری را که در صفحه پایین می روید انتخاب کنید و شاخص z آنها را بر روی تعداد کمتری تنظیم کنید. در سطرهای زیر من دو عنصر را انتخاب کرده ام و شاخص z آنها را بر روی 30 قرار داده ام ، به این معنی که آنها در پشت جعبه بالا پنهان می شوند که دارای یک شاخص z 31 است. باز هم ، در اینجا می خواهید جایگزین کنید شناسه هایی که # lp-pom-box-xxxx را با همان شناسه هایی که در راه حل Sticky Form (Always There) استفاده کرده اید در بالا شروع می کنند .


  <style>   
     # lp-pom-box-133 {z-index: 30؛  }  
     # lp-pom-box-135 {z-index: 30؛  }
 </style>

هنگامی که می خواهید مکانی که می خواهید فرم شما دوباره قابل مشاهده باشد را انتخاب کنید ، فقط مواردی را که ممکن است فرم را در آن بخش گمنام کند حذف کنید. به نمای حرکت می کند.



فواید
به شما این امکان را می دهد تا فرم های کاملی را برای پر کردن کاربران در نقاط مختلف صفحه ارائه دهید ، بدون اینکه نگرانی در مورد تصویر زمینه بودن یا اینکه آیا می توانید با تبدیل های خارجی ازدواج کنید ، نباشد. استفاده از CSS فقط به این معنی است که دیگر لازم نیست نگران نباشید که کاربران جاوا اسکریپت را خاموش کنید (در حالی که امتیازهای زیر به جاوا اسکریپت تکیه می کنند ، در صورت خاموش بودن JavaScript ، این با کمال خرج می شود)

اشکالاتی
برخلاف روش iFrame ، این به شما امکان نمی دهد بیش از یک قالب فرم استفاده کنید. همچنین به دانش CSS کمی بیشتر احتیاج دارد (و امتیاز جایزه حداقل به JavaScript و آزمایش کمی نیاز دارد).

امتیاز جایزه
از JavaScript برای اعمال و حذف کلاسهای CSS بر اساس موقعیت پیمایش در صفحه استفاده کنید. برای مثال می توانید کلاسهای CSS مانند اینها ایجاد کنید که باعث می شود عناصر داخل و خارج از منظره محو شوند.

CSS:


  <style>
 media (min-عرض: 800px)    
    / * کدورت یک عنصر 0 را در جایی که این کلاس دارد ایجاد کنید * /  
        .پنهان شدن {  
        کدورت: 0؛
 }  
    / * به جای اینکه اثر را بلافاصله اعمال کنید ، آن را به تدریج طی 0.2 ثانیه * اعمال کنید. / .transition
    -webkit انتقال: همه 0.2s سهولت در داخل؛
        -Moz- انتقال: همه 0.2s سهولت در داخل؛
        -o-انتقال: همه 0.2s سهولت در داخل؛
        انتقال: همه 0.2s سهولت در داخل؛  
     }
 </style>

سپس کاربر می تواند از این JavaScript برای اعمال کلاس .hide استفاده کند ، وقتی کاربر از طریق نقاط مشخصی حرکت می کند ، و هنگام رسیدن به نقاطی که می خواهید فرم را پیدا کند ، آن را حذف کنید. این می تواند برای کنترل ریز دانه مکان که در آن ظاهر می شود ، بدون اینکه فقط آن را پوشانده شود ، استفاده شود. مانند گذشته ، برای مطابقت با شناسه در حساب خود ، باید رشته های # lp-pom-box-xxx را به روز کنید.

JavaScript:

  <script>
 // این اسکریپت کلاس "پنهان کردن" را ایجاد می کند ، که باعث می شود Opacity به صفر برسد ، در حالی که ما بیش از 100 پیکسل را از بالای صفحه دور می کنیم.  به طور مؤثر ، اگر از صفحه پایین برویم ، این موارد از بین می روند.
 $ (windows) .scroll (function ()
     if ($ (پنجره) .scrollTop ()> 100)
         $ ('# lp-pom-box-54'). addClass ('پنهان کردن')؛
         $ ('# lp-pom-box-228'). addClass ('مخفی کردن')؛  
 }
 // در این بخش اگر کمتر از 500 پیکسل از پایین صفحه وجود داشته باشد یا به بالا بپیچید تا از بالای 100 کمتر شود ، در این بخش کلاس مخفی کردن را حذف می کند.  این بدان معنی است که وقتی در پایین صفحه هستیم و یا به قسمت بالا برگردیم ، این عناصر دوباره مشاهده می شوند.
 if ($ (سند). قد () - ($ (پنجره). قد () + $ (پنجره) .scrollTop ()) <500 ||
 $ (windows) .scrollTop () <100) {
     $ ('# lp-pom-box-54'). removeClass ('پنهان کردن')؛
     $ ('# lp-pom-box-228'). removeClass ('پنهان کردن')؛
 }
 </script>

پاداش دو برابر
می توانید از JavaScript برای مخفی کردن یا نمایش دادن زمینه های فرم در نقاط مختلف استفاده کنید. برای مثال به شما امکان می دهد که شکل اولیه را در ابتدا نشان دهید ، و برای بار دوم ظاهر می شود ، با وجود اینکه در هر بار یک شکل است.

برای این کار ، شما فقط می توانید به عملکرد .scroll JavaScript خود در بالا اضافه کنید:


  if ($ (سند). قد () - ($ (پنجره). قد () + $ (پنجره) .scrollTop ()) <75)    
 // این قسمت قسمت "نام کامل" را پنهان می کند ، دکمه ارسال را به سمت بالا حرکت می دهد و وقتی از پایین صفحه به پایین تر از 75 پیکسل می روید ، اندازه جعبه را کاهش می دهد.
     $ ('# konten_full_name'). addClass ('پنهان کردن')؛
     $ ('# lp-pom-box-54'). stop (). animate ({قد: "200px"} ، 200)؛
     $ ('. lp-pom-button-60-unmoving'). animate ({بالا: '- = 75'} ، 200)؛
     $ ('# lp-pom-button-60'). removeClass ('lp-pom-button-60-unmoving')؛
     $ ('# lp-pom-button-60'). addClass ('lp-pom-button-60-move')؛}
     دیگری {
 // در این قسمت قسمت "نام کامل" را به فرم اضافه می کند ، دکمه ارسال را به پایین حرکت می دهد و در صورت برگشت به بالا اندازه جعبه را افزایش می دهد.
     $ ('# konten_full_name'). removeClass ('پنهان کردن')؛
     $ ('# lp-pom-box-54'). stop (). animate ({قد: "300px"} ، 200)؛
     $ ('. lp-pom-button-60-move'). animate ({بالا: '+ = 75'} ، 200)؛
     $ ('# lp-pom-button-60'). removeClass ('lp-pom-button-60-move')؛     
     $ ('# lp-pom-button-60'). addClass ('lp-pom-button-60-unmoving')؛


هنگام پیمایش در فاصله 75 پیکسل پایین صفحه ، جاوا اسکریپت ما قسمت Full Name را پنهان می کند ، اندازه جعبه را کاهش می دهد و دکمه را به سمت بالا حرکت می دهد. این ممکن است همه اتفاق بیفتد که فرم از دید پنهان باشد. من فقط این کار را انجام داده ام تا نمایش دهم.

نتیجه
در جدول زیر لیستی سریع از راه حل های مختلف و نقاط قوت و ضعف آنها را جمع آوری کرده ام.

راه حل

نقاط قوت

نقاط ضعف

دکمه لنگر پیمایش

اجرای آسان ، کد نویسی کمی لازم است

تجربه کاربر ناراحت کننده

iFrame

اشکال مختلف

نیاز به ایجاد فرم در جای دیگر دارد و برخی از پیچیدگی های یک ظاهر طراحی شده و آنالیز را به گردش کار معرفی می کند

فرم چسبنده (همیشه آنجا)

نگه می دارد و ردیابی طراحی را در یک پروژه Unbounce انجام می دهد

خستگی CTA ، استفاده از فضای صفحه زیادی

فرم چسبنده (ظاهر و ناپدید می شوند)

مزایای استفاده از فرم چسبنده ، به علاوه جلوگیری از خستگی CTA و نیاز به فضای بزرگ

دانش CSS مورد نیاز ، فقط می تواند از یک فرم استفاده کند

شخصاً مورد علاقه من گزینه Sticky Form (ظاهر و ناپدید شدن) برای کاهش نیاز به ادغام ابزارهای خارجی بوده است ، اما اگر مجبور شدم از چندین فرم مختلف استفاده کنم قطعاً می توانم با استفاده از iFrame تصور کنم.

کدام مورد مورد علاقه شماست؟ آیا هیچ راه حل جالب را از دست داده ام؟ در نظرات کاملاً راحت باشید .

درباره R0bin_L0rd - رابین یک تحلیلگر SEO در دفتر Distilled London است. او در جاهایی از ساسکس تا بنگلور هندوستان کار کرده است و هر بار خود را به سمت SEO جستجو می کند. در اوقات فراغت خود رابین تا آنجا که ممکن یاد می گیرد (پایتون آخرین رفع اوست) و هر وقت ممکن باشد سفر می کند ، اغلب به لطف سخاوت به ظاهر بی حد و حصر نزدیک به کل غریبه ها.