افزونه های وردپرس

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

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

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

اما اگر از افزونه contact form 7 برای ایجاد فرم های مختلف استفاده کرده اید، این ویژگی به طور پیش فرض در آن وجود ندارد.

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

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

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

این افزونه تا کنون با بیش از 20.000 نصب فعال توانسته است امتیاز 4.4 را از کاربران خود به دست بیاورد.

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

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

دقت کنید که برای استفاده از این افزونه حتما باید از قبل افزونه contact form 7 را نصب و فعال کرده باشید. پس از فعال سازی این افزونه هیچ منو و یا زیرمنویی به پیشخوان وب سایت شما اضافه نخواهد شد و این افزونه به طور مستقیم بخش هایی را به فرم تماس 7 اضافه می کند.

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

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

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

همانطور که مشاهده می کنید در بخش ویرایش فرم، سه دکمه با عنوان های multistep، form field و previous اضافه شده اند.

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

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

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

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

سومین فرم را نیز به همین ترتیب ایجاد کرده و به جای کلمه بعدی در فیلد submit از کلمه ارسال استفاده کنید.

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

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

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

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

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

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

Current Step: در این فیلد مرحله ای که در فرم تماس 7 چند مرحله ای در آن و در این فرم قرار دارد را وارد کنید.

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

Total Steps: در این فیلد تعداد کل مراحل را وارد نمایید.

Next Page URL: در این فیلد نیز آدرس صفحه ای که فرم مرحله بعد را در آن قرار داده اید، وارد نمایید.

برای تمام فرم های ساخته شده این کار را انجام دهید.

ساخت فرم های چند مرحله ای با فرم تماس 7
پیش نمایش فرم های چند مرحله ای

اکنون چنانچه به برگه ای که برای فرم تماس در مرحله یک ساخته بودید وارد شوید، خواهید دید که فرم تماس 7 چند مرحله ای ساخته شده و کاربران با پر کردن هر فیلد می توانند به مرحله بعدی بروند.

عاطفه نوربخش

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره آموزش وردپرس در اصفهانثبت نام رایگان (کد تخفیف : WpNarenji)
+
بستن