تکمیل فرم تماس ۷ چند مرحله ای در وردپرس با Contact Form 7 Multi-Step Forms

contact-form-hamyarwp-فرم تماس 7 چند مرحله ای در وردپرس

اضافه شدن ویدئوی آموزشی در تاریخ ۱۳ شهریور ۱۳۹۶ توسط محمدرضا خدری
سلام؛
همه ی ما از فرم های متعددی مثل فرم تماس، ارتباط با ما و … در وبسایت خود استفاده می کنیم. وردپرس نیز افزونه های بسیار خوبی برای ساخت فرم ها در اختیار ما قرار می دهد که هر کدام قابلیت های مخصوص به خود را دارند.
امروز نیز می خواهیم  یک ویژگی جدید را به یک فرم قدرتمند که قبلا با آن آشنا شدیم، اضافه کنیم. این فرم معروف که حتما همه ی شما وردپرسی ها با آن آشنا هستید، فرم تماس ۷ می باشد.
ویژگی که امروز می خواهیم آموزش دهیم فرم تماس ۷ چند مرحله ای در وردپرس می باشد.

فرم تماس ۷ چند مرحله ای در وردپرس

حتما در سایت هایی مشاهده کرده اید که در چند مرحله به شما امکان تکمیل فرم تماس ۷ در وردپرس را می دهند و این مورد برای کاربر جذاب است. ما نیز می خواهیم با معرفی افزونه ای، حالت چند مرحله ای را به فرم تماس ۷ بدهیم. پس با ما همراه باشید…

افزونه Contact Form 7 Multi-Step Forms

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

راه اندازی فرم تماس به صورت چند مرحله ای

در گام اول افزونه را نصب و فعال می کنیم. این افزونه در هیچ قسمتی از پنل وردپرس نمایش داده نخواهد شد و به طور مستقیم با “Contact form 7” ارتباط برقرار می کند. برای فرم تماس ۷ چند مرحله ای در وردپرس، سه گزینه ی “hidden field، form value، back button” اضافه شده است که مربوط به افزونه می باشد.
پس از فعال کردن افزونه، به سراغ ساخت فرم خود می رویم. در این آموزش میخواهیم فرم را در ۳ مرحله ایجاد کنم! پس باید ۳ فرم و سه برگه داشته باشیم.

contact form 7 hamyarwp-فرم تماس 7 چند مرحله ای در وردپرس

سه فرم مختلف به نام های فرم ۱، فرم ۲ و فرم ۳ ایجاد خواهیم کرد.

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

form1 hamyarwp-فرم تماس 7 چند مرحله ای در وردپرس

فرم ۲ را نیز با اضافه کردن آدرس ایمیل و دکمه ی قبلی برای بازگشت به فرم ۱ و دکمه ی بعدی برای رفتن به فرم ۳ ایجاد کردیم.

form2 hamyarwp-فرم تماس 7 چند مرحله ای در وردپرس

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

form3 hamyarwp-فرم تماس 7 چند مرحله ای در وردپرس

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

حال باید به سراغ ایجاد برگه ها برای ساخت فرم تماس ۷ چند مرحله ای در وردپرس خود برویم. بر روی گزینه ی افزودن برگه ی جدید کلیک کنید و هر فرم را در یک برگه ی مجزا قرار دهید. فرم ۱ در برگه ی اول، فرم ۲ در برگه ی دوم و فرم ۳ در برگه ی سوم قرار می گیرد.

page 1 hamyarwp-فرم تماس 7 چند مرحله ای در وردپرسpage 2 hamyarwpform3 hamyarwp-فرم تماس 7 چند مرحله ای در وردپرس

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

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

hidden1 hamyarwp-فرم تماس 7 چند مرحله ای در وردپرس

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

on_sent_ok:location.replace('http://example.com/my-second-page/');

link2 hamyarwp-فرم تماس 7 چند مرحله ای در وردپرسlocation hamyarwp-فرم تماس 7 چند مرحله ای در وردپرس

به صورت تصویر بالا عمل می کنیم و سپس تنظیمات را ذخیره می کنیم.

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

hidden2 hamyarwp-فرم تماس 7 چند مرحله ای در وردپرس

و همچنین فرم ۳ را به همین شکل انجام می دهید تا به فرم تماس ۷ چند مرحله ای در وردپرس برسید.

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

hidden 3 hamyarwp-فرم تماس 7 چند مرحله ای در وردپرس

حال با وارد کردن آدرس فرم اول تمامی فرم ها مرحله به مرحله پیش می روند!

result hamyarwp-فرم تماس 7 چند مرحله ای در وردپرس

جمع بندی! 

