نحوه ایجاد فرم‌های پویا با منطق شرطی

نحوه ایجاد فرم‌های پویا با منطق شرطی

فرم‌های استاتیک از همه سوالات یکسانی می‌پرسند. فرم‌های دینامیک خود را وفق می‌دهند. «درخواست کسب و کار» را انتخاب کنید تا فیلدهای شرکت ظاهر شوند. «سایر» را انتخاب کنید تا یک کادر متنی باز شود. با پاسخ «بله» سوالات بعدی خود را نشان می‌دهند. منطق شرطی، پرسشنامه‌های خشک را به مکالمات هوشمندی تبدیل می‌کند که به موقعیت هر کاربر پاسخ می‌دهند.

در این راهنما، یاد خواهید گرفت که چگونه فرم‌های پویا با منطق شرطی ایجاد کنید که فیلدهای مناسب را به افراد مناسب در زمان مناسب نشان دهند.

چه چیزی یک فرم را پویا می‌کند؟

فرم استاتیک

  • هر کاربر هر فیلدی را می‌بیند
  • ساختار ثابت
  • بدون انطباق
  • تک سایز

فرم پویا

  • فیلدها بر اساس پاسخ‌ها نمایش داده می‌شوند
  • با زمینه کاربر سازگار می‌شود
  • تجربه شخصی
  • فقط سوالات مرتبط نمایش داده می‌شود

تفاوت

ایستا: نام → ایمیل → تلفن → شرکت → بودجه → پیام (همه هر ۶ مورد را می‌بینند) پویا: نام → ایمیل → "نوع درخواست؟" → اگر شخصی: تلفن → پیام (۴ فیلد) → اگر کسب و کار: شرکت → تلفن → بودجه → پیام (۶ فیلد)

منطق شرطی چگونه کار می‌کند؟

ساختار اساسی

اگر [شرط برقرار باشد] آنگاه [نمایش/پنهان کردن فیلد(ها)]

اجزاء

  • فیلد محرک: میدانی که تعیین می‌کند چه اتفاقی می‌افتد
  • وضعیت: چه مقداری باعث فعال شدن عمل می‌شود؟
  • عمل: نمایش یا پنهان کردن
  • فیلد(های) هدف: آنچه ظاهر می‌شود یا ناپدید می‌شود

مثال

تریگر: «آیا شما از مشتریان فعلی هستید؟» شرط: مقدار برابر با «بله» است. اقدام: نمایش هدف: فیلد «شناسه مشتری»

ایجاد اولین فرم پویا

مرحله ۱: منطق خود را برنامه‌ریزی کنید

قبل از ساخت، نقشه برداری کنید:

  • چه سوالات برانگیزنده‌ای خواهید پرسید؟
  • چه فیلدهایی به کدام پاسخ‌ها بستگی دارند؟
  • پیش‌فرض (پنهان یا نمایش داده شده) چیست؟

مرحله 2: ساخت فرم پایه

  1. فرم خود را در A.F.B.
  2. اضافه کردن همه فیلدها (هم فیلدهای همیشه نمایش داده شده و هم فیلدهای مشروط)
  3. به ترتیب منطقی مرتب کنید

مرحله ۳: شناسایی فیلدهای محرک

فیلدهای تریگر خوب:

  • منوی کشویی با دسته‌بندی‌های واضح
  • دکمه‌های رادیویی (بله/خیر، انتخاب نوع)
  • کادرهای انتخاب

مرحله ۴: تنظیم شرایط

  1. فیلد هدف (فیلدی که قرار است نمایش داده شود/پنهان شود) را انتخاب کنید.
  2. تنظیمات منطق شرطی را باز کنید
  3. فیلد ماشه را انتخاب کنید
  4. شرط را تنظیم کنید (برابر است، شامل می‌شود و غیره)
  5. تعریف عمل (نمایش/پنهان کردن)

مرحله ۵: تست تک تک مسیرها

  1. پیش‌نمایش فرم
  2. هر گزینه تریگر را آزمایش کنید
  3. تأیید کنید که فیلدهای صحیح نمایش داده شوند
  4. ارسال نمونه سوالات آزمون
  5. بررسی کنید که داده‌ها به درستی ذخیره شوند

الگوهای رایج فرم پویا

الگوی ۱: پیگیری بله/خیر

ساختار:

آیا وب‌سایت دارید؟ ○ بله ○ خیر اگر بله → نمایش: فیلد "آدرس وب‌سایت" اگر خیر → نمایش: فیلد "آیا برای ایجاد وب‌سایت به کمک نیاز دارید؟"

استفاده برای: سوالات مقدماتی با دنباله‌های مختلف

الگوی ۲: شاخه‌بندی دسته‌بندی‌ها

ساختار:

