Contact Form 7 – Conditional Fields افزونه منطق شرطی فرم تماس 7

افزونه فرم تماس 7 یکی از بهترین افزونه های فرم ساز وردپرس است که اگرچه قابلیت های هسته اصلی آن محدود است اما لیستی از افزودنی های قدرتمند دارد که فرم های ساخته شده با فرم تماس 7 را به سطح بالاتری می رساند. افزونه Contact Form 7 – Conditional Fields یکی از این افزونه ها است که با استفاده از آن می توانید منطق شرطی را به فرم تماس 7 اضافه کنید.

لیستی از افزودنی های فرم تماس 7 را می توانید در مقاله افزودنی های جانبی فرم تماس 7 مشاهده کنید.

در این مقاله افزونه Contact Form 7 – Conditional Fields را مورد بررسی قرار داده و نحوه استفاده از آن را آموزش می دهیم.

آموزش افزونه Contact Form 7 – Conditional Fields و اضافه کردن منطق شرطی در فرم تماس 7

توجه داشته باشید که برای استفاده از این افزونه باید افزونه فرم تماس 7 را در سایت وردپرس خود نصب کرده باشید.

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. نحوه کار با این افزونه را با یک مثال توضیح می دهیم. فرض کنید می خواهید فرمی مشابه شکل زیر تولید کنید.

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

می خواهیم با افزونه Contact Form 7 – Conditional Fields فرمی ایجاد کنیم که کارهای زیر را انجام دهد:

• کاربر بتواند پشتیبانی مورد نظر خود را از بین دو گزینه فنی و فروش انتخاب کند.
• اگر پشتیبانی فنی نیاز داشته باشد، کاربر باید بتواند سیستم عامل (OS) خود را از لیست کشویی انتخاب کند.
• پس از انتخاب سیستم عامل مورد نظر خود، کاربر باید بتواند نسخه مورد نظر خود را هم مشخص کند. برچسب آن قسمت باید متناسب با انتخاب کاربر تغییر کند.
• همچنین کاربر باید بتواند گزینه “دیگر” را انتخاب کند. در این حالت باید دو فیلد یکی برای تعیین سیستم عامل و دیگری نسخه در اختیار کاربر قرار داد.
• اگر سوال مربوط به فروش باشد، یک منوی کشویی به کاربر ارائه شود که بتواند شهر یا قاره خود را انتخاب کند.
• پس از ارسال فرم، کاربر به طور خودکار یک پیام شخصی دریافت کند. پیامی که دریافت می کند بسته به چیزی که در لیست کشویی نوع پشتیبانی انتخاب کرده متفاوت است.

بهترین کاری است که می توانیم بدون منطق مشروط انجام دهیم وارد کردن کد زیر است.

نام شما: [text your-name]
آدرس ایمیل شما: [email* your-email]

چه نوع پشتیبانی نیاز دارید؟
[select* support-type first_as_label "-- انتخاب نوع پشتیبانی --" "Technical support" "Sales"]

سیستم عامل شما: [select* operating-system first_as_label "-- انتخاب نوع سیستم عامل --" "Android" "iOS" "Linux" "Windows"]

در صورتی که پشتیبانی فنی را انتخاب کرده اید لطفاً نسخه سیستم عامل خود را انتخاب کنید
: [text version]

در صورتی که فروش را انتخاب کرده اید مشخص کنید کسب و کار شما در کجا واقع شده است?:
 [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]

[textarea comments]

[submit "Send"]

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

ایجاد گروه با افزونه Contact Form 7 – Conditional Fields

افزونه Contact Form 7 – Conditional Fields به شما امکان می دهد برای پنهان کردن قسمتهای خاصی از فرم این قسمتها را بین تگ های [group group-name] … [/group] قرار دهید. شما می توانید این کد را تایپ کنید اما با کلیک روی دکمه Conditional Fields Group در بالای صفحه هم می توانید آن را ایجاد کنید.

بعد از کلیک روی این برچسب، یک پنجره پاپ آپ مشابه شکل زیر ظاهر می شود.

در این پنجره می توانید نامی برای گروه انتخاب کنید. همچنین می توانید یکی از گزینه های زیر را انتخاب کنید:

• Clear on hide: با انتخاب این گزینه، لحظه ای که گروه پنهان شود، تمام فیلدهای گروه پاک می شوند.
• Inline: با انتخاب این گزینه، گروه به جای تگ <div> به صورت تگ <span> ارائه می شود. (توجه داشته باشید که قرار دادن عناصر سطح بلوک مانند <div> در داخل عناصر درون خطی مانند <span> در HTML نامعتبر است.)

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

[group technical-support-selected]
سیستم عامل شما: [select* operating-system first_as_label "-- سیستم عامل خود را انتخاب کنید --" "Android" "iOS" "Linux" "Windows"]
 نسخه سیستم عامل خود را انتخاب کنید:
: [text version]
[/group]

توجه داشته باشید که گروه ها می توانند تودرتو شوند. بنابراین ، می توان گروهی را با فیلدی اضافه کرد که کاربر بتواند نسخه سیستم عامل خود را در داخل گروه پشتیبانی فنی مشخص کند.

[group technical-support-selected]
سیستم عامل شما: [select* operating-system first_as_label "-- انتخاب سیستم عامل --" "Android" "iOS" "Linux" "Windows"]
    [group os-selected]
 نسخه سیستم عملیاتی خود را انتخاب کنید:
: [text version]
    [/group]
[/group]

اگر فرم را در این مرحله ذخیره کنید، هر چیزی که بین برچسب های گروه قرار گرفته است، در فرانت اند قابل مشاهده نیست. این ویژگی خیلی مفید نیست بنابراین ، به مرحله بعدی بروید!

اضافه کردن منطق شرطی

برای اینکه یک گروه در صورت تحقق برخی شرایط ظاهر شود، باید قوانین شرطی اضافه کنید و افزونه Contact Form 7 – Conditional Fields این امکان را به شما می دهد.

ابتدا مطمئن شوید که فرم را ذخیره کرده اید و سپس روی تب Conditional fields کلیک کنید. صفحه ای مشابه شکل زیر مشاهده می کنید.

روی دکمه add new conditional rule کلیک کنید و اطلاعات زیر را وارد کنید:

این قانون اطمینان خواهد داد که گروه technical-support-selected  پس از اینکه کاربر گزینه “Technical-support” یا “پشتیبانی فنی” را انتخاب کرد از لیست کشویی قابل مشاهده خواهد بود. حال قانون دیگری ایجاد کنید:

show [os-selected] if [operating-system] not equals ""

