خانه / افزونه وردپرس / آموزش افزونه Contact Form 7 برای ساخت فرم تماس با ما در وردپرس

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

آموزش افزونه Contact Form 7

در این مقاله به آموزش افزونه Contact Form 7 که یکی از قدیمی ترین و محبوب ترین افزونه های فرم تماس با ما و جزء بهترین افزونه های فرم ساز وردپرس است، می پردازیم.

افزونه Contact Form 7 یا همان فرم تماس ۷ یکی از افزونه های قدیمی، پرکاربرد و رایگان برای سیستم مدیریت محتوا وردپرس است که بیش از ۵ میلیون نصب فعال دارد. با استفاده از این افزونه به راحتی می توانید انواع فرم های تماس و دیگر فرم های ارتباطی همچون فرم های استخدام و فرم های نظرسنجی را طراحی کنید و در سایت خودتان قرار دهید. از دیگر ویژگی های افزونه Contact Form 7 می توان به موارد زیر اشاره کرد:

  • ایجاد و مدیریت چندین فرم تماس
  • سفارشی سازی آسان فیلدهای فرم
  • استفاده از نشانه گذاری ساده برای تغییر محتوای ایمیل
  • وارد کردن فرم ها به هر برگه و نوشته با استفاده از شورت کد
  • پشتیبانی از فیلتر کردن هرزنامه ها، ارسال آژاکس و CAPTCHA

در این آموزش افزونه Contact Form 7 را مورد بررسی قرار داده و نحوه درست کردن فرم های تماس با آن را توضیح خواهیم داد.

ساخت فرم تماس با ما توسط افزونه Contact Form 7

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

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

آموزش افزونه Contact Form 7

در این صفحه می توانید تمام فرم های تماس ساخته شده با این افزونه را مشاهده کرده و آنها را مدیریت کنید. به محض نصب و فعال سازی افزونه Contact Form 7 یک فرم تماس پیش فرض به نام “فرم تماس 1” ساخته می شود. شما می توانید این فرم را ویرایش کرده و آن را در نوشته ها و برگه های وردپرس وارد کنید.

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

همچنین با استفاده از افزونه Contact Form 7 می توانید یک فرم تماس جدید بسازید. نحوه ساخت فرم تماس جدید با ویرایش فرم تماس موجود مشابه یکدیگر است. در ادامه آموزش به شما نشان خواهیم داد که چگونه یک فرم تماس جدید با افزونه Contact Form 7 بسازید.

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

آموزش افزونه Contact Form 7

همچنین می توانید در صفحه فرم های تماس روی دکمه “افزودن جدید” کلیک کنید.

سازنده فرم تماس با ما به صورت زیر باز می شود.

آموزش افزونه Contact Form 7

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

در این صفحه چند تب مختلف وجود دارد که در این قسمت از آموزش افزونه Contact Form 7 به بررسی تب های مختلف آن می پردازیم.

ساخت فرم

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

آموزش افزونه Contact Form 7

اگر بخواهید فیلدهای دیگری به فرم خود اضافه کنید می توانید از تگ هایی که در قسمت بالای فرم قرار داده شده است استفاده کنید. مانند شماره تلفن، ناحیه متنی، چک باکس ها و موارد دیگر. فیلد ها براساس زبان برنامه نویسی HTML نوشته شده اند.

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

آموزش افزونه Contact Form 7

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

آموزش افزونه Contact Form 7

نوع زمینه: اگر گزینه “زمینه الزامی” را تیک بزنید، پر کردن این فیلد الزامی شده و کاربر تا وقتی که شماره تلفن اش را وارد نکند نمی تواند فرم را ارسال نماید.

نام: قسمت نام مربوط به نام فیلد است که می توانید یک نام دلخواه مانند your-phone-number برای آن انتخاب کنید.

مقدار پیش فرض: اگر قسمت مقدار پیش فرض را پر کنید در فیلد شماره تلفن فرم، مقداری که وارد کرده اید به صورت پیش فرض قرار می گیرد.

اگر باکس “این متن به عنوان نگهدارنده در زمینه استفاده می شود” را فعال کنید، به محض کلیک کردن کاربر مقدار پیش فرض پاک می شود.

اگر با CSS آشنایی دارید می توانید برای قسمت id و class نامی انتخاب کرده و در فایل style.css یا در مسیر نمایش » سفارشی سازی، در استایل فرم تغییراتی ایجاد کنید.

 سپس بر روی دکمه “گذاشتن برچسب” کلیک کنید.

اگر می خواهید فیلد شما عنوان داشته باشد باید برای آن لیبل بگذارید. به این صورت که در صفحه ویرایشگر فرم، تگ باز و بسته لیبل <label></label> را تایپ کرده و عنوان و فیلد تلفن را میان آن قرار دهید. صفحه فرم شما به صورت زیر خواهد شد.

آموزش افزونه Contact Form 7

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

فرم تماس 7 به شما امکان می دهد قالب های ایمیل را ویرایش کنید. شما می توانید هم متن پیام و هم فیلد های هدر پیام را ویرایش کنید و همچنین می توانید HTML ایمیل را مدیریت نمایید.

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

آموزش افزونه Contact Form 7

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

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

توجه داشته باشید که تگ های فرم و تگ های ایمیل متفاوت از یکدیگر هستند. به عنوان مثال می توانید از تگ [text* your-name] در فرم و از تگ [your-name] در ایمیل استفاده کنید. هر کدام سینتکس متفاوتی دارند.