چه نوع درخواستی؟ ○ فروش ○ پشتیبانی ○ صورتحساب ○ سایر موارد فروش → نمایش: بودجه، جدول زمانی، اندازه شرکت → پشتیبانی → نمایش: شماره سفارش، شرح موضوع → صورتحساب → نمایش: شماره فاکتور، ایمیل حساب → سایر موارد → نمایش: قسمت متن "لطفاً توضیح دهید"

استفاده برای: سوالات مختلف برای انواع مختلف کاربران

الگوی ۳: مشخصات «دیگر»

ساختار:

چطور از ما باخبر شدید؟ ☐ گوگل ☐ شبکه‌های اجتماعی ☐ دوست ☐ سایر در صورت انتخاب سایر → نمایش: فیلد متنی "لطفاً مشخص کنید"

استفاده برای: ثبت پاسخ‌های سفارشی

الگوی ۴: افشای تدریجی

ساختار:

اطلاعات اولیه: نام، ایمیل (همیشه نمایش داده می‌شود) آیا می‌خواهید جزئیات بیشتری ارائه دهید؟ ○ بله ○ خیر در صورت بله → نمایش: شرکت، تلفن، شرح پروژه، بودجه

استفاده برای: اطلاعات دقیق اختیاری

الگوی ۵: آپلود فایل مشروط

ساختار:

آیا مدارک پشتیبان دارید؟ ○ بله ○ خیر در صورت بله → نمایش: فیلد آپلود فایل

استفاده برای: پیوست‌های اختیاری

الگوی ۶: مشتری در مقابل مشتری بالقوه

ساختار:

آیا شما مشتری فعلی ما هستید؟ ○ بله ○ خیر اگر بله → نمایش: شناسه مشتری، ایمیل حساب کاربری اگر خیر → نمایش: شرکت، از چه طریقی با ما آشنا شدید؟

استفاده برای: جریان‌های مختلف برای سیستم‌های موجود در مقابل سیستم‌های جدید

ساخت یک فرم پویای کامل: مثال

فرم درخواست خدمات

فیلدهای همیشه قابل مشاهده:

  • نام (مورد نیاز)
  • پست الکترونیک (لازم)
  • علاقه به خدمات (منوی کشویی – تریگر)

گزینه‌های مربوط به خدمات:

  • طراحی وب سایت
  • SEO
  • بازار یابی (Marketing)
  • مشاور
  • دیگر

فیلدهای شرطی:

طراحی وب سایت IF:

  • آدرس اینترنتی فعلی وب‌سایت
  • تعداد صفحات مورد نیاز
  • تنظیمات طراحی (منوی کشویی)

اگر سئو:

  • آدرس اینترنتی فعلی وب‌سایت
  • کلمات کلیدی هدف (ناحیه متن)
  • محدوده بودجه ماهانه

بازاریابی اگر:

  • کانال‌های بازاریابی (چک‌باکس‌ها)
  • مخاطبان
  • محدوده بودجه ماهانه

مشاوره IF:

  • موضوع مشاوره
  • زمان ملاقات ترجیحی

اگر موارد دیگر:

  • لطفا توضیح دهید (ناحیه متن)

همیشه قابل مشاهده (بعد از شرط):

  • نکات تکمیلی (اختیاری)
  • دکمه ارسال

نتیجه

  • بازدیدکنندگان طراحی وب 6 فیلد را مشاهده می‌کنند
  • بازدیدکنندگان سئو 6 فیلد را مشاهده می‌کنند
  • بازدیدکنندگان بازاریابی ۶ فیلد را مشاهده می‌کنند
  • بازدیدکنندگان مشاور ۵ فیلد را مشاهده می‌کنند
  • سایر بازدیدکنندگان ۴ فیلد را مشاهده می‌کنند

انواع شرایط

برابر

اگر [فیلد] برابر با "مقدار" باشد

تطابق دقیق لازم است.

برابر نیست

اگر [فیلد] برابر با "مقدار" نباشد

هر چیزی به جز آن ارزش.

شامل

اگر [فیلد] شامل "متن" باشد

مقدار، متن را در جایی شامل می‌شود.

خالی است

اگر [فیلد] خالی باشد

هیچ مقداری وارد نشده است.

خالی نیست

اگر [فیلد] خالی نباشد

هر مقداری که وارد شده باشد.

بزرگتر از / کوچکتر از

اگر [فیلد عددی] بزرگتر از ۱۰۰ باشد. اگر [فیلد عددی] کوچکتر از ۵۰ باشد.

مقایسه‌های عددی.

شرایط چندگانه

و منطق

نمایش فیلد اگر: سرویس = "سازمانی" و بودجه > 10000 و جدول زمانی = "این سه ماهه"

همه شرایط باید درست باشند.

یا منطق

