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

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

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

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

برای ساخت فرم تماس، هم می‌تونید کدنویسی کنید و هم از افزونه‌های فرم‌ساز کمک بگیرید. اگه به‌تازگی کار با وردپرس رو شروع کرده‌اید، استفاده از افزونه معمولاً براتون راحت‌تره. افزونه Contact Form 7 یکی از گزینه‌های شناخته‌شده‌ست، ولی تنها انتخابتون نیست. برای مقایسه یک گزینه دیگه، می‌تونید آموزش ساخت فرم تماس با افزونه رایگان WPForms رو هم ببینید. ما توی این مقاله با Contact Form by Supsystic کار می‌کنیم؛ افزونه‌ای که ویرایشگر دیداری و چند قالب آماده داره.

آشنایی با افزونه Contact Form by Supsystic

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

نسخه رایگان افزونه رو می‌تونید از مخزن رسمی وردپرس نصب کنید. نسخه Pro هم امکانات بیشتری در اختیارتون می‌ذاره. تعداد نصب فعال افزونه ثابت نیست و با گذشت زمان عوض می‌شه؛ پس اگه این آمار براتون مهمه، عدد به‌روز رو در صفحه رسمی مخزن بررسی کنید.

امکاناتی که می‌بینید به نسخه افزونه بستگی دارن. قابلیت‌های اصلی و بعضی امکاناتی که ممکنه در نسخه Pro در اختیارتون باشن، این‌ها هستن:

• ساخت فرم با کشیدن و رها کردن فیلدها
• نمایش واکنش‌گرا روی موبایل و دسکتاپ
• ساخت چند فرم و اضافه‌کردن فیلدهای مختلف
• تغییر ظاهر فرم و دکمه ارسال
• فرستادن اطلاعات فرم به ایمیل
• ذخیره اطلاعات تماس و گرفتن خروجی CSV، در نسخه‌ای که این قابلیت رو ارائه می‌کنه
• استفاده از روش‌های ضداسپم مثل Google reCAPTCHA، بسته به نسخه و تنظیمات افزونه
• قابلیت‌های پیشرفته مثل بارگذاری فایل، اتصال به بعضی سرویس‌های ایمیل و امتیازدهی در نسخه Pro
• نمایش فرم داخل ابزارهای پاپ‌آپ سازگار؛ البته خود افزونه پاپ‌آپ‌ساز مستقلی نداره

نیازمند بررسی قبل از انتشار: منابع رسمی درباره رایگان یا Pro بودن منطق شرطی اطلاعات یکسانی نمی‌دن. منطق شرطی یعنی مثلاً یک فیلد فقط زمانی دیده بشه که کاربر گزینه خاصی رو انتخاب کرده. بهتره این قابلیت رو در آخرین نسخه رایگان امتحان کنید و بعد وضعیت دقیقش رو بنویسید.

آموزش کار با Contact Form by Supsystic

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

بعد از فعال‌سازی، منوی Contact Form by Supsystic به پیشخوان اضافه می‌شه. وارد این منو بشید و روی Add New Form بزنید. یک اسم مشخص برای فرم بنویسید تا بعداً راحت پیداش کنید. حالا یکی از قالب‌های موجود رو انتخاب کنید و فرم رو ذخیره کنید.

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

مدیریت فرم‌ها در Show All Forms

بخش Show All Forms فهرست فرم‌هایی رو نشون می‌ده که تا الان ساخته‌اید. از همین‌جا می‌تونید فرم دلخواهتون رو ویرایش کنید، ازش یک کپی بسازید، پیش‌نمایشش رو ببینید یا فرم اضافه رو حذف کنید.

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

تنظیم ظاهر فرم در Design

تب Design برای تغییر ظاهر فرم کاربرد داره. با گزینه Width می‌تونید عرض فرم رو برحسب پیکسل یا درصد مشخص کنید. تنظیمات پس‌زمینه برای انتخاب نوع و رنگ پس‌زمینه‌ست و Submit Buttons Style ظاهر دکمه ارسال رو عوض می‌کنه. بعد از هر تغییری، بهتره پیش‌نمایش فرم رو هم روی موبایل و هم روی دسکتاپ ببینید.

