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

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

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

توجه داشته باشید که Contact Form 7 Multi Step یک افزودنی برای افزونه Contact Form 7 است و برای استفاده از آن باید این افزونه را در سایت خود نصب کرده باشید. برای آشنایی با نحوه نصب و استفاده، مقاله آموزش افزونه Contact  Form 7 را مطالعه کنید.

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

فرم های چند مرحله ای این مشکل را با اضافه کردن نوار پیشرفت در بالای فرم و کم کردن فیلدهای روی صفحه حل می کنند. این کار باعث ایجاد تجربه ای جذاب و تعاملی برای کاربر می شود.

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

در این آموزش افزونه Contact Form 7 Multi Step که یکی از افزودنی های قدرتمند افزونه فرم تماس 7 که از بهترین افزونه های فرم ساز وردپرس است را بررسی کرده و نحوه ساخت فرم های چند مرحله ای با این افزونه را توضیح خواهیم داد.

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

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

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

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

گزینه هایی که پس از نصب افزونه به فرم تماس ۷ اضافه می شوند، سه گزینه ی “multistep” و “form field” و “previous” هستند که به ابزار های این افزونه مربوط می شوند.

در این قسمت از آموزش می خواهیم یک فرم سه مرحله ای با افزونه Contact Form 7 Multi Step ایجاد کنیم. 

ابتدا در پیشخوان وردپرس به مسیر برگه ها » افزودن جدید بروید.

سه برگه مجزا به نامهای برگه ۱، برگه ۲ و برگه ۳ درست کنید. به آدرس url این برگه ها نیاز دارید بنابراین بهتر است آنها را جداگانه کپی کرده و در یک ویرایشگر متنی مانند notepad ذخیره کنید.

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

ابتدا فرم ۱ را ایجاد می کنیم. در قسمت نام، فرم ۱ را نوشته و فیلدهای نام، نام خانوادگی و دکمه submit را در آن قرار دهید. عنوان دکمه submit را به جای ارسال، “بعدی” بگذارید.

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

در قسمت Next Page URL آدرس url برگه ۲ را که قبلاً کپی کرده بودید، قرار دهید. سپس روی دکمه Insert Tag کلیک کنید.

اگر در تب Email با پیغام خطا مواجه شدید، وارد قسمت Email شوید و تمام محتویات بخش های سرایندهای اضافی و محتوای پیام را پاک کنید.

اگر مجدداً در بخش محتوای پیام با خطا مواجه شدید یک متن ساده را در آن قرار دهید.

به همین ترتیب فرم ۲ را با افزونه Contact Form 7 Multi Step ایجاد کرده و فیلدهای آدرس ایمیل، دکمه “قبلی” با استفاده از گزینه “previous” برای برگشتن به فرم ۱ و دکمه بعدی برای رفتن به فرم ۳ را در آن قرار دهید.

با کلیک روی گزینه “multistep” در پنجره باز شده گام ۲ از ۳ را انتخاب کرده و آدرس url برگه ۳ را در Next Page URL قرار دهید.

فرم ۳ را نیز با اضافه کردن عنوان و متن پیام، دکمه ی برگشت به فرم ۲ با گزینه “previous” و دکمه ی ارسال ایجاد کنید. با کلیک روی گزینه “multistep” در پنجره باز شده گام ۳ از ۳ را انتخاب کنید. چون در قدم آخر هستید قسمت Next Page URL باید خالی بماند.

تغییرات را ذخیره کنید. به این ترتیب ۳ فرم با سه شورت کد مختلف داریم که به صورت زیر به آنها دسترسی داریم.

در مرحله بعد برای داشتن فرم تماس چندمرحله ای با Contact Form 7 Multi Step باید شورت کد فرم ها را در برگه ها قرار دهید. شورت کد فرم ۱ را در برگه ۱، شورت کد فرم ۲ را در برگه ۲ و شورت کد فرم ۳ را در برگه ۳ قرار دهید و آنها را ذخیره کنید.

در این قسمت آموزش افزونه Contact Form 7 Multi Step به پایان می رسد. شما به همین راحتی موفق به ساخت یک فرم تماس چند مرحله ای شده اید. فرمی که در صفحه ظاهر می شود به شکل زیر خواهد بود.

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

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