نمایش فیلد اگر: سرویس = "طراحی وب" یا سرویس = "سئو" یا سرویس = "بازاریابی"

هر شرطی که درست باشد کافی است.

ترکیب AND/OR

نمایش فیلد اگر: (خدمات = "طراحی وب" یا خدمات = "سئو") و بودجه > 5000

برای منطق پیچیده مخلوط کنید.

بهترین شیوه‌ها برای فرم‌های پویا

1. Simple را شروع کنید

  • با یک یا دو شرط شروع کنید
  • به تدریج پیچیدگی را اضافه کنید
  • هر مورد اضافه شده را آزمایش کنید

۲. منطق را پاک نگه دارید

  • از سوالات محرک واضح استفاده کنید
  • از وابستگی‌های گیج‌کننده اجتناب کنید
  • منطق خود را مستند کنید

۳. موقعیت‌یابی منطقی فیلدها

  • فیلدهای شرطی پس از فعال شدن ظاهر می‌شوند
  • حفظ جریان طبیعی
  • فیلدهای مرتبط با گروه

۴. مدیریت فیلدهای الزامی

  • فیلدهای پنهان نباید الزامی باشند
  • فقط در صورت مشاهده، الزامی کنید
  • ارسال تست با فیلدهای الزامی پنهان

۳. بازخورد بصری ارائه دهید

  • انیمیشن‌های روان برای نمایش فیلدها
  • انتقال‌های واضح
  • بدون تغییرات تکان دهنده

۶. همه مسیرها را آزمایش کنید

  • هر گزینه تریگر
  • هر ترکیبی در صورت استفاده از AND/OR
  • موبایل و دسکتاپ
  • مرورگرهای مختلف

مثال‌های فرم پویا در دنیای واقعی

مثال ۱: ثبت رویداد

ماشه: نوع حضور و غیاب

  • حضوری → نمایش: محدودیت‌های غذایی، اندازه تی‌شرت، تماس اضطراری
  • مجازی → نمایش: منطقه زمانی، ترجیح پلتفرم
  • ترکیبی → نمایش: همه موارد فوق

مثال ۲: درخواست کار

ماشه: نوع موقعیت

  • تمام وقت → نمایش: حقوق مورد انتظار، تاریخ شروع
  • پاره وقت → نمایش: ساعات کاری موجود، تنظیمات برنامه زمانی
  • قرارداد → نمایش: نرخ ساعتی، مدت زمان پروژه

مثال ۳: درخواست پشتیبانی

ماشه: دسته بندی مسائل

  • فنی → نمایش: مرورگر، سیستم عامل، پیام خطا، آپلود اسکرین شات
  • صورتحساب → نمایش: شماره سفارش، شماره فاکتور
  • حساب کاربری → نمایش: نام کاربری، ایمیل حساب کاربری
  • درخواست ویژگی → نمایش: شرح ویژگی، مورد استفاده

مثال ۴: درخواست قیمت

ماشه: نوع پروژه

  • وب‌سایت جدید → نمایش: صنعت، تعداد صفحات، ویژگی‌های مورد نیاز
  • طراحی مجدد → نمایش: نشانی اینترنتی فعلی، چه چیزهایی را نگه داریم، چه چیزهایی را تغییر دهیم
  • نگهداری → نمایش: آدرس اینترنتی فعلی، وظایف مورد نیاز، تعداد دفعات مراجعه

مثال ۵: فرم بازخورد

ماشه: رتبه‌بندی رضایت

  • ۱-۳ (کم) → نمایش: «چه مشکلی پیش آمد؟» textarea
  • ۴-۵ (زیاد) → نمایش: «چه کاری را خوب انجام دادیم؟» textarea

عیب‌یابی فرم‌های پویا

فیلد نمایش داده نمی‌شود

  • بررسی کنید که شرایط به درستی تنظیم شده باشد
  • تأیید کنید که مقدار فیلد تریگر دقیقاً مطابقت دارد
  • بررسی غلط املایی در مقادیر شرط
  • تأیید کنید که عملکرد «نمایش» است، نه «مخفی کردن»

فیلد پنهان نیست

  • وضعیت پیش‌فرض را تأیید کنید (باید از حالت پنهان شروع شود)
  • منطق شرط را بررسی کنید
  • پاک کردن حافظه پنهان مرورگر

فیلدهای الزامی مسدود کردن ارسال

  • فیلدهای پنهان نباید الزامی باشند
  • تنظیم فقط در صورت قابل مشاهده بودن لازم است
  • تنظیمات مورد نیاز مشروط را بررسی کنید

منطق روی موبایل کار نمی‌کند

  • تست روی دستگاه واقعی
  • بررسی خطاهای جاوا اسکریپت
  • رفتار واکنش‌گرا را تأیید کنید

