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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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'); }}
4.6/5 - (8 امتیاز)
بازدیدکنندگانی که این مطلب را مطالعه کرده اند، از مطالب زیر نیز استقبال کرده اند
دیدگاهی بنویسید
22

  1. امیر نعمتی
    23 شهریور 1400 ساعت 16:19

    سلام وقتتون بخیر ببخشید نمیشه کاری کردکه پیام هایی که کاربران میفرستند،در پیشخوان وردپرس نشان داده شود؟ چون اخه به طور پیشفرض پیام ها رو به ایمیلمون میفرسته و ایمیل هم چک نمیکنم

    • پشتیبان
      24 شهریور 1400 ساعت 17:21

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

  2. رادان
    25 مرداد 1399 ساعت 14:46

    سلام
    من برای فیلد ارسال ایمیل به بخش مربوطه از تکه کد شما استفاده کردم اما بدرستی عمل نکرد و در واقع به ایمیلی ارسال می شود که در بخش to (ارسال به) وارد شده.
    لطفاً راهنمایی کنید.(در بخش to دقیقا چه چیزی نوشته شود؟)

    • پدرام تبریزی
      26 مرداد 1399 ساعت 23:43

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

  3. عرفان فتح اللهیان
    18 مرداد 1399 ساعت 21:47

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

    • پدرام تبریزی
      19 مرداد 1399 ساعت 15:03

      سلام وقت بخیر، مشکل از موارد متفاوتی می تواند باشد موارد زیر را بررسی کنید:
      1. بررسی تنظیمات و کدهایی که در فرم ساختید و یک بار دقیقا همان فرم پیش فرض افزونه تست کنید ببینید همین مشکل هست یا خیر.
      2. پیش آمده که مشکل از تداخل با افزونه دیگری باشد تمام افزونه های خود را غیرفعال نمایید و مجددا تست کنید.
      3. پیش آمده که مشکل از تداخل با قالب وردپرس باشد که اجازه ارسال ایمیل را نمیدهد قالب دیگری امتحان کنید.
      4. پوشه اسپم ایمیل خود را چک کنید.
      5. یک gmail دیگر وارد کنید.
      موفق باشید

  4. shayan
    12 تیر 1399 ساعت 21:11

    سلام من افزونه رو نصب کردم بعد یه مشکلی هست گزینه recaptcha رو نذداره

  5. حسین
    14 دی 1398 ساعت 14:11

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

  6. Elahe
    28 آذر 1398 ساعت 17:59

    سلام
    من افزونه رو نصب و داخل سایتم قرار دادم اما بعد از اینکه کسی فرم رو ارسال میکند برای او پیام “مشکلی در ارسال پیام شما بوجود آمده است، لطفا دوباره تلاش کنید.” نمایش داده میشه اما برای من پیام ارسال میشود مشکل از کجاست؟

    • پدرام تبریزی
      29 آذر 1398 ساعت 11:50

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

  7. افسانه
    30 شهریور 1398 ساعت 18:42

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

    • رضا کیانوش
      30 شهریور 1398 ساعت 20:53

      سلام وقت بخیر، ممکنه مشکل از بخش ارسال ایمیل هاست باشه. تیکت بزنید و پیگیری کنید.

  8. saeeid
    7 خرداد 1398 ساعت 00:01

    عرض سلام و ادب
    ابتدا از مطالب عالی سایتون سپاس گزارم دو تا سوال دارم
    سوال اول : وقتی این فرم فعال می کنم و gtmetrix انالیز می کنم این فرم جز ایرادات نشون میده چطور میشه رفعش کرد
    سوال دوم اینکه در اخر مقاله فرمودید بهینه کنیم این کد بهینه در کدوم پوشه قرار بگیره

    • رضا کیانوش
      7 خرداد 1398 ساعت 00:22

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

  9. ...
    21 اسفند 1397 ساعت 02:05

    سلام.چرا واسه من بخش کپچا نشون داده نمیشه؟

    • رضا کیانوش
      21 اسفند 1397 ساعت 07:16

      سلام وقت بخیر، برای مبارزه با اسپم میتونید از فیلد کوئیز استفاده کنید که یک کپچای ساده مثل 2+2 رو ایجاد میکنه اما اگر میخایین از کپچا حره ای استفاده کنید، افزونه Contact Form 7 Captcha رو نصب کنید. موفق باشید

  10. سپهر
    12 آبان 1397 ساعت 21:25

    سلام نام این افزونه دیدگاه ها چی هست من عین همین را میخام

    • رضا کیانوش
      13 آبان 1397 ساعت 06:54

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

      • سپهر
        13 آبان 1397 ساعت 12:22

        من افزونه ی دیدگاه میخام عینن ماله شما باشه

        • رضا کیانوش
          13 آبان 1397 ساعت 14:58

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

  11. رامین
    6 اسفند 1396 ساعت 10:55

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

    • رضا کیانوش
      6 اسفند 1396 ساعت 11:47

      سلام وقت بخیر، بله با افزونه فرم تماس 7 هست. خوشحالم مورد پسندتون بوده.