آموزش افزونه Ninja Forms و ساخت فرم های حرفه ای در وردپرس

آموزش افزونه Ninja Forms

در این مقاله به آموزش افزونه Ninja Forms که یکی از بهترین افزونه های فرم ساز وردپرس و یک افزونه قدرتمند و حرفه ای برای ساخت انواع فرم ها است، می پردازیم. این افزونه تا تاریخ درج این مقاله بیش از 1 میلیون نصب فعال داشته و امتیاز 4.4 از 5 را کسب کرده است.

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

اگر به دنبال راهی برای اضافه کردن فرم ها به وب سایت وردپرسی خود هستید، Ninja Forms قطعاً نامی است که با آن برخورد خواهید کرد.

Ninja Forms یک افزونه فرم ساز رایگان وردپرس است که توسط تیم WP Ninjas ساخته و پشتیبانی می شود. قابلیت های اصلی در این افزونه به صورت رایگان عرضه شده است ولی قابلیت های پیشرفته به صورت add-on های جداگانه در دسترس هستند که می توانید هر کدام را که منطبق با نیازهای شما است به صورت جداگانه خریداری نموده و بر روی سایت خود نصب نمایید. به این ترتیب شما تنها ویژگی هایی که نیاز دارید را تهیه می کنید.

با استفاده از افزونه Ninja Forms شما می توانید انواع فرم ها شامل موارد زیر را ایجاد کنید:

  • فرم های سفارش: فرم های فروش آنلاین محصولات و خدمات و دریافت پیش پرداخت
  • فرم های درخواست برای پیشنهاد قیمت: ایجاد فرم های سفارشی برای دریافت تمام اطلاعات لازم برای ارسال مظنه به مشتری یا برای تخمین کار خود.
  • فرم های اشتراک/Opt-in: با ایجاد فرم های Opt-in یا اضافه کردن گزینه اشتراک به فرم های دیگر خود، مشترکان بیشتری را عضو خبرنامه خود می کنید.
  • نظرسنجی: با اعمال یک نظرسنجی در وب سایت، استراتژی وب سایت خود را بر مبنای داده هایی که از کاربرانتان دریافت می کنید، پایه گذاری می کنید.
  • فرم های ارسال پست: به بازدیدکنندگان اجازه دهید که پست های وبلاگ خودشان را از فرانت اند سایت شما اضافه یا ویرایش کنند.

قابلیت های نسخه رایگان افزونه Ninja Forms برای اضافه کردن یک فرم تماس به وب سایت وردپرسی شما کاملاً کافی و حتی بیشتر از انتظار شما است.

در این آموزش افزونه Ninja Forms را بررسی کرده و نحوه ساخت یک فرم تماس با ما را با این افزونه برای شما توضیح خواهیم داد.

آموزش افزونه Ninja Forms و نحوه ساخت فرم تماس با ما در وردپرس

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

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

آموزش افزونه Ninja Forms

در این صفحه می توانید لیست فرم های ایجاد شده توسط این افزونه و شورت کد آنها را مشاهده کنید.

برای ایجاد یک فرم جدید روی دکمه Add New کلیک کنید. یا در منوی Ninja Forms پیشخوان وردپرس روی زیرمنوی Add New کلیک کنید. صفحه ای مشابه شکل زیر نشان داده خواهد شد.

آموزش افزونه Ninja Forms

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

مثلاً اگر می خواهید یک فرم تماس با ما ایجاد کنید کافی است روی Contact Us کلیک کنید. فرم از پیش ساخته شده که حاوی فیلدهای نام، ایمیل، پیام و دکمه ارسال می باشد به صورت زیر نشان داده می شود.

آموزش افزونه Ninja Forms

برای ویرایش و تغییر دادن لیبل یا موقعیت فیلدها، روی فیلد موردنظر کلیک کنید. صفحه ویرایش فیلد به شکل زیر برای شما نشان داده می شود.

آموزش افزونه Ninja Forms

در صفحه باز شده در قسمت LABEL برچسب مورد نظر را اعمال کنید. در این قسمت می توانید فیلدها را فارسی سازی نمایید. به عنوان مثال Name را به نام تغییر دهید.

در صورتی که پر کردن فیلد برای کاربر اجباری باشد، گزینه REQUIRED FIELD را فعال کنید.

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

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

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

