سلام دوستان؛
همه ی ما در وبسایتمان از فرم های متعددی مثل فرم تماس، ارتباط با ما و …استفاده می نماییم. وردپرس نیز افزونه های خیلی خوبی برای ساخت این گونه فرم ها در اختیارمان می گذارد که هر کدام ویژگی های مخصوص به خود را دارند.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

و همچنین فرم ۳ را به همین شکل انجام می دهید!

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

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

جمع بندی!

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

منبع : همیار وردپرس

نوشته آموزش چند مرحله ای تکمیل فرم تماس ۷ در وردپرس اولین بار در طلوع ارتباطات - قالب وردپرس | افزونه وردپرس | آموزش وردپرس پدیدار شد.

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

نحوه ی استفاده افزونه contact form 7

ساخت فرم تماس با ما در وردپرس به کمک این افزونه بسیار ساده و آسان می باشد. می توانید بعد از نصب سریعاً یک فرم جدید بسازید و یا اینکه از فرم آماده ی موجود استفاده کنید. و در نهایت از شورت کدی که فرم تماس با ما ۷ در اختیار شما قرار می دهد را در برگه/نوشته سایت وردپرسی خود وارد کنید تا در خروجی فرم تماس با ما برای شما نمایش داده شود.

شروع کار افزونه contact form 7

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

• از قسمت Contact Forms می توانید فرم های ساخته شده ی خودتان را مشاهده کنید که بعد از نصب یک فرم آماده را می توانید در این بخش مشاهده کنید.
• از قسمت Add New هم می توانید یک فرم جدید بسازید.
• از قسمت آخر یعنی Integration هم می توانید افزونه های مکمل این افزونه را استفاده کنید.

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

بعد از آوردن قسمت ویرایش فرم ایجاد شده طبق تصویر زیر…

از قسمت بالا می توانید در فیلد مربوطه یک عنوان برای فرم خود در نظر بگیرید.
از قسمت پایین تر آن یعنی کادر قرمز رنگ، می توانید شورت کد فرم را مشاهده کنید که بعد از اعمال تنظیمات دلخواه می توانید این شورت کد را در برگه/نوشته سایت خود قرار دهید.

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

تب اول – Form

در ویرایشگر متنی ساده ی این بخش شما تعدادی دکمه را مشاهده می کنید که جهت اعمال متفاوت می باشند.
مثلا برای ایجاد چک باکس باید دکمه ی checkboxes را بزنید، بعد از آن با صفحه ی پاپ آپی مواجه می شوید که تنظیمات تگ مورد نظر را در آن قسمت مشاهده می کنید، بعد از اعمال تنظیمات هم برای وارد کردن بخش مورد نظر در فرم بر روی گزینه ی Insert Tag کلیک کنید.

فارسی سازی بخش های مختلف

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

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

متوجه نشدید!!؟

اگر این قسمت متن مورد نظر را اشتباه انتخاب کنید ممکن است فرم مورد نظر شما در خروجی به خوبی نمایش داده نشود.
برای این که چنین اشتباهی را نکنید دقت کنید که همیشه متن مقابل تگ <label> را باید از حالت انگلیسی به فارسی برگردانید. در غیر این صورت فرم به خوبی نمایش داده نمی شود!

تب دوم – Mail

وقتی کاربری وارد سایت شما شود و به برگه ی تماس با ما مراجعه کند و بخواهد یک پیغام برای مدیریت سایت ارسال کند به نظر شما این پیغام به کجا می رود؟

در این تب شما می توانید ایمیلی را وارد کنید تا تمامی پیغام های کاربرانتان بعد از ارسال به آن ایمیل ارسال شود. اگر به هر نحوی ایمیل برای شما ارسال نشد به ادامه ی توضیحات توجه کنید:

اگر ایمیل ارسال نشود ما می توانید از بخش ایمیل ۲ افزونهفرم تماس با ما در وردپرس طبق تصویر بالا ایمیل دیگری را وارد کنیم تا در غیر این صورت به ایمیل دوم ارسال شود.
در قسمت ایمیل دوم ایمیل خود را در جاهای مشخص شده در تصویر بالا قرار دهید(در هر دو قسمت).

تعدادی شورت کد را هم می توانید در این تب مشاهده کنید که می توانید از آن ها در الگوی ایمیل خودتان استفاده کنید، مثلا با شورت کد [your-subject] می توانید موضوع ایمیلی را که کاربر وارد کرده است در آن قسمت نمایش دهید.

تب سوم – Messages

در این تب هم شما یک لیست بلند از متن هایی که کاربر در حین ارسال فرم (قبل و بعد) قرار است مشاهده کند را مشاهده می کنید که البته انگلیسی می باشند اما شما می توانید به خوبی آن ها را به فارسی بر گردانید.

برای مثال در تصویر بالا ما گزینه ی اول را به فارسی برگردانده ایم.

تب چهارم – Additional Settings

در این قسمت هم می توانید کد های اضافه را وارد کنید(اگر به زبان های تحت وب تسلط دارید). در نهایت هم برای ذخیره ی تمامی تغیرات روی دکمه ی Save در زیر کلیک کنید.
بعد از انجام تمامی تغیرات می توانید فرم تماس با ما در وردپرس را در خروجی نمایش دهید…

مشاهده ی خروجی افزونه contact form 7

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

توجه: بهتر است درون یک برگه فرم تماس با ما را نمایش دهید تا نوشته.

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

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

نکته: اگر ایمیل ها را در اسپم ایمیل خود مشاهده می کردید برای یکبار ایمیل دریافتی را no spam کنید تا دفعات بعدی در inbox آن را دریافت کنید.

منبع:همیار وردپرس

نوشته افزونه contact form 7 وسیله ای برای ساخت فرم تماس اولین بار در طلوع ارتباطات - قالب وردپرس | افزونه وردپرس | آموزش وردپرس پدیدار شد.