ایجاد فرم تماس با ما به صورت حرفه ای در وردپرس با Contact Form by Supsystic+ ویدئوی آموزشی

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

فرم تماس با ما در وردپرس با Contact Form by Supsystic

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

نصب و راه اندازی افزونه

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

افزودن فرم جدید

بر روی گزینه Add New Form کلیک کنید تا اولین فرم حرفه‌ای را ایجاد کنیم.

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

تنظیمات فرم انتخاب شده

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

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

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

تب Design

• Width: می‌توانید عرض فرم را با دو واحد درصد (precent) و پیکسل (pixel) مشخص کنید.

نکته: اگر می‌خواهید فرم تمام عرض داشته باشید، مقدار را برابر 100 و واحد را درصد در نظر بگیرید!

• Background: از قسمت بک‌گراندها هم می‌توانید انواع بک‌گراندهای فرم تماس با ما در وردپرس را تعیین کنید. به عنوان مثال بک گراند1 مربوط به تصویر زیر فرم است که می‌توانید آن را تغییر دهید یا اینکه آن را به صورت رنگ ساده در نظر بگیرید. برای بک گراندهای 2،3و 4 هم به همین ترتیب!

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

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

تب های دیگر

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

پایان کار و مشاهده خروجی

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

سپس شورت کد مورد نظرمان را در ویرایشگر کپی می کنیم و آن را در سایت منتشر می کنیم.

همان طور که مشاهده می کنید فرم مورد نظرمان ایجاد شده است.

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

بخش Contact

این بخش مربوط به ثبت نتایج فرم های ارسالی می باشد.

می توانید نتایجی را که توسط بازدیدکنندگان سایت ثبت شده است را مشاهده کنید. در تصویر بالا به دلیل ارسال نشدن هیچ فرمی، جداول خالی می باشند.

موفق باشید…

ویدئوی آموزشی

دانلود افزونه Contact Form by Supsystic

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