خرید گوشی اورجینال تصویر بنر
افزونه ها

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

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

وردپرس تم | آموزش افزونه 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

در این صفحه می توانید لیست فرم های ایجاد شده توسط این افزونه و شورت کد آنها را مشاهده کنید. همانطور که در تصویر بالا مشاهده می کنید، افزونه 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 علاوه بر اینکه اجازه ویرایش فیلدهای فرم را به شما می دهد، امکان سفارشی سازی ایمیل ها را نیز می دهد. در بخش بعدی آموزش به این مهم می پردازیم.

مدیریت ایمیل ها در افزونه Ninja Forms

هر فرم نینجا دارای یک بخش اقدامات و اعلان های پیش فرض ایمیل است که باید آن را راه اندازی کنید. برای این کار روی تب Emails & Actions در بالای سازنده فرم کلیک کنید.

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

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

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

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

اگر می خواهید اقدام شما ایجاد یک ایمیل جدید باشد، روی پنجره Email کلیک کنید.

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

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

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

Action Name: نامی که در این قسمت وارد می کنید در لیست اقدام ها نمایش داده می شود.

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

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

Email Message: بدنه ایمیل خود را در این قسمت ایجاد کنید. اگر محتوایی در این قسمت قرار ندهید، یک پیام ایمیل خالی به گیرنده می رسد. برای افزودن همه فیلدهای فرم به پیام ایمیل، صرف نظر از اینکه کاربر اطلاعاتی را در آن قسمت وارد کرده باشد یا خیر، روی آیکون وارد کردن تگ ها کلیک کنید، روی تب Forms در سمت چپ کلیک کرده و All Fields Table را انتخاب کنید. برای اینکه فقط فیلدهایی که حاوی داده هستند به پیام ایمیل اضافه شوند، روی تب Forms در سمت چپ کلیک کرده و Fields Table را انتخاب کنید.

پس از اینکه از تغییرات مورد نظر خود رضایت کامل به دست آوردید، روی دکمه 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
صفحه افزونه Ninja Forms

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

هیچ کالایی را بدون تخفیف نخرید تصویر بنر

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

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

دکمه بازگشت به بالا