اگر می خواهید فرم تماس یا فرم های ثبت نامی خود را به صورت چند مرحله ای ایجاد کنید یا امکان فرم تماس ۷ چند مرحله ای در وردپرس را داشته باشید، می توانید از افزونه ای که برای فرم تماس ۷ ایجاد شده است، بهره مند شوید و هر چند مرحله ای که می خواهید به فرم های خود اضافه کنید.

آموزش ویدئویی

دانلود افزونه Contact Form 7 Multi-Step Forms

دانلود دانلود نسخه حرفه‌ای صفحه افزونه

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) کانال تلگرام همیار وردپرس

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

۲۲۱,۴۴۰ نفر

پاسخ دهید

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

دیدگاه‌های این نوشته جدید شاخص

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

  2. […] لینک منبع […]

  3. 2 ماه عضو همیار وردپرس

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

    • 4 سال عضو همیار وردپرس

      سلام
      به خاطر اینکه ما با زبان فارسی هماهنگش کردیم. شما باید rtl رو تغییر بدید.

  4. […] تکمیل فرم تماس ۷ در چند مرحله در وردپرس با Contact Form 7 Multi-Ste… اولین بار در همیاروردپرس پدیدار […]

  5. […] لینک منبع […]

  6. […] منبع : همیار وردپرس جهت کسب اطلاعات بیشتر به سایت همیار وردپرس مراجعه نمایید […]

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

  8. 1 سال عضو همیار وردپرس

    با سلام و درود فراوان.

    آیا امکان همکاری با شما وجود دارد ؟

    بنده پلاگین ترجمه میکنم . نمونه کار هم دارم میتونم خدمتتون ارائه بدم

    با تشکر

  9. ضمن تشکر و قدردانی ….
    تو فرمی که با این افزونه ساختم(صفحه تماس با ما) فیلد ایمیل گذاشتم. کاربرم با یوزرپرو لاگین میکنه میاد تو سایت. میخوام در صورتیکه لاگین کرده باشه و وارد صفحه(تماس با ما) شد، ادرس ایمیلش به طور پیشفرض داخل فیلد ایمیل که با این افزونه ساختم دیده بشه. لطفا بفرمایید چیکار کنم؟
    پیشاپیش سپاس…

  10. ممنون

  11. سلامْ ممنون از افزونه
    میخواتسم بدونم چطوری میشه این فرم رو به ووکامرس متصل کرد.
    مثلا کاربر وقتی فرم رو پر میکنه که شامل عکس و فایل و قیمت و ایناس مستقیم به محصولات ووکامرس اضافه بشه؟
    ممنون

  12. اون دوست عزیزی که گفت یک صفحه پاپ آپ سفید میاد واسه دیدن محتواش f12 بزن و گزینه visibility رو از حالت none بردار همش دیده میشه

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

    • 2 سال عضو همیار وردپرس

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

  14. سلام

    متاسفانه فقط اطلاعات مرحله آخر برام ایمیل میشه

    دقیقا مثل آموزش پیش رفتم اما فقط اطلاعات فرم آخر ارسال میشه

    در ضمن برای من دکمه های این افزونه مثل hidden fild کار نکرد
    یعنی وقتی کلیک میکنم یه پاپ آپ باز میشه اما داخل این پنجره پاپ آپ سفید هستش
    و من خودم دستی کد رو نوشتم

    الان فرم رو ساختم و به خوبی کار میکنه اما فقط اطلاعات فرم آخر رو میفرسته

  15. با سلام و خسته نباشید

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

    • 4 سال عضو همیار وردپرس

      سلام
      اگه داخل تنظیمات contact form 7 باشه که میشه اضافه کرد اگه نباشه این قابلیت رو نداره و باید ببینید چه افزونه ی مکملی این کار رو انجام میده.
      همانطور که گفتم فرم ۷ افزونه های مکمل زیادی داره.

  16. 2 سال عضو همیار وردپرس

    با سلام
    بنده تازه با ورد پرس اشنا شده ام. می خواستم بدونم برای ساخت یک وب سایت ساده به غیر از ورد پرس باید html , CSS و یا برنامه دیگه رو یاد بگیرم.ممنون می شم راهنماییم کنید.

  17. سلام
    مشکلی که من دارم اینه که ایمیلی که در نهایت برای من ارسال می شود فقط حاوی فیلدهایی است که در مرحله آخر فرم وجود دارد.
    برای اینکه تمامی فیلدهایی که در مراحل مختلف وجود دارند در ایمیل ارسالی وجود داشته باشد چه کاری باید انجام داد؟

  18. واقعا عالی بود مرسی.

  19. سلام

    لطفا افزونه Email Before Download را برای دانلود قرار دهید
    و همینطور آموزشش رو هم بگید .

    با تشکر

مطالب زیر را حتما بخوانید

محبوبترین‌های آموزش آنلاین

مشاهده همه آموزش‌های آنلاین