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

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

یکی از بخش‌های لازم و ضروری در هر وبسایت فرم‌ها هستند، کلیه وبسایت‌ها با هر نوع کسب وکاری لازم است برای افزایش تعامل با کاربر و نرخ تبدیل از فرم‌های مختلفی استفاده کنند. فرم‌های گوناگونی از جمله فرم تماس، ارتباط با ما، فرم پرداختی و غیره وجود دارند که بنا به کاربرد و نیاز سایت می‌توانید از آن‌ها در قسمت‌های مختلف وبسایت خود استفاده کنید. ساخت، طراحی و شخصی‌سازی فرم‌ها در وردپرس به آسانی و از طریق افزونه‌ها امکان‌پذیر است.یکی از پلاگین‌های بسیار محبوب و کاربردی برای ساخت انواع فرم در وردپرس Contact Form 7 نام دارد که با کمک افزونه Contact Form 7 Multi-Step Forms می‌تواند قابلیت جدیدی به نام چند مرحله‌ای کردن فرم را برای شما فراهم کند. تا انتهای این مقاله از سری مقاله‌های آموزش افزونه وردپرس با ما همراه باشید تا ساخت فرم چند مرحله ای در وردپرس با Contact Form 7 Multi-Step Forms را به شما آموزش دهیم.

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

آنچه در این مقاله به اختصار خواهید خواند:

  • فرم تماس چند مرحله ای در وردپرس
  • افزونه Contact Form 7 Multi-Step Forms
  • آموزش ساخت فرم چند مرحله ای در وردپرس
  • آموزش ویدیویی افزونه Contact Form 7 Multi-Step Forms

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

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

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

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

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

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

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

پس از نصب و فعالسازی افزونه Contact Form 7 Multi-Step Forms صفحه زیر را مشاهده خواهید کرد که می‌بایست بر روی دکمه Skip کلیک کنید.

رد کردن اجازه دسترسی بعد از نصب افزونه Contact Form 7 Multi-Step Forms
رد کردن اجازه دسترسی بعد از نصب افزونه Contact Form 7 Multi-Step Forms

این افزونه هیچ منوی جدیدی به پیشخوان وردپرس شما اضافه نخواهد کرد و تنها چند ویژگی جدید را به افزونه Contact Form 7 اضافه می‌کند.

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

منوی فرم تماس در پیشخوان وردپرس
منوی فرم تماس در پیشخوان وردپرس

با انتخاب این گزینه وارد صفحه‌ای مانند تصویر زیر خواهید شد.

ابتدا لازم است یک نام برای فرم خود در نظر بگیرید، به عنوان مثال نام نخستین فرم را “فرم تماس 1” انتخاب کردیم که دارای دو فیلد نام و نام خانوادگی می‌باشد و از دکمه submit به منظور “رفتن به مرحله بعد” استفاده کردیم. بنا به نیاز خود می‌توانید فیلدهای بیشتری را اضافه و عنوان هر کدام را نیز ویرایش نمایید.

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

پس از افزودن فیلدهای مورد نیاز، برای چند مرحله‌ای کردن فرم لازم است بر روی دکمه Multistep موجود در صفحه کلیک کنید تا صفحه زیر برای شما نمایان شود. چون “فرم تماس 1” اولین فرم می‌باشد می‌بایست گزینه First step را تیک زده و آدرس URL صفحه بعدی فرم (آدرس صفحه فرم تماس 2) را نیز در کادر مربوطه وارد و سپس دکمه Insert tag را انتخاب کنید.

تنظیمات Multistep برای قرار دادن فرم تماس
تنظیمات Multistep برای قرار دادن فرم تماس

پس از تکمیل شدن فرم لازم است بر روی دکمه “ذخیره” کلیک نمایید تا کد کوتاه مربوط به آن نمایش داده شود. کد کوتاه نمایش داده شده در صفحه را کپی کرده و در برگه یا نوشته جدید قرار دهید.

مرحله بعد ساخت “فرم تماس 2” می‌باشد که مجددا لازم است از منو “فرم تماس” گزینه “افزودن جدید” را انتخاب نموده و فیلدهای دلخواه خود را وارد کنید که در اینجا از فیلد “ایمیل” و دکمه submit به عنوان “مرحله بعدی” استفاده کردیم، چون این فرم، دومین فرم می‌باشد می‌بایست علاوه بر داشتن دکمه مرحله بعد، دارای دکمه “رفتن به مرحله قبلی” نیز باشد؛ به همین منظور لازم است از دکمه Previous برای این کار استفاده شود.

