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

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

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

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

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

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

contact us -فرم تماس با ما در وردپرس

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

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

add new form-فرم تماس با ما در وردپرس

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

build form-فرم تماس با ما در وردپرس

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

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

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

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

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

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

تب Design

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

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

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

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

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

تب Fields

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

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

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

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

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

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

تب Submit Option

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

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

تب های دیگر

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

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

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

new post-فرم تماس با ما در وردپرس

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

result form-فرم تماس با ما در وردپرس

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

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

بخش Contact

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

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

send result-فرم تماس با ما در وردپرس

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

موفق باشید…

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

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

دانلود صفحه افزونه
راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) کانال تلگرام همیار وردپرس

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

۲۶۷,۲۴۷ نفر

دیدگاهتان را بنویسید

دیدگاه‌های این نوشته جدید شاخص

  1. سلام
    سایز متنشو چطور میشه تغییر داد؟

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

  3. سلام
    ممنون بابت آموزش
    چرا وقتی که ریکپچا رو به فرم اضافه میکنیم ارور ۵۰۴ رو میده؟

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

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

  6. 7 ماه عضو همیار وردپرس

    با سلامم میشه بیشتر راهنمایی کنید ک شورت کد را کجا قرار بدهم؟

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

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

  9. سلام
    وقتتون بخیر
    من افزونه ی contact form by supsystic رو نصب کردم
    مشکلی که در کار کردن باهاش دارم اینه که فرم من فیلدای خیلی زیادی داره در بخش دیزاین المنت رو میذاره ولی وقتی ذخیره اش می کنم و انتظار دارم که در خروجی نتیجه رو ببینم چیزی نشون نمیده.
    میشه لطفا راهنمایی کنید
    متشکرم

    • 2 سال عضو همیار وردپرس

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

  10. خدایی دمتون گرم من تازه با سایت شما آشنا شدم
    مطالبتون ذره ای کپی شده نیس و ممنونم که وقت میزارید و زحمت میکشید و اختصاصی تهیه کنید

  11. سلام . به ایمیلم پیام های دریافتی ارسال نمیشه . مشکل کجاست ؟
    مشخصات smtp هم درست ست کردم

  12. من این افزونه یا افزونه های مشابه رو که فعال میکنم نمیتونم برگه هارو ویرایش کنم.مشکل از چیه؟

    • 2 سال عضو همیار وردپرس

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

  13. واقعا ممنون….راهگشا بود برای من….خیلی زیاد

  14. سلام وقتتون به خیر من نمی تونم فرم رو فارسی بنویسیم چه کار باید انجام بدم

    • 2 سال عضو همیار وردپرس

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

  15. ممنون افزونه جالبی بود.

  16. سلام این افزونه را نصب کردم ولی پیغام خطا میده
    Could not instantiate mail function
    چطور میشه فعالش کرد

    • 3 سال عضو همیار وردپرس

      شما اگر از شبیه ساز ها استفاده می کنید چون امکان ارسال ایمل ندارند با این پیعام مواجه می شوید

  17. سلام
    خسته نباشین
    می بخشین من نمیدونم چرا سایز فرمم کوچیک شده
    یه کادر ۲در۷ دراومده و همه قسمتا فرم کادراش کوچیک و زیر هم شده
    میشه یه ایمیل بم بدین که عکسشو بفرستم تا راهنماییم کنین
    ممنون میشم 🙁

    • 2 سال عضو همیار وردپرس

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

مطالب زیر را حتما بخوانید

محبوبترین‌های آموزش آنلاین

  • دوره ۱۳ جامع وبمستران هوشمند

    ۶.۸ میلیون تومان
    ساخت کسب‌و‌کار اینترنتی امروزه یکی از اساسی‌ترین کارها برای ایجاد یا توسعه درآمدزایی میباشد. هر ایده‌ای که دارید میتوانید آنلاین در فضای اینترنتی راه اندازی نمایید فقط کافیست که بخواهید. یا اگر چندین سال...
  • دوره جامع آپ استارتاپ

    ۵.۸ میلیون تومان ۴.۱ میلیون تومان
      تمام بیلبوردهای شهر پر شده از تبلیغات کسب‌و‌کارهای آنلاین یا همان استارتاپ‌ها. استارتاپی‌هایی برای درخواست تاکسی، سفارش غذا، تعمیرات خودرو در محل، کارواش و حتی خشکشویی آنلاین! نمی توان انکار کرد که...
  • دوره جامع ۰ تا ۱۰۰ آموزش طراحی سایت و آموزش طراحی فروشگاه اینترنتی

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