آموزش افزونه Supsystic و ساخت فرم تماس با ما در وردپرس

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

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

کار با افزونه Contact Form by Supsystic ساده است، تنها با قرار دادن یک شورت کد در صفحه یا نوشته میتوانید فرم تماس با ما را در وب سایت خود برای کاربران به نمایش بگذارید.

در این آموزش افزونه Supsystic را بررسی کرده و نحوه ساخت یک فرم تماس و قرار دادن آن در یک صفحه با استفاده از این افزونه را بررسی خواهیم کرد.

آموزش افزونه Supsystic و نحوه ساخت فرم تماس با ما در وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه، منوی جدیدی به نام Contact Form by Supsystic در پیشخوان وردپرس نشان داده می شود.

در پیشخوان وردپرس روی قسمت Contact Form by Supsystic رفته و روی Add New Form کلیک کنید. سازنده فرم تماس با ما در وردپرس با افزونه Supsystic باز می شود.

آموزش افزونه Supsystic

برای فرم تماس با ما خود یک نام بگذارید و از بین قالب فرم های آماده یکی را برحسب نیازتان انتخاب کرده و روی دکمه save کلیک کنید.

بعد از زدن دکمه save وارد صفحه تنظیمات می شوید.

آموزش افزونه Supsystic

تنظیمات فرم

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

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

در قسمت سمت چپ هم می‌توانید شورت‌کد فرم مورد نظر را مشاهده کنید، که  بعد از انجام تنظیمات دلخواهتان می‌توانید آن را در برگه یا نوشته قرار دهید و نتیجه را در خروجی مشاده کنید.

آموزش افزونه Supsystic

در اولین مرحله صفحه show all forms را مشاهده میکنید، در این بخش چند تب وجود دارد که موارد اصلی را توضیح میدهم.

آموزش افزونه Supsystic

تب design

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

اگر می‌خواهید فرم تمام عرض داشته باشید، مقدار را برابر ۱۰۰ و واحد را درصد در نظر بگیرید.

سپس نوع بک گراند و رنگ بندی پس زمینه فرم را به صورت دلخواه خود در آورید. به عنوان مثال بک گراند۱ مربوط به تصویر زیر فرم است که می‌توانید آن را تغییر دهید. در پایین هر بخش، فرم درست شده نمایش داده می شود.

آموزش افزونه Supsystic

تب Fields

در این تب می توانید فیلدهای فرم را تغییر و اضافه کنید.

گزینه Field invalid error message در قسمت اول این تب مربوط به متن خطای هر فیلد است، در این فیلد می‌توانید متن مورد نظر خودتان را به فارسی قرار دهید.

با کلیک بر روی دکمه Add New Field هم یک پنجره پاپ آپ حاوی انواع فیلدها برای شما نمایش داده می‌شود که می‌توانید فیلد مورد نظر خود را که می‌خواهید در فرم شما قرار بگیرد انتخاب کنید.

در قسمت پایین دکمه ی Add New Field هم فیلدهای فرم مورد نظر را می توانید مشاهده کنید، که با کلیک بر روی هر فیلد پنجره ی پاپ آپی مشابه تصویر زیر برای شما باز خواهد شد:آموزش افزونه Supsystic

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

در تب دوم، سوم و چهارم هم می توانید تنظیمات دیگر را برای هر فیلد خود از جمله تعیین آیکون، تعیین مقدار مینیمم و ماکسیمم و… را انجام دهید.آموزش افزونه Supsystic

تب Submit Option

این تب دارای سه تب زیر مجموعه General و Publish Content و Registrstion است که دو تب آخر مربوط به بخش پرمیوم می باشند، پس تنها به معرفی تب اول می پردازیم.

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 کلیک کنید. همانطور که در ابتدای آموزش افزونه Supsystic توضیح داده شد می توان فرم های ایجاد شده را ذخیره، حذف و کپی و قبل از منتشر کردن دید.

 آموزش افزونه Supsystic و اضافه کردن فرم تماس با ما در یک صفحه

در این قسمت از آموزش افزونه Supsystic زمان آن فرارسیده است که فرم ساخته شده را در یک صفحه قرار دهید. می توانید شورت کد فرم تماس با ما را از قسمت سمت چپ بالای صفحه که در ابتدای آموزش توضیح داده شد، کپی کنید.

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

آموزش افزونه Supsystic

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

آموزش افزونه Supsystic

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

آموزش افزونه Supsystic

در بخش Contact میتوان اطلاعات مخاطبین که پس از ارسال فرم برای شما ذخیره شده است را دید. در اینجا چون مخاطبینی وجود نداشته چیزی نشان داده نمی شود. همچنین می توانید در بخش تنظیمات گزینه های موجود را بر حسب نیازتان تغییر و ذخیره کنید.

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

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

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

 

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

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

افزونه Duplicate Page

افزونه Duplicate Page و کپی کردن نوشته ها در وردپرس

یکی از راه هایی که می توانید روی یک نوشته یا برگه وردپرس بدون تأثیر …

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

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