در قسمت Description می توانید توضیحاتی مربوط به فیلد را وارد کنید.

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

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

سپس روی DONE کلیک نمایید.

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

آموزش افزونه Ninja Forms

اگر روی آیکون سطل آشغال کلیک کنید، فیلد حذف می شود و اگر روی تکرار کردن کلیک کنید، فیلد کپی می شود.

پس از اینکه تغییرات مورد نظر خود را وارد کرده و از تنظیمات راضی شدید، روی دکمه Publish کلیک کنید.

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

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

اگر نمی خواهید از یک قالب از پیش تعیین شده استفاده کنید و می خواهید قالب سفارشی خود را بسازید در صفحه حاوی انواع فرم ها روی Blank Form کلیک کنید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

آموزش افزونه Ninja Forms

برای اضافه کردن فیلدهای موردنظر خود کافی است روی گزینه های سمت راست صفحه کلیک کنید. پس از وارد کردن فیلدها روی دکمه DONE کلیک نمایید.

آموزش افزونه Ninja Forms

به این نکته توجه داشته باشید که پس از کلیک روی فیلدها ممکن است چیزی در صفحه ظاهر نشود. اما با کلیک بر روی دکمه DONE، فیلدهای اضافه شده نمایش داده خواهد شد.

در صورتی که بخواهید فیلدی به فیلدهای موجود اضافه کنید روی آیکون + در انتهای صفحه کلیک نمایید تا کشویی فیلدها ظاهر شود.

بعد از اعمال تغییرات و کامل کردن فرم می توانید بر روی Preview Changes کلیک کنید تا قبل از اینکه بازدیدکنندگان سایت بتوانند در فرانت اند سایت آن را مشاهده کنند، نگاهی به ظاهر فرم در سایت بیندازید.

برای ویرایش هریک از فیلدها روی آیکون چرخ دنده روبروی آن کلیک کنید تا صفحه ویرایش فیلد مشابه آنچه که در قسمت قبل توضیح داده شد، ظاهر شود.

هنگامی که فرم را برای ارائه در سایت آماده کردید روی دکمه Publish کلیک کنید.

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

در این قسمت از آموزش افزونه Ninja Forms نحوه اضافه کردن فرم ساخته شده به یک نوشته یا برگه را توضیح خواهیم داد. برای این کار سه روش وجود دارد.

روش 1: استفاده از بلوک Ninja Forms در ویرایشگر گوتنبرگ وردپرس

در ویرایشگر گوتنبرگ وردپرس یک بلوک جداگانه برای Ninja Forms طراحی و اعمال شده است.

یک برگه یا نوشته جدید ایجاد کرده یا یکی از برگه ها یا نوشته های قدیمی را در حالت ویرایش باز کنید. روی آیکون اضافه کردن بلوک کلیک کرده و از میان بلوک های عرضه شده روی بلوک Ninja Forms کلیک نمایید.

آموزش افزونه Ninja Forms

صفحه ای مشابه شکل زیر باز می شود. با کلیک بر روی قسمت Select a Form ، لیستی از فرم های ایجاد شده در افزونه Ninja نمایش داده می شود.

آموزش افزونه Ninja Forms

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

در ویرایشگر کلاسیک وردپرس بعد از باز کردن نوشته یا برگه مورد نظر خود مشاهده می کنید که در نوار ابزار بالای صفحه دکمه جدیدی به نام “Add Form” اضافه شده است.

آموزش افزونه Ninja Forms

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

آموزش افزونه Ninja Forms

روش 2: استفاده از شورت کد

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

آموزش افزونه Ninja Forms

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

آموزش افزونه Ninja Forms

در ویرایشگر گوتنبرگ می توانید این کار را با اضافه کردن بلوک کد کوتاه انجام دهید.

آموزش افزونه Ninja Forms

روش 3: ضمیمه کردن فرم

در این قسمت از آموزش افزونه Ninja Forms به توضیح روش سومی برای اضافه کردن فرم در یک صفحه می پردازیم که برای هر دو ویرایشگر تقریباً یکسان است.

در هر دو ویرایشگر کلاسیک و ویرایشگر گوتنبرگ وردپرس در سایدبار سمت چپ نوشته یا برگه موردنظر، گزینه ای به نام “Append a Ninja Form” وجود دارد. از پنجره کشویی این قسمت فرم موردنظر خود را انتخاب کنید تا در انتهای نوشته یا برگه اضافه شود.