این قانون باعث می شود که پس از انتخاب سیستم عامل توسط کاربر، قسمت متن نسخه یا Version ظاهر شود. ما با بررسی اینکه گزینه انتخاب شده در لیست کشویی برابر با یک رشته خالی نیست، به این مهم دست پیدا می کنیم. (توجه داشته باشید، از آنجا که از first_as_label استفاده می کنیم، مقدار – سیستم عامل خود را انتخاب کنید- واقعاً تنظیم نشده است. اگر گزینه first_as_label را حذف کنیم، شرایط به صورت زیر است:

show [os-selected] if [operating-system] not equals "-- سیستم عامل خود را انتخاب کنید --"

این تنظیمات اگرچه مناسب است اما هنوز نیاز است که با افزونه Contact Form 7 – Conditional Fields فرم پیشرفته تری بسازیم. اگر کاربر “دیگر” را از لیست کشویی انتخاب کند، نمی خواهیم گروه [os-selected] نشان داده شود؛ در عوض می خواهیم 2 قسمت دیگر را نشان دهد که کاربر بتواند نسخه سیستم عامل خود را مشخص کند.

بنابراین می خواهیم [os-selected] پنهان شود اگر شرط بالا برآورده شود و اگر[operating-system] برابر با “دیگر” نباشد. برای دستیابی به این هدف می توانیم بر روی دکمه And در کنار شرط اول کلیک کرده و قسمتهای زیر را پر کنیم:

حال اگر هر سیستم عاملی غیر از Other انتخاب شود، گروه [os-selected] نشان داده می شود.

در مرحله بعد، فرم را تمام کرده و همه شرایط را اضافه می کنیم.

فرم تمام شده با افزونه Contact Form 7 – Conditional Fields

اگر می خواهید فرم موجود در ابتدای این مقاله را تولید کنید، کافی است کد زیر را در فرم تماس 7 خود جای گذاری کنید.

<label>نام:<br>[text your-name]</label>
<label>آدرس ایمیل:<br>[email* your-email]</label>
<label>به چه نوع پشتیبانی نیاز دارید؟<br>[select* support-type first_as_label "-- انتخاب نوع پشتیبانی --" "Technical support" "Sales"]</label>
[group technical-support-selected]
  <label>سیستم عامل شما:<br>[select* operating-system first_as_label "-- انتخاب سیستم عامل --" "Android" "iOS" "Linux" "Windows" "Other"]</label>
  [group os-selected]
<label>لطفاً مشخص کنید [group os-android inline]Android[/group][group os-iOS inline]iOS[/group][group os-linux inline]Linux[/group][group os-windows inline]Windows[/group] version:<br>[text* version]</label>
  [/group]
  [group os-other-selected]
    <label>لطفاً سیستم عامل خود را مشخص کنید<br>[text* other-os]</label>
    <label>لطفاً نسخه خود را مشخص کنید<br>[text* other-version]</label>
  [/group]
[/group]
[group sales-support-selected]
  <label>کسب و کار شما در کجا واقع شده است?<br>[select* continent first_as_label "-- قاره خود را انتخاب کنید --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]</label>
[/group]
<label>کامنت ها<br>[textarea comments]</label>
[submit "ارسال"]

فرم را ذخیره کنید، به تب Conditional Fields بروید و مد متنی Text mode را روشن کنید.

حال کد زیر را در صفحه جایگذاری کرده و تغییرات را ذخیره کنید.

show [technical-support-selected] if [support-type] equals "Technical support"
show [sales-support-selected] if [support-type] equals "Sales"
show [os-selected] if [operating-system] not equals ""
               and if [operating-system] not equals "Other"
show [os-android] if [operating-system] equals "Android"
show [os-iOS] if [operating-system] equals "iOS"
show [os-linux] if [operating-system] equals "Linux"
show [os-windows] if [operating-system] equals "Windows"
show [os-other-selected] if [operating-system] equals "Other"

کد کوتاه فرم تماس 7 خود را در صفحه جدید کپی کرده و صفحه را منتشر کنید.

سفارشی سازی پیام ایمیل

با استفاده از افزونه  Conditional Fields for Contact Form 7 ، می توانید پیام های ایمیل خود را براساس آنچه قوانین مشروط در هنگام ارسال فرم رعایت کرده اند، شخصی سازی کنید. با این کار می توانید کارهای بسیار پیچیده ای انجام دهید.

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

پیام سفارشی را می توان به صورت زیر ایجاد کرد:

[technical-support-selected]
متشکریم که سوال پشتیبانی فنی خود را ارسال کردید[/technical-support-selected][sales-support-selected]
متشکریم از سوال فروش شما[/sales-support-selected]

توجه داشته باشید که ما برچسب [sales-support-selected] را مستقیماً پس از بستن برچسب  [/technical-support-selected] باز می کنیم ، این امر به منظور جلوگیری از ظاهر شدن فضای سفید ناخواسته در پیام ایمیل است.

در مرحله بعدی می توانیم یک جدول با تمام زمینه ها مانند زیر ایجاد کنیم:

<table>
<tr><td>your-name</td><td>[your-name]</td></tr>
<tr><td>your-email</td><td>[your-email]</td></tr>
<tr><td>support-type</td><td>[support-type]</td></tr>
[technical-support-selected]
  <tr><td>operating-system</td><td>[operating-system]</td></tr>
  [os-selected]
    <tr><td>version</td><td>[version]</td></tr>
  [/os-selected]
  [os-other-selected]
    <tr><td>other-os</td><td>[other-os]</td></tr>
    <tr><td>other-version</td><td>[other-version]</td></tr>
  [/os-other-selected]
[/technical-support-selected]
[sales-support-selected]
  <tr><td>continent</td><td>[continent]</td></tr>
[/sales-support-selected]
<tr><td>comments</td><td>[comments]</td></tr>
</table>

جمع بندی

افزونه فرم تماس 7 یک افزونه فرم ساز قدرتمند است که با استفاده از افزودنی های جانبی آن مانند افزونه Contact Form 7 – Conditional Fields می توانید انواع فرم ها را بسازید.

امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.

دانلود افزونه