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

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

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

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

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

در این آموزش افزونه 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

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

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

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

اگر به هر نحوی ایمیل برای شما ارسال نشد می‌توانید از ایمیل دوم استفاده کنید.

استفاده از ایمیل دوم

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

آموزش افزونه 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 تمام شده است. به همین راحتی فرم تماس با ما توسط افزونه contact form 7 را ساخته اید. فرمی که در صفحه ظاهر می شود به شکل زیر خواهد بود.

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

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

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

دانلود افزونه Contact Form 7

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

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

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

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

افزونه Advanced Random Posts Widget

افزونه Advanced Random Posts Widget و نمایش تصادفی نوشته وردپرس

برای وبلاگ نویسان و مالکان سایت ها بسیار مهم است که بتوانند بازدیدکنندگان خود را …

یک دیدگاه

  1. محسن نوری

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

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

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