ایجاد فرم های چند مرحله ای با Contact Form 7

سلام خدمت کاربران همیشگی نوین وردپرس

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

با ادمه مطلب با ما باشید:

اگر شما فرم تماس ۷ را در وردپرس خود نصب کرده اید، می توانید با نصب کردن افزونه ی “Contact Form 7 Multi-Step Forms” به سایت خود امکان فرم های چند مرحله ای شدن را بدهید. بعد از نصب این افزونه گزینه ای در منوی فرم تماس۷ اضافه می شود.بعد از نصب افزونه برای ساخت یه فرم به سراف افزونه می رویم

در این قسمت از فرم تماس ۷، سه گزینه ی “hidden field، form value، back button”اضافه می شود که هر کدام به ابزار های این افزونه مربوط می شود

طبق مراحل پیش میرویم:

مرحله اول : فرم سری اول

فرم ۱ را به ترتیب تصویر زیر که مشاهده میکنید و با افزودن نام و نام خانوادگی و با زدن دکمه ی بعدی ایجاد می کنیم.

۱

فرم شماره ۲ را با اضافه کردن ایمیل و همچنین دکمه ای را برای بازگشت به فرم قبلی و دکمه بعدی را برای رفتتن به فرم بعدی ایجاد می کنیم

۲

در فرم ۳ هم با افزودن عنوان و متن پیام و دکمه ی ارسال ادامه می دهیم

۳

هممانطور که مشاهده می کنید اکنون سه فرم مجزا ایجاد شده است

مرحله دوم : فرم سری دوم

در این مرحله هر کدام از برگه ها در فرم جدید میسازیم و ادامه می دهیم

۴

و بخش دوم هم به همین روال

۵

بخش سوم

۶

مرحله سوم : فرم های سری سوم

خب برای مرحله ای کردن فرم ها، دوباره به صفحه ی فرم ها رفته و از ویژگی “hidden” که به فرم تماس ۷ اضافه شده استفاده میکنیم. برای ویرایش هر یک از فرم ها بر روی  ویرایش کلیک کرده و شورت کدهای مناسب  را در آخر قرار می دهیم.در فرم اول شورت کد مربوط به آن را وارد کرده که نشان می دهد اکنون در صفحه ی اول از سه فرمی که ایجاد کرده ایم ، قرار داری.

۷

برای اینکه بتوانید فرم اول را فرم دوم منتقل کنید ، آدرس برگه ای را که برای فرم دوم ساختید ، در قسمت تنظیمات اضافی فرم اول با کدی که در زیر نوشته شده است را وارد می کنیم

on_sent_ok: “location.replace(‘http://example.com/my-second-page/’);”

;”

۸
۹
و حالا تنظیمات را ذخیره می کنیم

همانند تصویر زیر در فرم ۲ شورت کد مربوط را وارد میکنید و در تنظیمات اضافی ، آدرس برگه ی ۳ را قرار می دهید.

۱۰

دقت کنید که در برگه ۳ دیگر نیازی به وارد کردن آدرس نیستید .زیر فرم آخر نیازی به وارد کردن آدرس ندارد.

۱۱

اکنون با وارد کردن آدرس فرم اول تمامی فرم ها به درستی کار می کنند

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

۱۲

با تشکر از شما که تا این مرحله حوصله به خرج دادید

یک پیشنهاد برای شما:

5 دیدگاه

  • سلام من این کارایی ک گفتید رو انجام دادم اما وقتی رو دکمه بعدی یا قبلی کلیک میکنم هیچ اتفاقی نمیفته و رو همون صفحه میمونه

    پاسخ
    • ·

      سلام
      آموزش تست شده است ، اگر تمامی مراحل را بدرستی انجام دهید اعمال خواهد شد.

    • ·

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

ارسال دیدگاه

آدرس ایمیل شما منتشر نخواهد شد. فیلد های ضروری با * مشخص شده است.

 

telegram-wpnovin