آموزش Contact Form 7 Multi Step و ساخت فرم تماس چندمرحله ای
در این مقاله به آموزش افزونه Contact Form 7 Multi Step که برای ایجاد فرم های چند مرحله ای با فرم تماس 7 عرضه شده است و یکی از فرم های تماس با ما قوی و کاربر پسند می باشد، می پردازیم.
توجه داشته باشید که 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 به پایان می رسد. شما به همین راحتی موفق به ساخت یک فرم تماس چند مرحله ای شده اید. فرمی که در صفحه ظاهر می شود به شکل زیر خواهد بود.
بعد از زدن دکمه ارسال پیامی مشابه زیر دریافت خواهید کرد.
امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.
دریافت افزونه
مرسی از سایت خوبتون
کاملا اتفاقی از نتایج جستجو شما رو پیدا کردم با این حال خیلی خوب بود
سلام خسته نباشید ببخشید میخواستم از دکمه های رادیویی استفاده کنم در کانتکت فرم ۷ و به گونه ای باشد که دکمه های های رادیویی شامل قیمت ها باشند و کاربر با انتخاب آن بتواند پرداخت کند من سه قیمت دادم و میخواهم یک قسمت سایر هم باشد تا کاربر خودش مبلغ را وارد کند اما من نتوانستم این کار را بکنم آیا با کانتکت فرم میشود این کار را انجام داد ؟
سلام محمد عزیز .. وقت بخیر .. چرا از یک “متن تک خطی” استفاده نمی کنی؟ می تونی یک قسمت متنی اضافه کنی و به عنوان متن پیش فرضش از یک جمله مثل “سایر قیمت های مورد نظر خود را در این قسمت وارد کنید” یا یک همچین چیزی استفاده کنی
سلام خسته نباشید.
من طبق آموزش جلو رفتم.
اما همش میگه مشکلی در ارسال پیام به وجود آمده است.
بعد اینکه تنظیمات ایمیل رو هم برای هر سه تا فرم پاک کردم.
سلام دوست عزیز .. وقت بخیر .. دریافت این خطا مربوط به عملکرد خود افزونه Contact Form 7 هست اگه بوردر پیام قرمز هست مربوط به سرور ایمیل شما میشه و می تونید از سرور دیگه ای استفاده کنید.