آموزش پلاگین وردپرسی Contact Form 7

%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-contact-form-7

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

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

contact-form71

 

بعد از فعال سازی پلاگین یک گزینه به گزینه های منوی سمت راست(در زبان فارسی) اضافه شده که  فرم تماس ۷ (contact)  می باشد که در تصویر قابل مشاهده است.

contact-form7-2

روی  contact  کلیک می کنیم و وارد فرم می شویم.در ابتدا و بعد از کلیک کردن می توان تمام فرم های ساخته شده را مشاهده کرد(برای اولین بار فقط یک فرم وجود دارد که به عنوان نمونه می باشد) که با کلیک دکمه edit  فرم ها (وقتی ظاهر می شوند که موس روی آنها باشد) می توان فرم مربوطه را ویرایش کرد.

contact-form7-3حال برای آشنایی با اجزای فرم یک فرم جدید از add new زده و شروع به ساخت و بررسی اجزای فرم می پردازیم.قبل از آن به ۴ زبانه ای که در بالا  نمایش داده شده است می پردازیم.

contact-form7-4

۱:درقسمت فرم ،فیلدهای  مربوط به فرم تماس را قرار میدهیم.ممکن است فرمی مانند فرم پیشفرض باشد و یا فرمی یک فیلد بیشتر (مثلا فیلد شماره تماس ) بخواهد.می توانیم از فیلدهای مختاف بسته به نیاز خود استفاده کنیم.در زیر به توضیح مختصر تمام فیلد ها می پردازیم.همچنین می توان به آن ها class و id برای فایل های css بدهیم و می توان وارد کردن فیلد را ضروری دانست.

 

text:فیلدی برای دریافت  رشته متنی که برای کارهای مختلف از جمله نام ، نام خانوادگی و … استفاده می شود

filed type: مشخص کردن اجباری بودن و یا نبودن فیلد

name: نام فیلد

default value : مقدار پیش فرض 

با زدن تیک Use this text as the placeholder of the field می توان مشخص کرد که مقدار پیش فرض به صورت placeholder باشد(یعنی با کلیک کردن فیلد خالی شود)

Akismet :اگر پلاگین Akismet فعال باشد قرار می گیرد که در اینجا به آن نمی پردازیم.

Id attribute : شناسه مربوط به فیلد که برای فایل های css و یا jquery مناسب می باشد(برای سبک دهی و یا انجام کاری خاص)

Class attribute :  کلاس  مربوط به فیلد که برای فایل های css و یا jquery مناسب می باشد(برای سبک دهی و یا انجام کاری خاص)

بعد از انجام گزینه های مربوطه inset tag را زده و فیلد مربوطه به فرم اضافه می گردد

نمونه کد 

[text* text-193 id:id class:class placeholder "please insert text"]

contact-form7-5

نمونه :

email : فیلدی برای دریافت  ایمیل  پست الکترونیکی کاربر

URL : فیلدی برای دریافت آدرس سایت و یا آدرسی از سایت های اینترنتی که ممکن است کاربر وارد نماید بیشتر از این فیلد برای سایت ها استفاده می شود.

tel : فیلدی برای دریافت  شماره تماس و یا یک شماره مانند کد پستی و …

number : فیلدی برای دریافت  شماره های عددی با انتخاب range بیشترین مقدار و کمترین مقدار و شماره پرش با step 

date : فیلدی  برای دریافت  تاریخ مانند تاریخ تولد و یا…

text area :  فیلدی برای یک متن طولانی مانند یک توضیحات و…

drop-down menu : یک منوی کشویی که می توان گزینه های خاصی را انتخاب کرد مانند جنسیت که مرد یا زن است .همچنین می توان تعیین کرد که بیش از یک انتخاب داشت

contact-form7-6

checkboxes : برای انتخاب چند مورد مانند drop-down menu با چند انتخاب می باشد

radio buttons : برای انتخاب یک گزینه از گزینه های مربوطه

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

File size limit  سایز فایل برحسب بایت اما می توان با mb نیز آن را تعریف کرد

Acceptable file types : فایل هایی که می توان پذیرفت مانند pdf ,doc,docx و …

submit : یک دکمه برای ارسال فرم.اگر این دکمه نباشد فرمی ارسال نمی شود.

 

بعد از اینکه فرم خود را ساختیم به زبانه بعدی یعنی زبانه mail می رویم

contact-form7-7

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

در گزینه دوم  نامی که مربوط به ایمیل گذاشته اید را قرار می دهید مانند [your-email]

گزینه سوم مربوط به موضوع می باشد مانند [your-subject]

گزینه چهارم مربوط به هدر های اضافی می باشد.

گزینه پنجم شامل گزینه های مربوط به message می باشد مانند [your-message]

در گزینه ششم باید نام فیلد هایی که برای ارسال فایل می باشد را قرار داد [your -files]

بعد از انجام تنظیمات گزینه save را می زنیم

contact-form7-8

در زبانه بعدی پیام های مربوط به ارسال و یا عدم ارسال پیام می باشد.در گزینه آخر نیز گزینه های اضافی می باشد .

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


 

contact-form7-9

در آخر هم می توانید برگه مربوطه را برای کاربران قرار داده تا با شما در ارتباط باشند.

contact-form7-10

 

با ما همراه باشید.

منبع :‌ مردان وردپرس

تاریخ آخرین بروزرسانی : ۲۲ مهر ۱۳۹۵
میلاد میلادی

باور هایت را که پرورش دهی به هرچیزی دست خواهی یافت.

ارسال نظر

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.