آموزش افزونه Ninja Forms

آموزش تنظیمات افزونه Ninja Forms

آموزش افزونه Ninja Forms بدون توضیحی در مورد زیرمنوی Setting این افزونه کامل نمی شود.

در منوی Ninja Forms پیشخوان وردپرس روی زیرمنوی Setting کلیک کنید.

آموزش افزونه Ninja Forms
  • General Setting : در این قسمت می توانید فرمت تاریخ و واحد پول رایج را انتخاب کنید.
  • reCAPTCHA Setting : در این قسمت با کلیک بر روی لینک داده شده ابتدا کلید API را دریافت کرده سپس با وارد کردن کلیدهای داده شده CAPTCHA را در فرم خود اعمال کنید.
  • Advanced Setting : در این قسمت می توانید تنظیمات پیشرفته افزونه را اعمال کنید.
  • Saved Fields : در این قسمت می توانید فیلدهای ذخیره شده را پاک کنید.

امیدواریم از این آموزش بهره لازم را برده باشید.

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

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

درباره ی مینا قدسی

مطلب پیشنهادی

اضافه کردن جستجوی گوگل به وردپرس با WP Google Search و به صورت دستی

اضافه کردن جستجوی گوگل به وردپرس با WP Google Search و بدون افزونه

یکی از خدماتی که گوگل به کاربران خود ارائه کرده است، استفاده از موتور جستجوی …

۱۳ دیدگاه

  1. با سلام من تیتجا فرم را ساختم سوالم اینه که زمانی که کاربر ایمیلی رو ارسال میکته من از کجا میتوانم ان را مشاهذه کنم با تشکر

    • بصورت پیشفرض بعد از دریافت فرمی از Ninja Forms برای ایمیل مدیریت وردپرس که از منوی تنظیمات >> عمومی قابل مشاهده و تغییر است، از دریافت فرم ها مطلع می شوید که می توانید از طریق پنل مدیریتی Ninja Forms گزینه Dashboard فرم های ساخته شده را مشاهده می نمائید که با کلیک روی Contact Me فرم مورد نظر و از طریق تب منو Email & Actions اقدام به تغییر یا اضافه نمودن ایمیلی دیگر برای دریافت فرم ها بنمائید…

  2. سلام برای ساختن فرمهای تو در تو و چند صفحه ای چجوری باید عمل کرد؟
    ممنون

    • در افزونه Ninja Forms شما باید افزودنی (افزونه) Multi-Part Forms رو به نینجا فرم اضافه کنید تا قابلیت ساخت فرم های چند صفحه ای به قابلیت های آن اضافه شود…

      • جناب ویسی من تازه کار هستم‍‍‍‍ و بفرمایید چجوری این افزونه را باید به نینجا اضافه کنم؟ ممنون

        • کافیه افزونه Multi-Part Forms رو بصورت اورجینال پیدا کنید و از طریق منوی افزونه ها >> افزودن اقدام به نصب آن نمائید…

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

  4. سارا احمدی

    میشه به دکمه ارسال فرم نینجا URL دلخواه بدهیم ؟

    • بله، این کار قابل انجام است که کاربر بعد از ثبت فرم به صفحه دلخواه هدایت شود، برای این موضوع باید از Redirect Action استفاده کنید که از مسیر تب Emails & Action دکمه + را بزنید و سپس Redirect را انتخاب نمائید…

  5. باسلام، آیا افزونه فوق امکان نمایش پاسخ ها در همان صفحه را دارد؟
    چون دنبال یک جایگذین برای wp user fronted هستم

    • افزونه Ninja Forms یک افزونه ی فرم ساز هستش، شما بهتره از افزونه های مدیریت دیدگاه استفاده کنید، کارایی بیشتری برای شما دارد…

  6. سلام
    میشه روی دکمه submit یک لینک به یکی از برگه های سایت رو گذاشت؟

    • بله، در افزونه Ninja Forms قابلیتی وجود دارد که کاربر بعد از ثبت فرم اتوماتیک به صفحه دیگری Redirect شود، برای این امکان می توانید از بخش Emails & Actions قسمت Redirec رافعال و تنظیمات مربوطه ی مورد نظر خود را اعمال بفرمائید…

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *