فرم تماس Divi یک ماژول بسیار انعطاف پذیر است که به شما امکان می دهد اطلاعات و مکاتبات را از بازدیدکنندگان وب سایت خود جمع آوری کنید. با استفاده از تنظیمات منطق شرطی تعبیه شده در ماژول فرم های تماس Divi، می توانید به راحتی فرم های پیچیده و پویا را برای وب سایت خود ایجاد کنید. این ویژگی به شما امکان می دهد بسته به پاسخ های داده شده به فیلدهای قبلی در فرم تماس خود، فیلدهای اضافی را نشان دهید تا بتوانید اطلاعات اضافی را جمع آوری کنید یا سؤالات بعدی را ارائه دهید که ممکن است فقط بر اساس پاسخ قبلی مرتبط باشد. برای مثال، ممکن است یک چک باکس برای نشان دادن علاقه به خدماتی که ارائه می کنید داشته باشید. اگر کادر انتخاب انتخاب شده باشد، می‌توانید یک منوی کشویی برای کاربران نشان دهید تا نوع سرویس مورد نظر خود را انتخاب کنند یا اطلاعات بیشتری به شما بدهند. با استفاده از منطق شرطی، همچنین فیلدهایی را که ممکن است برای هر کاربر مناسب نباشد، پنهان می‌کنید و فرم را ساده‌تر و در دسترس‌تر می‌کنید و احتمال اینکه شخصی فرم را پر کند افزایش می‌دهد.
موارد استفاده زیادی برای افزودن منطق شرطی به فرم شما وجود دارد، مهم نیست چه نوع وب سایتی دارید، و می تواند به بهبود تجربه کاربری کلی سایت شما کمک کند. در این آموزش، ما به شما نشان خواهیم داد که چگونه پس از علامت زدن کادری در فرم تماس Divi خود، یک منوی کشویی گزینه ها را آشکار کنید. بیا شروع کنیم!
یک نگاه یواشکی
در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است
آنچه برای شروع نیاز دارید
قبل از شروع، تم Divi را نصب و فعال کنید و مطمئن شوید که آخرین نسخه Divi را در وب سایت خود دارید.
حالا شما آماده رفتن هستید!
چگونه پس از علامت زدن کادری در فرم تماس Divi، یک منوی کشویی گزینه ها را آشکار کنیم
یک صفحه جدید با یک طرح از پیش ساخته شده ایجاد کنید
بیایید با استفاده از یک طرح از پیش ساخته شده از کتابخانه Divi شروع کنیم. برای این طراحی ما از صفحه فرود Home Baker از بسته طرح بندی Home Baker استفاده خواهیم کرد.
یک صفحه جدید به وب سایت خود اضافه کنید و به آن عنوان بدهید، سپس گزینه Use Divi Builder را انتخاب کنید.
برای این مثال از یک طرح‌بندی از پیش ساخته شده از کتابخانه Divi استفاده می‌کنیم، بنابراین View Layouts را انتخاب کنید.
در مرحله بعد، طرح بندی صفحه فرود Home Baker را جستجو و انتخاب کنید.
گزینه Use this layout را برای افزودن طرح به صفحه خود انتخاب کنید.
اکنون ما آماده ساختن طرح خود هستیم.
فرم تماس را اضافه کنید
به بخش «پذیرش سفارش‌های سفارشی» در طرح‌بندی Home Baker بروید. ما یک فرم تماس به این بخش اضافه می کنیم. ابتدا دکمه تماس با من را که در زیر متن عنوان قرار دارد حذف کنید.
سپس یک ماژول فرم تماس را در زیر متن عنوان وارد کنید.
ما باید چیدمان خود را طوری تنظیم کنیم که تمام فیلدها کل عرض فرم را اشغال کنند. تنظیمات ماژول فرم تماس را باز کنید، سپس تنظیمات قسمت Name را باز کنید.
به تب Design رفته و تنظیمات layout را باز کنید. فیلد Name را با عرض کامل ایجاد کنید.
همین مراحل را برای فیلد آدرس ایمیل تکرار می کنیم. تنظیمات فیلد ایمیل را باز کنید، سپس تنظیمات طرح بندی را در تب Design باز کنید و فیلد را روی تمام عرض تنظیم کنید.
در مرحله بعد، بیایید تنظیمات ضد هرزنامه خود را در تب Content تنظیمات فرم تماس تنظیم کنیم. برای این فرم از سرویس امنیتی ReCaptcha استفاده خواهم کرد.
- استفاده از سرویس حفاظت از هرزنامه: بله
- ارائه دهنده خدمات: ReCaptcha
یک کشویی با گزینه های افشا به فرم اضافه کنید
اکنون می‌توانیم فهرست کشویی خود را با گزینه‌های آشکار اضافه کنیم. برای این مثال، یک چک باکس به فرم اضافه می‌کنیم که از کاربران می‌پرسد آیا به سفارش کالاهای پخته شده سفارشی علاقه دارند یا خیر. اگر این کادر را علامت بزنید، یک کادر کشویی ظاهر می شود که در آن کاربر نوع پخته شده ای را که می خواهد سفارش دهد انتخاب می کند. بیا شروع کنیم.
ابتدا یک فیلد جدید به فرم اضافه کنید.
تنظیمات فیلد جدید را باز کنید و محتوای زیر را زیر تنظیمات متن اضافه کنید.
- شناسه فیلد: من علاقه مند هستم
- عنوان: به سفارش سفارشی علاقه دارید؟
سپس در قسمت گزینه های فیلد موارد زیر را تنظیم کنید:
- نوع: چک باکس ها
- گزینه ها: بله
- فیلد اجباری: خیر
به تنظیمات فرم تماس برگردید و یک فیلد جدید اضافه کنید. این منوی کشویی آشکار ما از گزینه‌ها خواهد بود که در آن مشتریان نوع کالاهای پخته‌شده‌ای را که می‌خواهند سفارش دهند انتخاب می‌کنند.
گزینه های فیلد جدید را باز کنید و شناسه و عنوان فیلد زیر را اضافه کنید:
- شناسه فیلد: چه نوع
- عنوان: چه نوع شیرینی؟
سپس Field Options را باز کرده و نوع فیلد را روی گزینه Dropdown Selection قرار دهید. سپس گزینه ها را اضافه کنید.
- نوع: منوی کشویی را انتخاب کنید
- تنظیمات:
- نان ها
- کیک ها
- کلوچه
- شیرینی
- دیگران
- فیلد اجباری: خیر
حالا به تب Conditional Logic رفته و تنظیمات Conditional Logic را فعال کنید. سپس قانون نمایش فیلد را بسته به چک باکس بالا تنظیم کنید.
- فعال سازی: بله
- قوانین: بهره برابر است با بله
این قانون فرم را طوری تنظیم می کند که اگر کادر “بله” انتخاب شود، قسمت “چه نوع کالاهای پخته شده” ظاهر می شود. اگر علامت چک باکس را بردارید، فیلد نوع پنهان می ماند.
طراحی فرم تماس را سفارشی کنید
هنگامی که فرم تماس و منطق شرطی ما تنظیم شد، می‌توانیم طراحی فرم را برای تناسب بهتر با طرح‌بندی صفحه سفارشی کنیم.
تنظیمات فرم تماس را باز کنید و به تب طراحی بروید. در زیر گزینه های فیلد، تنظیمات را به صورت زیر سفارشی کنید.
- رنگ پس زمینه فیلدها: #FFFFFF
- رنگ متن حاشیه: #906d5e
سپس padding فیلد را تنظیم کرده و تنظیمات فونت را سفارشی کنید.
- حاشیه‌ها در بالا: 16 پیکسل
- لایه بندی حاشیه های زیر: 16 پیکسل
- لایه‌بندی حاشیه‌های چپ: 20 پیکسل
- بالشتک حاشیه سمت راست: 20 پیکسل
- فونت Fields: Lato
- وزن قلم حاشیه: پررنگ
- سبک قلم حاشیه ها: تمام حروف (TT)
- فاصله حروف حاشیه: 0.1 em
حالا به تنظیمات دکمه بروید و استایل دکمه ها را به صورت زیر سفارشی کنید:
- استفاده از سبک های سفارشی برای دکمه: بله
- رنگ متن دکمه: #3b261e
- پس زمینه دکمه: #dcc087
سپس کادر دکمه و تنظیمات فونت را سفارشی کنید.
- رنگ قاب دکمه: #dcc087
- شعاع حاشیه دکمه: 0 پیکسل
- فاصله حروف دکمه ها: 0.1 em
- فونت دکمه: Lato
- وزن قلم دکمه: سنگین
- سبک قلم دکمه: همه حروف (TT)
سپس فیلد دکمه و پد را به صورت زیر تغییر دهید:
- حاشیه دکمه بالایی: 10 پیکسل
- بالشتک برای دکمه ها در بالا: 16 پیکسل
- بالشتک دکمه زیر: 16 پیکسل
- صفحه دکمه سمت چپ: 32 پیکسل
- پد دکمه سمت راست: 32 پیکسل
در نهایت، تنظیمات حاشیه را برای اضافه کردن حاشیه‌ها در اطراف ورودی‌های فرم تغییر می‌دهیم.
- عرض حاشیه را وارد می کند: 1 پیکسل
- رنگ قاب ورودی: #3b261e
نتیجه نهایی
این طرح کامل فرم تماس را تکمیل می کند. بیایید نگاهی به فرم در عمل با گزینه های بازشوی افشاگری بیندازیم.
افکار نهایی
پیاده سازی منطق شرطی در ماژول فرم تماس Divi آسان است و به شما امکان می دهد فرم های پویا ایجاد کنید که فیلدهای مرتبط را بر اساس پاسخ های قبلی کاربر ارائه می دهد. اگرچه مثال در این آموزش نسبتا ساده است، اما می توانید از منطق شرطی برای ایجاد فرم های پیچیده با چندین نمونه از منطق شرطی استفاده کنید. برای کسب اطلاعات بیشتر در مورد کارهایی که می توانید با فرم تماس Divi و منطق شرطی انجام دهید، این مقاله را در مورد نحوه ایجاد فرم تماس جهانی Divi با منطق شرطی بررسی کنید. آیا از گزینه های منطق شرطی در فرم تماس وب سایت خود استفاده کرده اید؟ ما دوست داریم از شما در نظرات بشنویم!