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

زمان انتشار:
تعداد بازدید: 167
دسته بندی ها: افزونه وردپرس، فرم ساز

زمان تقریبی خواندن نوشته: 13 دقیقه
حالت تمام صفحه:

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

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

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

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

این افزونه دارای محبوبیت بالایی است و بیش از ۹۰۰٫۰۰۰ نصب فعال را در مخزن وردپرس دارد.
کارکرد ساده و آسان آن در محیط ادمین وردپرس از ویژگی‌های بارز آن به‌شمار می‌آید.

به سادگی و سهولت می‌توانید از فرم‌های آماده آن استفاده کنید و در کمترین زمان ممکن، بهترین فرم‌ها را در سایت خود بسازید!

نکته: افزونه WPForms در بعضی از بخش‌ها راست‌چین نبود و دارای ایراداتی بود که روی سایت‌های فارسی‌زبان نامناسب بود.
ما این افزونه را فارسی‌سازی کردیم و در انتهای همین نوشته قرار دادیم.
بهتر است حتما از لینکی که در انتهای نوشته قرار داده شده است استفاده کنید تا بتوانید فرم‌های تماس خودتان را مشابه ما ایجاد کنید.

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

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

فرم تماس در وردپرس - تنظیمات افزونه1

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

فرم تماس در وردپرس - تنظیمات افزونه2 - افزودن فرم جدید

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

فرم تماس در وردپرس - تنظیمات افزونه3 - افزودن فرم تماس

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

تنظیمات فیلدها

فرم تماس در وردپرس - تنظیمات افزونه4 - تنظیمات فرم تماس

مشاهده می‌کنید که فرم تماس در وردپرس برای شما ایجاد شده است.

خیلی ساده می‌توانید فیلد موردنظرتان را حذف کنید و یا فیلدهای بیشتری را از ستون سمت چبه به ستون سمت راست ببرید.

فرم تماس در وردپرس - تنظیمات افزونه5 - تنظیمات فیلدها

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

مثلا برای فیلد نام تنظیمات زیر وجود دارد:

  1. Label: تغییر نام فیلد (متنی که بالای فیلد نوشته می‌شود)
  2. Format: نوع نمایش فیلد (نام تنها – نام و نام خانوادگی و…)
  3. Description: توضیحات فیلد
  4. Required: پر کردن این فیلد اجباری است؟

فرم تماس در وردپرس - تنظیمات افزونه6 - تنظیمات پیشرفته فیلدها

و همچنین در قسمت Advanced Options:

  1. Field Size: سایز فیلد موردنظر
  2. Default Value: مقدار پیش‌فرضی که درون فیلد نوشته می‌شود.
  3. Placeholder: مقداری که جهت راهنما درون فیلد نوشه می‌شود (پس از نوشتن اولین کاراکتر درون فیلد این مقدار از بین می‌رود)
  4. Hide Label: مخفی کردن لیبل (در بالای فیلد نمایش داده می‌شود)
  5. Hide Sub-Labels: مخفی کردن ساب لیبل (در زیر فیلد نمایش داده می‌شود)
  6. CSS Classes: کلاس سی‌اس‌اس (بعدا می‌توانید از طریق این class به این فیلد در css استایل موردنظرتان را بدهید – البته اگر css نویسی می‌دانید)

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

تنظیمات فرم – General

فرم تماس در وردپرس - تنظیمات افزونه7- عمومی

تنظیمات کلی فرم ایجاد شده در این قسمت قابل مشاهده است:

  1. Form Name: نام فرم شما
  2. Form Description: توضیحات فرم شما
  3. Form CSS Class: کلاس CSS فرم شما
  4. Submit Button Text: متن دکمه ارسال پیام
  5. Submit Button Processing Text: متن دکمه ارسال پیام در حالت انتظار برای ارسال
  6. Submit Button CSS Class: کلاس CSS دکمه ارسال پیام
  7. Enable anti-spam honeypot: فعال کردن جلوگیری از ارسال پیام‌های اسپم

تنظیمات فرم – Notifications

فرم تماس در وردپرس - تنظیمات افزونه8 - اعلان‌ها

این قسمت هم مربوط به ساختار ایمیل‌های ارسالی است.

در ابتدا برای ارسال ایمیل‌ها در قسمت بالا Notifications را برابر مقدار On قرار دهید.
در قسمت Send To Email Address هم ایمیل موردنظر را جهت ارسال پیام‌ها از فرم تماس به آن ایمیل تعیین کنید.
اگر می‌خواهید به همان ایمیل ادمین ارسال شود مقدار آن را تغییر ندهید.
اما اگر می‌خواهید به ایمیل موردنظر شما ارسال شود، ایمیل دلخواه را درون این فیلد وارد کنید.

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

تنظیمات فرم – Confirmation

