سلام وردپرسی های عزیز
امروز می خواهیم به شما یاد دهیم تا فرم تماس با ما را به صورت حرفه ای با استایل هایی که خودتان می خواهید ایجاد کنید. برای ایجاد فرم تماس با ما نیاز به افزونه ی Contact Form by Supsystic دارید؛ این افزونه تاکنون بیش از ۲۰۰۰۰ نصب فعال در مخزن وردپرس داشته است که این تعداد نصب بالا، نشان از محبوبیت این افزونه در میان کاربران وردپرسی است. ما در اینجا به طور کامل به آموزش افزونه Contact Form by Supsystic برای ایجاد فرم تماس با ما می پردازیم.
در صورتی که فرم‌ساز حرفه‌ای میخواهید که فارسی باشد و به راحتی و آسانی فرم خود را بسازید،
به شما پیشنهاد میکنم از فرم ساز Quform استفاده کنید. (برای دیدن امکانات افزونه Quform کلیک کنید)
نصب و فعال سازی افزونه ی Contact Form by Supsystic
ابتدا افزونه Contact Form by Supsystic را که در پایان آموزش قرار دادیم دانلود و نصب کنید. اگر با نصب افزونه آشنایی ندارید مقاله ی آموزشی نصب افزونه را مشاهده کنید. بعد از نصب افزونه آن را فعال کنید بعد از فعال کردن گزینه ی Contact Form by Supsystic در پنل وردپرس ظاهر می شود.
معرفی زیر منو Add New Form
ایجاد فرم جدید
برای ایجاد فرم جدید بر روی زیرمنو Add New Form کلیک کنید تصویر زیر برای شما نمایش داده خواهد شد.
در فیلد form name نام فرم تان را بنویسید سپس یک فرم را از میان فرم های آماده ای که قرار دارد انتخاب کنید. ما فرم حرفه ای – رایا وردپرس را با نوع Time for tea ایجاد کردیم در پایان بر روی دکمه ی save کلیک کنید.
تنظیمات فرم ایجاد شده
بعد از اینکه بر روی دکمه ی save کلیک کردید تصویر زیر را مشاهده خواهید کرد.
در تصویر بالا تب هایی را مشاهده می کنید با چهار تب در سمت راست می توانید فرم تماس را ذخیره کنید، تکراری از آن فرم ایجاد کنید، پیش نمایش فرم را ببینید، فرم را حذف کنید و شورت کد سمت چپ را می توانید در برگه یا نوشته ی خود قرار دهید.
اکنون به معرفی تب های مختلف که در بالا مشاهده می کنید می پردازیم.
معرفی تب Design
Width: در این قسمت عرض فرم را می توانید وارد کنید و واحد آن نیز به پیکسل یا درصد انتخاب کنید. برای نمایش تمام عرض مقدار ۱۰۰ و واحد را درصد انتخاب کنید.
Background: در بک گراندهای ۱، ۲، ۳ و ۴ می توانید یک رنگ یا عکس برای زیر فرم انتخاب کنید.
در پایان بر روی دکمه ی save کلیک کنید.
معرفی تب Fields
ما در این قسمت فیلدهای فرم را تنظیم می کنیم.
Field invalid error message : این قسمت متن خطای فیلدها را وارد کنید ما برای نمونه متنی را نوشتیم.
Add New Field: با کلیک روی این قسمت پنجره ای برای شما نشان داده خواهد شد که دارای انواع فیلدها می باشد هر فیلدی را که نیاز دارید به فرم اضافه کنید.
در پایین دکمه ی Add New Field فیلدهای مختلفی را مشاهده می کنید که با کلیک روی هر کدام پنجره ای باز خواهد شد که شما می بایست در قسمت Label نام فیلد را به فارسی بنویسید به همین ترتیب برای فیلدهای دیگر نیز این کار را انجام دهید.
در پایان بر روی دکمه ی save کلیک کنید.
معرفی تب Submit Option
Form sent message: در این قسمت متنی که بعد از ارسال فرم می خواهید برای کاربر نشان داده شود را بنویسید.
Form sent message color: در این قسمت رنگ متن بالا را می توانید تعیین کنید.
Hide form after submit: شما با تیک زدن این گزینه فرم ارسالی کاربر را مخفی می کنید.
Redirect after submit: اگر می خواهید کاربر بعد از ارسال فرم به لینکی که شما نمایش می دهید برود لینک موردنظر را این قسمت وارد کنید. در زیر این گزینه دو فیلد دیگر وجود دارد که شما تعیین می کنید می خواهید لینک در همان صفحه باز شود یا در پنجره ی جدیدی نشان داده شود.
Email data as in Form: اگر می خواهید اطلاعات فرم ارسالی کاربر برای شما به عنوان مدیر سایت ایمیل شود این گزینه را تیک بزنید.
Test Email Function: با این گزینه یک ایمیل تست ارسال کنید تا اطمینان یابید ایمیل برای شما ارسال می شود.
Save contacts data: با تیک زدن این گزینه اطلاعات فرم کاربر برای شما ذخیره خواهد شد.
Send only Field values: با تیک زدن این گزینه مقدار فیلدها برای شما ذخیره می شود. اگر این گزینه را تیک نزنید مقدار فیلد همراه با لیبل آن برای شما ذخیره خواهد شد.
Add additional data for submit: برای افزودن اطلاعات اضافی این قسمت را کلیک کنید.
در پایان بر روی دکمه ی save کلیک کنید.
سپس به قسمت نوشته یا برگه بروید و شورت کد را در آن کپی کنید و بعد روی دکمه ی انتشار کلیک کنید.
اکنون پیش نمایش فرم در سایت را مشاهده کنید.
معرفی زیرمنو contacts
در زیر منو contacts اطلاعات تمام فرم های ارسالی کاربران ثبت می شود.
جمع بندی!
اگر می خواهید یک فرم تماس با ما به صورت خیلی حرفه ای برای سایت تان درست کنید پیشنهاد می کنیم از افزونه ی Contact Form by Supsystic استفاده کنید. ما در اینجا به طور مفصل به آموزش این افزونه پرداختیم.