افزونه فرم تماس وردپرس Contact Form 7 + آموزش فرم ساز

همینطور که میدانید برای ساخت فرمهای ارتباطی در وردپرس باید از افزونه فرم تماس وردپرس استفاده کنیم.
اگر در مخزن افزونه های وردپرس جستجو کرده باشید با انواع پلاگینهای تماس روبرو میشوید در این میان افزونه Contact Form 7 با بیش از ۳ میلیون نصب فعال از محبوبیت بسیار زیادی برخوردار است. در این مطلب به آموزش ساخت فرم تماس حرفه ای توسط این plugin میپردازیم پس تا انتها همراه ایران تمز باشید.

افزونه فرم تماس وردپرس Contact Form 7 + آموزش فرم ساز

معرفی امکانات افزونه فرم تماس وردپرس Contact Form 7

برخی از امکانات پلاگین تماس هفت contact form 7 عبارتند از:

  1. سادگی کار با فرم ساز و راه اندازی سریع توسط کد کوتاه
  2. حجم کم و بهینه بودن فرم های ارتباطی
  3. استفاده از ایجکس ajax برای ارسال فرم
  4. دارای انواع فیلدهای متنی، چک باکس، صحیح و غلط، آپلود فایل و …
  5. امکان ایجاد پرسش امنیتی برای تشخیص انسان از ربات تحت وب
  6. قابلیت تعیین ایمیل دلخواه برای ارسال شدن فرم به آن
  7. امکان نمایش پیام های هشدار برای فیلدهای مختلف
  8. قابلیت تعیین متن دلخواه برای پیام ارسال صحیح فرم
  9. امکان ارسال ایمیل به بخش مربوطه در سایتهایی که چندین پرتال دارند.
  10. پشتیبانی از افزودنی در قالب افزونه دیگر
  11. پشتیبانی از کپچای گوگل
  12. و …

آموزش تنظیمات افزونه فرم تماس ۷ وردپرس

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

آموزش تنظیمات افزونه فرم تماس 7 وردپرس

همینطور که در تصویر مشاهده میکنید این بخش دارای ۴ تب با عناوین form فرم، mail ایمیل، پیام messages و تنظیمات اضافی additional settings میباشد. در تب فرم با استفاده از انواع فیلدها امکان ساخت فرم تماس را داریم. هر فیلد به همراه نام آن بهتر است در تگ باز و بسته <label> قرار بگیرد. به طور پیشفرض فیلدهای نام، ایمیل، موضوع، پیام و دکمه ارسال در فرم موجود هستند.

آموزش تنظیمات ارسال ایمیل افزونه فرم تماس وردپرس ۷

اکنون به بررسی تب mail ایمیل که شبیه تصویر زیر است میپردازیم.

افزونه فرم تماس وردپرس Contact Form 7 + آموزش فرم ساز

در این تب باید کدهای کوتاه هر فیلد را که در تب فرم form اضافه کردیم را به این بخش نیز اضافه کنیم تا بعد از ارسال فرم توسط کاربر محتوای هر فیلد به ایمیلی که در تب to مشخص کرده ایم ارسال شود. به عنوان مثال اگر شورت کد [ your-message ] را در بخش بدنه پیام message body حذف کنیم دیگر متن توضیحات فرم ارسال نخواهد شد. در تب پیامها messages میتوانید پیامهای هشدار و تائید ارسال ایمیل را با متن دلخواه تعیین کنید. تب تنظیمات اضافی additional settings نیز برای اعمال یکسری تنظیمات اضافه مانند: غیرفعال کردن ارسال فرم توسط توابع مربوطه بکار میرود که نیازی به تنظیم آن نیست. پس از ذخیره تغییرات، شورت کدی ساخته میشود که میتوان با قرار دادن در برگه یا نوشته های وردپرس فرم تماس را نمایش داد.

فیلد ارسال ایمیل به بخش مربوطه در افزونه فرم تماس وردپرس ۷

در سایتهای چند پرتالی که بخشهایی مانند: فروش، امور مالی، پشتیبانی و … میتوان با استفاده از فیلد Selectable Recipient with Pipes امکان ارسال فرم به ایمیل متفاوت را فراهم کرد. برای اینکار از کدهای کوتاه زیر در تب فرم و بخش to (ارسال به) ایمیل استفاده میکنیم. اکنون کاربر میتواند با استفاد از فیلدی دراپ داون بخش مربوطه را انتخاب کند تا فرم تماس تنها برای آن بخش ایمیل شود.

// در تب فرم کد زیر را قرار میدهیم.
[select your-recipient "سفارش|ceo@example.com"
"مالی|sales@example.com"
"پشتیبانی|support@example.com"]
// در تب فرم و در بخش ایمیل کد میانبر زیر را قرار میدهیم.
[your-recipient]

بهینه سازی افزونه فرم تماس وردپرس ۷ برای افزایش سرعت بارگذاری سایت

پلاگین کنتاکت فرم هفت یکسری فایلهای css و js برای استایل دهی و ایجاد قابلیت ایجکس (آژاکس) در فرم های ارتباطی در صفحه بارگذاری میکند. نکته ای که وجود دارد بارگذاری فایلها در تمام صفحات سایت است که میتوانیم با استفاده از کدهای زیر کاری کنیم که فایلهای استایل و جاوا تنها در صفحاتی که فرم در آن قرار دارد بارگذاری شوند. برای این منظور باید شناسه ای دی ID صفحاتی که فرم دارند را بجای اعداد ۴۲ و ۶۱ که ای دی صفحات میباشند، قرار دهیم.

add_action('wp_print_scripts','deregister_cf7_javascript',100);
function deregister_cf7_javascript(){ if (!is_page(array(42,61))){
wp_deregister_script('contact-form-7'); }}
add_action('wp_print_styles','deregister_cf7_styles',100);
function deregister_cf7_styles(){ if (!is_page(array(42,61))){
wp_deregister_style('contact-form-7'); }}
مطالب مرتبط

دیدگاهی بنویسید.

بهتر است دیدگاه شما در ارتباط با همین مطلب باشد.