اضافه‌کردن و ویرایش فیلدها در Fields

در بخش Fields می‌تونید فیلدهای فرم رو اضافه یا ویرایش کنید. فیلد همون بخشی مثل نام، ایمیل یا متن پیامه که کاربر اطلاعاتش رو داخل اون می‌نویسه. گزینه Add New Field یک فیلد تازه اضافه می‌کنه. Field Invalid Error Message هم متنی رو مشخص می‌کنه که اگه اطلاعات درست وارد نشده باشن، به کاربر نشون داده می‌شه.

برای یک فرم تماس ساده، معمولاً نام، ایمیل، موضوع و متن پیام کافیه. بهتره فیلد ایمیل رو اجباری کنید و متن خطاها رو واضح بنویسید تا کاربر بدونه دقیقاً کدوم بخش رو باید اصلاح کنه. سراغ اطلاعاتی که واقعاً لازم ندارید هم نرید؛ پرکردن یک فرم کوتاه برای کاربر راحت‌تره.

تنظیم ارسال فرم در Submit Options

بخش Submit Options مشخص می‌کنه بعد از کلیک روی دکمه ارسال چه اتفاقی بیفته و اطلاعات چطور فرستاده بشن. ممکنه بعضی زبانه‌ها یا گزینه‌ها فقط در نسخه Pro فعال باشن. پس بهتره امکانات در دسترس رو در نسخه‌ای که خودتون نصب کرده‌اید بررسی کنید.

• 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: برای تنظیم جزئیات ارسال مثل گیرنده، Reply-To، موضوع و متن ایمیل به کار می‌ره. این بخش ممکنه امکان ساخت چند تنظیم ارسال رو هم در اختیارتون بذاره.

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

فعال‌کردن روش‌های ضداسپم

فرم تماس ممکنه پیام‌های خودکار یا تبلیغاتی بگیره. اگه نسخه‌ای که نصب کرده‌اید گزینه Google reCAPTCHA یا روش ضداسپم دیگه‌ای داره، می‌تونید اون رو از تنظیمات افزونه فعال کنید. Google reCAPTCHA سرویسیه که به شناسایی ربات‌ها و ارسال‌های مشکوک کمک می‌کنه و ممکنه برای راه‌اندازیش به کلیدهای سایت نیاز داشته باشید.

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

قراردادن فرم داخل برگه

وقتی ساخت فرم تموم شد و اون رو ذخیره کردید، شورت‌کدش رو کپی کنید. بعد به بخش «برگه‌ها ← افزودن برگه تازه» برید یا برگه تماس قبلی سایتتون رو باز کنید.

در ویرایشگر گوتنبرگ روی علامت + بزنید و بلوک «کد کوتاه» یا Shortcode رو انتخاب کنید. شورت‌کدی رو که کپی کرده‌اید داخل این بلوک بذارید. بعد برگه رو ذخیره کنید و نتیجه رو در نمای اصلی سایت ببینید.

آزمایش فرم و رفع مشکل نرسیدن ایمیل

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

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

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

جمع‌بندی

برای ساخت فرم تماس با ما در وردپرس با Contact Form by Supsystic، کافیه افزونه رو نصب کنید، یک فرم تازه بسازید و فیلدهای موردنیازتون رو داخلش بذارید. بعد باید ایمیل گیرنده، پیام موفقیت و روش ضداسپم رو تنظیم کنید و شورت‌کد فرم رو داخل برگه تماس قرار بدید. قبل از انتشار هم حتماً یک پیام واقعی بفرستید، صندوق Spam رو بررسی کنید و فرم رو روی موبایل ببینید. اگه پیام‌ها به ایمیلتون نمی‌رسن، تنظیم SMTP می‌تونه مشکل روش ارسال ایمیل از سایت رو برطرف کنه.

سوالات متداول

تیم تولید محتوا

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