داده‌ها به درستی ذخیره نمی‌شوند

  • بررسی مدیریت داده‌های فیلدهای پنهان
  • بررسی کنید که آیا مقادیر پنهان باید پاک شوند یا خیر
  • ارسال تست برای هر مسیر

تکنیک‌های پیشرفته فرم پویا

شرایط زنجیروار

فیلد A، فیلد B را فعال می‌کند که آن هم فیلد C را فعال می‌کند:

نوع خدمات → اگر "شرکتی" → نمایش: اندازه شرکت → اگر "۱۰۰۰+" → نمایش: کادر انتخاب مدیر حساب اختصاصی

بخش‌های شرطی

نمایش/پنهان کردن گروه‌های فیلدها با هم:

اگر "نیاز به ارسال" = بله → نمایش کل بخش آدرس ارسال (۵ فیلد)

مسیریابی مشروط ایمیل

گیرندگان مختلف بر اساس انتخاب‌ها:

اگر دپارتمان = "فروش" → ایمیل به [ایمیل محافظت شده]
اگر دپارتمان = "پشتیبانی" → ایمیل به [ایمیل محافظت شده]

پیام‌های تأیید مشروط

پیام‌های تشکر متفاوت:

اگر نوع درخواست = "فروش" → نمایش: "تیم فروش ما ظرف 24 ساعت با شما تماس خواهد گرفت" اگر نوع درخواست = "پشتیبانی" → نمایش: "تیکت ایجاد شد. برای شماره تیکت، ایمیل را بررسی کنید"

پرسش و پاسخهای متداول

چند تا شرط می‌تونم داشته باشم؟

از نظر فنی نامحدود است، اما آن را قابل مدیریت نگه دارید. ۵ تا ۱۰ شرط برنامه‌ریزی‌شده به خوبی کار می‌کنند. بیش از ۱۵ تا ۲۰ شرط معمولاً به این معنی است که فرم باید تقسیم شود.

آیا فیلدهای پنهان هنوز داده ارسال می‌کنند؟

بستگی به پیاده‌سازی دارد. معمولاً فیلدهای پنهان ارسال نمی‌شوند (داده‌های تمیزتر). برخی سیستم‌ها مقادیر خالی ارسال می‌کنند. تنظیمات خاص خود را آزمایش کنید.

آیا می‌توانم از شرط‌ها در دکمه ارسال استفاده کنم؟

به طور کلی، دکمه ارسال را همیشه قابل مشاهده نگه دارید. پنهان کردن آن کاربران را گیج می‌کند. به جای آن از فیلدهای الزامی مشروط برای کنترل جریان استفاده کنید.

آیا منطق شرطی، فرم من را کند می‌کند؟

پیاده‌سازی‌های مدرن تأثیر ناچیزی بر عملکرد دارند. فقط منطق بسیار پیچیده با فیلدهای زیاد ممکن است باعث تأخیرهای جزئی شود.

آیا می‌توانم بدون ارسال، تست کنم؟

برای آزمایش قابلیت مشاهده از حالت پیش‌نمایش استفاده کنید. برای آزمایش کامل شامل ارسال داده‌ها، از ارسال‌های آزمایشی که می‌توانید حذف کنید استفاده کنید.

خلاصه

ایجاد فرم‌های پویا با منطق شرطی:

  1. منطق خود را برنامه‌ریزی کنید – محرک‌ها، شرایط و اهداف را نقشه‌برداری کنید
  2. ساخت فرم پایه – همه فیلدها، به درستی مرتب شده اند
  3. فیلدهای تریگر را اضافه کنید – منوهای کشویی، دکمه‌های رادیویی، چک باکس‌ها
  4. شرایط را تنظیم کنید – تریگرها را به فیلدهای هدف متصل کنید
  5. پیکربندی نمایش/پنهان کردن - تعریف کنید چه چیزی چه زمانی ظاهر شود
  6. الزامات رسیدگی - فقط در صورت قابل مشاهده بودن لازم است
  7. به طور کامل تست کنید - هر مسیر، هر دستگاه

نتیجه

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

سازنده فرم خودکار افزونه منطق شرطی، ایجاد فرم‌های پویا را ساده می‌کند. قوانین نمایش/پنهان کردن را با یک رابط بصری تنظیم کنید، از منطق AND/OR برای شرایط پیچیده استفاده کنید و فرم‌هایی بسازید که با هر کاربری سازگار باشند.

آماده ایجاد فرم‌های پویا هستید؟ دانلود فرم ساز خودکار و شروع به ساخت فرم‌هایی کنید که هوشمندانه به ورودی کاربر پاسخ می‌دهند.

پاسخ دهید

آدرس ایمیل شما منتشر نخواهد شد. بخشهای موردنیاز علامتگذاری شده اند *