فرم تماس در وردپرس - تنظیمات افزونه9 - تائید فرم

تنظیمات مربوط به بعد از ارسال پیام توسط کاربران شما:

  1. Confirmation Type: در این قسمت می‌توانید تعیین کنید که بعد از ارسال پیام توسط کاربران چه کاری می‌خواهید انجام دهید.
    می‌توانید متنی که در زیر آورده شده است را به آن‌ها در همان صفحه نمایش دهید.
    یا اینکه آن‌ها را به برگه‌ای هدایت کنید.
    یا کلا به صفحه دلخواه خودتان ریدایرکت کنید.
  2. Confirmation Message: در صورت انتخاب نمایش متن، می‌توانید اینجا متن موردنظر را قرار دهید.
  3. Automatically scroll to the confirmation message: فعال کردن اسکرول خودکار جهت اسکرول کردن به متن Confirmation Message بعد از ارسال موفقیت آمیز پیام.

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

فرم تماس در وردپرس - تنظیمات افزونه10 - تنظیمات پرمیوم

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

گرفتن شورت‌کد و نمایش فرم در برگه

فرم تماس در وردپرس - تنظیمات افزونه11 - گرفتن شورت‌کد

بعد از ذخیره فرم خودتان به صفحه همه‌ی فرم‌های ایجاد شده بروید.
مشاهده می‌شود که فرم موردنظر ایجاد شده است.

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

فرم تماس در وردپرس - تنظیمات افزونه12 - قرار دادن شورت‌کد در برگه جدید

مطابق تصویر بالا شورت‌کد را درون برگه جایگذاری کنید و برگه را منتشر کنید.

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

فرم تماس در وردپرس - مشاهده فرم ساخته شده

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

فقط دو قسمت Settings و Tools در این افزونه باقی مانده است که خیلی سریع آن‌ها را هم خدمتتان عرض می‌کنیم تا برای ساخت فرم‌ها مشکلی نداشته باشید و اگر خواستید در این دو قسمت هم تنظیمات دلخواه خودتان را اعمال کنید.

بخش Settings

فرم تماس در وردپرس - تنظیمات افزونه14

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

فرم تماس در وردپرس - تنظیمات افزونه15 - منو تنظیمات

در زیر به معرفی همه‌ی تنظیمات موجود در هر تب می‌پردازیم:

General

  • Include Form Styling: استایل فرم‌های خودتان را از این قسمت می‌توانید تعیین کنید.
  • Load Assets Globally: آیا می‌خواهید کدهای این افزونه در تمامی برگه‌های شما لود شود؟ (بهتر است این تیک فعال نباشد)
  • Hide Announcements: مخفی کردن اطلاعیه‌های افزونه در بخش ادمین

Email

  • Template: فرمت ایمیل‌های ارسالی به چه صورت باشد؟ (متن ساده یا فرمت HTML)
  • Header Image: تصویر موجود در هدر ایمیل‌های ارسالی چه چیزی باشد؟
  • Background Color: رنگ بک‌گراند ایمیل‌ها چه رنگی باشد؟
  • Carbon Copy: فعال کردن CC – وجود آدرس ایمیل در تنظیمات اطلاع‌رسانی فرم.

reCAPTCHA

خیلی ساده به آدرس https://www.google.com/recaptcha/intro/invisible.html بروید و ریکپچا موردنظرتان را بسازید و به سادگی اطلاعات را درون این صفحه از افزونه وارد کنید.

بعد از آن می‌توانید برای فرم‌های خودتان از این ریکپچا استفاده کنید.

Validation

در این قسمت پیام‌های خطا، هنگام ارسال فرم وجود دارد.

 

فرم تماس در وردپرس - تنظیمات افزونه16 - پیام‌های فرم

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

بخش Tools

فرم تماس در وردپرس - تنظیمات افزونه17 - ابزارها

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

فرم تماس در وردپرس - تنظیمات افزونه18 - منو ابزارها

Import: درون‌ریزی کردن اطلاعات فرم (اگر از قبل فایل درون‌ریز دارید).

Export: تهیه‌ی برون‌ریز از فرم‌های ایجاد شده.

System Info: اطلاعات سیستم.

مشاهده خروجی

فرم تماس در وردپرس - مشاهده خروجی با پیام‌ها

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

خب دوستان، آموزش ساخت فرم تماس در وردپرس با افزونه WPForms به پایان رسید.
امیدواریم این آموزش برای شما مفید بوده باشد.

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

موفق باشید…

دانلود نسخه فارسی‌سازی شده افزونه WPForms

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

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

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

پاسخ دهید

دیدگاه شما برای ما ارزشمند است. در کمترین زمان ممکن به آن پاسخ خواهیم داد.

دیدگاه های این نوشته

دیدگاهی برای این نوشته وجود ندارد.