وارد کردن فیلدهای دلخواه به فرم تماس چند مرحله ای
وارد کردن فیلدهای دلخواه به فرم تماس چند مرحله ای

با کلیک بر روی این دکمه وارد صفحه زیر خواهید شد و فقط لازم است یک متن برای دکمه انتخاب کنید و دکمه Insert tag را انتخاب کنید.

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

با این کار یک دکمه به نام Previous به فرم شما اضافه خواهد شد.

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

پس از تکمیل فرم تماس 2 نیز مجددا تنظیمات را ذخیره و کد کوتاه نمایش داده شده را در یک برگه یا نوشته جدید قرار دهید. (پس از باز نمودن صفحه فرم تماس 2، لازم است URL این صفحه را کپی کرده و در قسمت Multistep فرم 1 وارد نمایید، همچنین پس از ساخت فرم تماس 3 آدرس URL آن را نیز باید در در قسمت Multistep فرم 2 قرار دهید.)

جهت ساخت فرم تماس 3 مانند دو فرم قبلی عمل کرده و از دو فیلد “موضوع پیام” و “متن پیام” استفاده کردیم. این فرم اخرین صفحه از فرم محسوب می‌شود و دیگر نیازی به داشتن دکمه “رفتن به مرحله بعد” ندارد و از دکمه submit برای ارسال فرم استفاده می‌کنیم، همچنین لازم است از بخش Multistep گزینه Last Step را فعال کنید.

فعال کردن گزینه‌ی مربوط به آخرین مرحله فرم
فعال کردن گزینه‌ی مربوط به آخرین مرحله فرم

پس از انجام مراحل فوق، فرم 3 بدین صورت خواهد بود:

فرم تماس 3
فرم تماس 3

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

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

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

با کلیک بر روی دکمه “بعدی” وارد دومین صفحه از فرم می‌شوید:

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

با کلیک بر روی دکمه قبلی به راحتی می‌توانید به اولین صفحه فرم دسترسی پیدا کنید و یا در صورت تکمیل اطلاعات به مرحله بعد بروید.

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

پس از وارد نمودن موضوع و متن پیام بر روی دکمه “ارسال” کلیک کنید. در صورت موفقیت آمیز بودن ارسال فرم با پیغام زیر روبرو خواهید شد:

پیام مربوط به موفقیت آمیز بودن ارسال فرم
پیام مربوط به موفقیت آمیز بودن ارسال فرم

به راحتی و با موفقیت توانستید فرم تماس چند مرحله ای را به سایت وردپرسی خود اضافه کنید.

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

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

آموزش ویدئویی افزونه Contact Form 7 Multi-Step Forms

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

دانلود افزونه Contact Form 7 Multi-Step Forms صفحه افزونه
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

دیدگاهتان را بنویسید

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

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

  1. ممنون

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

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

      با احترام
      چنین امکانی وجود ندارد.

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

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

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

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

    • سلام و خسته نباشید
      البته من ارث پدرم رو از شما طلب ندارم و ممنون هم هستم از اینکه آموزش های مفید قرار میدید… ولی لطفا یا آموزشی رو نگذارید یا کامل بزارید… آموزش ها شده شبیه آموزش آشپزی که همه چیز از قبل انجام شده، خب دوست گرامی ما اگر بلد بودیم که به آموزش مراجعه نمیکردیم…

      من نعل به نعل طبق آموزش شما انجام دادم ولی در فرم اول دکمه “بعدی” عمل ارسال رو انجام میده و این مربوط به تنظیمات بخش ایمیل هست ولی من هر جور تنظیمی کردم نشد و سر در نیاوردم چیکار باید بکنم که بره به فرم بعدی و آخرین مرحله ارسال بشه…

      موفق باشید

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

      سلام
      تنظیمات ایمیل رو از همون فرم تماس 7 باید انجام داده باشید:
      https://hamyarwp.com/contact-form-7/

  5. سلام

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

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

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

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

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

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

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

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

  7. 9 سال عضو همیار وردپرس

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

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

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

      سلام
      اگه درست مراحل رو طی کنید باید همه ی مراحل ارسال بشن!

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

  10. سلام

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

    با تشکر