در قسمت “به”، صحت آدرس ایمیل را بررسی کنید. تمام ایمیل های مربوط به فرم های تماس به آدرس ایمیلی که در این قسمت قرار دارد، ارسال می شوند. (فرم تماس 7 به طور پیش فرض ایمیلی که به وب سایت شما لینک داده شده است را اضافه می کند).

به قسمت “محتوای پیام” اسکرول کنید و تگ های اضافی که در قسمت فرم اضافه کرده بودید را در این قسمت نیز اضافه کنید. به این ترتیب مطمئن می شوید که وقتی ایمیل را از طریق فرم تماس خود دریافت می کنید، تمام اطلاعاتی که از فرستنده خواسته بودید را نمایش می دهد.

ایمیل (2) یک قالب ایمیل اضافی است که اغلب به عنوان یک پاسخ دهنده خودکار استفاده می شود، اما می توانید برای هر منظور دیگری نیز از آن استفاده کنید. ایمیل (2) فقط هنگامی ارسال می شود که ایمیل اصلی با موفقیت ارسال شده باشد.

در پایین قسمت ایمیل بخش ایمیل۲ را فعال کنید و ایمیل مورد نظر خود را وارد کنید.

آموزش افزونه Contact Form 7

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

در افزونه Contact Form 7 می توانید متن پیام هایی که برای کاربر پس از ارسال فرم فرستاده می شود را سفارشی سازی کنید. در ادامه آموزش به بررسی این موضوع می پردازیم.

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

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

آموزش افزونه Contact Form 7

تنظیمات اضافی افزونه Contact Form 7

اگر به کدنویسی و css مسلط هستید، در این بخش می‌توانید یک سری تنظیمات یا ویژگی‌هایی به فرم تماس با ما در وردپرس اضافه کنید.

آموزش افزونه Contact Form 7

حالا که تنظیمات را انجام داده اید روی دکمه ذخیره (save) کلیک کنید. به محض کلیک کردن پیامی حاوی شورت کد برای شما نشان داده می شود. شورت کد داده شده را کپی کنید.

آموزش افزونه Contact Form 7

اضافه کردن فرم تماس با ما توسط افزونه contact form 7 در یک صفحه

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

آموزش افزونه Contact Form 7

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

آموزش افزونه Contact Form 7

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

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

آموزش افزونه Contact Form 7

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

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد. اگر می خواهید فرم تماس 7 خود را به یک فرم تماس چند مرحله ای ارتقا دهید مقاله فرم تماس چندمرحله ای با Contact Form 7 Multi-Step Forms را مطالعه کنید.

دانلود افزونه

دانلود افزونه
صفحه افزونه

درباره ی مینا قدسی

مطلب پیشنهادی

افزونه YITH WooCommerce Compare

YITH WooCommerce Compare افزونه مقایسه محصولات ووکامرس

افزونه YITH WooCommerce Compare یکی از بهترین افزونه های ووکامرس است که به کاربران امکان …

۹ دیدگاه

  1. محسن نوری

    چندین افزونه الان وجود دارند که به صورت ویژوال میشه فرم ها رو در Contact form 7 ساخت و دیگه نیازی نیست با کدها سر و کله بزنیم. یکی از اون افزونه ها
    Drag and Drop Form Builder for Contact Form 7
    هستش. هرچند که نسخه رایگان این برنامه تا حد زیادی کمک میکنه اما اگه بشه نسخه پولیش رو گیر آورد خیلی خیلی بهتر میشه. همچنین تو افزونه المنتور با یک افزونه جانبی دیگه که به المنتور اضافه میشد Contact Form 7 رو هم پشتیبانی میکرد. توی یه ویدئو دیدم. افزونه‌های دیگه‌ای هم هستن.

  2. سلام
    داداش باید ایمیل مال خود دامنه باشد،جی میل رو پشتیبانی نمیکنه…
    همچنین آموزشتون خلاصه ارائه شده و بهتر بود کامل باشه!

    • ممنونم از اینکه اینقدر دقیق آموزش رو مطالعه کردید، مطمئنا تمام تلاش مجموعه بر این اصل استوار بوده که کاربر بتواند با مطالعه ی آموزش های وردپرس به هدف خودش برسد…
      آموزش contact form 7 هم با توجه به توضیحات شما آپدیت و بروزرسانی خواهد شد.

  3. سلام من تنظیمات انجام دادم ولی ایمیلی که ارسال میشه به ادرس ایمیلی که مشخص کردم نمیاد چیکار کنم؟؟

    • ایمیلی که استفاده می کنید حتما باید از خود دامنه باشه، بطور مثال اگه دامنه شما example.com هستش ایمیل باید بصورت name@example.com به افزونه contact form معرفه بشه، بدین صورت هربار فرمی توسط کابران پر بشه به ایمیل name@example.com ارسال خواهد شد.

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

    • می تونید کد امنیتی به فرم تماس خود اضافه کنید و دیگه ربات و اسپمر نمی تونه بهتون پیام بده…
      برای این منظور می تونید سایت سازنده که توضیحات تکمیلی رو در لینک Really Simple CAPTCHA For Contact Form 7 قرار داده مشاهده نمائید.

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

    • مینا قدسی

      سلام ..ممکنه سرور ایمیل شما مشکلی داشته باشه…می توانید از افزونه flamingo استفاده کنید. این افزونه تمام پیام های دریافتی رو به شما نشون می دهد و توسط توسعه دهندگان همین افزونه طراحی شده…

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *