آموزش کامل ساخت فرم وردپرس با فرم تماس ۷ (Contact form 7)

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

ما در این مقاله به آموزش همه جانبه ساخت فرم در سایت و تنظیم و پیکربندی فرم ها به وسیله افزونه فرم تماس ۷ وردپرس یا همان Contact form 7 می پردازیم. همچنین به ساخت فرم ساده تماس با ما و همچنین فرم پیچیده تری مانند فرم همکاری با ما می‌پردازیم تا به طور همه جانبه نحوه ساخت فرم در وب سایت و نیز کار با افزونه contact Form 7 را یاد بگیریم.

افزونه های مختلفی برای ساختن فرم در وردپرس وجود دارد. از جمله مهمترین آنها می توان contact form 7 ،گرویتی فرم (Gravity Froms)، نینجا فرم و… را نام برد. در بین این افزونه ها، contact form 7 ساده ترین راه برای انجام این کار می باشد. همچنین فرم تماس ۷ رایگان است و می توانیم به راحتی آن را از مخزن وردپرس نصب کنیم. همچنین اگر به دنبال فرم های خیلی پیچیده و افزونه های سنگین نیستید، شاید بهترین گزینه همین فرم تماس ۷ باشد.

توجه: در این آموزش از افزونه contact form 7 استفاده می‌کنیم که می‌توانید آن‌را رایگان از مخزن وردپرس نصب کنید.

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

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

ما با استفاده از کدهای کوتاه یا shortcode میتوانیم فرم مورد نظر در فرم تماس ۷ را نمایش دهیم.  به این صورت که کد کوتاه فرم مورد نظر را کپی کرده و در هر جایی از سایت مانند برگه ها یا نوشته ها که مایلیم، قرار می دهیم.

به ازای هر فرمی که می سازیم یک شورت کد برای آن تولید می شود و ما میتوانیم کد کوتاه معادل با آن فرم را در هر نوع صفحه ساز و قالبی قرار داده و استفاده کنیم

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

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

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

توجه: در همین مرحله هم می‌توانید شورت کد فرم ساخته شده را در جایی از سایت استفاده کنید و مشاهده کنید که فرم پیش فرض به چه شکل است!

تنظیمات ۷ Contact Form و خطای پیکربندی فرم تماس

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

تنظیم اطلاعات ایمیل فرم تماس ۷

• به: یعنی هنگامی که کاربر فرم را ارسال کرد اطلاعات به کدام ایمیل ارسال شود؟
• از طرف:‌ از آنجا که سیستم فرم تماس ۷ بر اساس ایمیل است بنابراین اطلاعاتی که به ایمیل ما ارسال میشود خود باید از یک آدرس ایمیل معتبر دریافت شود که در این فیلد باید یک آدرس فرستنده دلخواه برای آن قرار دهیم که از دامین سایت خودمان باشد.
  نکته قابل توجه اینجاست که پسوند ایمیل فرستنده حتماً باید از دامنه سایت کنونی باشد و در غیر اینصورت ممکن است خطای پیکربندی شناخته شود.
• موضوع: تمامی ایمیل ها نیز دارای یک موضوع می باشند که مراد از این فیلد همان است
• محتوای پیام: که همان بدنه اصلی ایمیلی است که برای ما ارسال می‌شود و در آن می‌توانیم هر نوع اطلاعاتی را به دلخواه خود قرار دهیم.

فرم تماس ۷ برای سادگی کار ما کدهای کوتاه فیلد های مختلف فرم را برای استفاده در تنظیمات ایمیل فرم قرار داد است که می‌توانیم به راحتی از آن‌ها استفاده کنیم.

فرم‌های حرفه ای‌ با Contact form 7 و ساخت فرم همکاری

در ویدئوی این بخش به طراحی یک فرم همکاری با ما می پردازیم که در آن تمامی فیلد ها و امکانات فرم تماس ۷ بررسی شده است.

فیلدهای فرم ساز ۷ وردپرس

متن تک خطی

ساده ترین نوع ورودی برای دریافت یک خط متن از کاربر می باشد مثلاً نام کاربر

آدرس ایمیل

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

ناحیه متنی (Textarea)

برای گرفتن چند خط پیام متنی است (مانند پیام مخاطب) و تفاوت آن با متن تک خطی در اندازه آن است.

ارسال

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

آدرس اینترنتی

یک فیلد تک خطی برای وارد کردن Url یک سایت است و تنها فرمت آدرس اینترنتی را می پذیرد.

تلفن

همانند متن تک خطی است اما شماره تلفن (عدد) می گیرد.

شماره

که برای وارد کردن عدد به دو فرمت مختلف می باشد. حتی می توانیم برای این اعداد، محدوده کمترین و بیشترین تعیین کنیم.

تاریخ

برای انتخاب یک تاریخ از روزهای تقویم می باشد.  همچنین می توان برای تاریخ محدوده زمانی قرار داد تا کاربر از آن محدوده تاریخ مورد نظر را انتخاب کند.

فهرست پایین افتادنی (ComboBox)

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

چک باکس

میتوانیم گزینه‌هایی را قرار دهیم که کاربر هر کدام را که خواست تیک بزند. مثلاً در فرم همکاری با ما می تواند مهارت‌هایی را که دارد انتخاب کند.

دکمه رادیو

همانند چک باکس برای انتخاب گزینه اما تنها یک مورد از گزینه هاست و تفاوت آن هم با چک باکس در همین موضوع است. مانند فیلد جنسیت که تنها یک جواب دارد.

پذیرش

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

آزمون

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

فایل

در فرم تماس ۷ امکان آپلود فایل توسط کاربر وجود دارد. به طور مثال می‌توانیم از کاربر فایل رزومه یا عکس و غیره را بگیریم.

ذخیره پیام های فرم تماس ۷ وردپرس با فلامینگو

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

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

جمع بندی

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