ایجاد فرم تماس با ما در وردپرس با افزونه Contact Form by Supsystic

عرض سلام خدمت همراهان گرامی مکانیک وردپرس ؛
همانطور که شما عزیزان میدانید افزونه های متعددی برای ایجاد فرم تماس با ما در وردپرس وجود دارد که در آموزش های گذشته مکانیک وردپرس به تحلیل و بررسی آنها پرداختیم.
اما در این نوشته، به بررسی افزونه Contact Form by Supsystic وردپرس خواهیم پرداخت.
با ما همراه باشید…

فرم تماس با ما در وردپرس

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

افزونه Contact Form by Supsystic وردپرس

این افزونه وردپرس بیش از 20.000 نصب موفق و فعال در مخزن وردپرس به ثبت رسانده است.
همچنین از اخرین آپدیت ان کمتر از دو هفته میگذرد.

نصب و راه اندازی افزونه Contact Form by Supsystic وردپرس

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

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

در این صفحه ابتدا باید از فیلد بالا یک نام برای فرم خودمان در نظر بگیریم.
در قسمت پایین فیلد هم می‌توانید انواع فرم‌ها را بصورت آماده مشاهده کنید و بنا به نیاز سایت خود یکی از آن‌ها را انتخاب کنید. ما Time for tea را انتخاب کردیم.
در نهایت باید برای عبور از این صفحه و رفتن به تنظیمات فرم انتخاب شده بر روی دکمه ی Save در بالا سمت راست کلیک کنید.

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

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

تنظیمات فرم‌های انتخابی در این افزونه دارای تب‌بندی می باشند که به ترتیب به معرفی هر تب می‌پردازیم.

تب Design

Width: می‌توانید عرض فرم را با دو واحد درصد (precent) و پیکسل (pixel) مشخص کنید. اگر می‌خواهید فرم تمام عرض داشته باشید، مقدار را برابر ۱۰۰ و واحد را درصد در نظر بگیرید!
Background: از قسمت بک‌گراندها هم می‌توانید انواع بک‌گراندهای فرم تماس با ما در وردپرس را تعیین کنید. به عنوان مثال بک گراند۱ مربوط به تصویر زیر فرم است که می‌توانید آن را تغییر دهید یا اینکه آن را به صورت رنگ ساده در نظر بگیرید. برای بک گراندهای ۲،۳و ۴ هم به همین ترتیب!
در قسمت زیرین تنظیمات همین بخش هم فرم نهایی را مشاهده می‌کنید که می‌توانید در تب‌های بعدی آن را کاملا شخصی‌سازی کنید.

تب Fields

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

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

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

تب 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: برای اضافه کردن اطلاعات اضافی هم می توانید هر چند بار که می خواهید روی این گزینه کلیک کنید تا بتوانید تنظیمات اضافی داشته باشید.

تب های دیگر

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

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

اکنون زمان مشاهده نتیجه است:

پیشنهاد: همچنین میتوانید آموزش های زیر را مطالعه کنید:

• ساخت فرم تماس با ما در وردپرس با افزونه contact form 7
• ایجاد انواع فرم در وردپرس با افزونه FormCraft
• ساخت فرم های پرکاربرد در وردپرس با افزونه ی Form Maker
• ساخت فرم تماس با ما در وردپرس با افزونه Pirate Forms
• ساخت انواع فرم در وردپرس با افزونه Visual Form Builder
• افزونه فرم ساز Gravity Forms
• ساخت فرم تماس در وردپرس با افزونه Contact Form by BestWebSoft
• ساخت فرم حرفه ایی در وردپرس با افزونه Ninja Forms

موفق و پاینده باشید…