آموزش افزونه 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
برای ایجاد یک فرم جدید روی دکمه Add New کلیک کنید. یا در منوی Ninja Forms پیشخوان وردپرس روی زیرمنوی Add New کلیک کنید. صفحه ای مشابه شکل زیر نشان داده خواهد شد.
در این صفحه می توانید از بین قالب های فرم ارائه شده، نوعی که می خواهید ایجاد کنید را انتخاب نمایید.
مثلاً اگر می خواهید یک فرم تماس با ما ایجاد کنید کافی است روی Contact Us کلیک کنید. فرم از پیش ساخته شده که حاوی فیلدهای نام، ایمیل، پیام و دکمه ارسال می باشد به صورت زیر نشان داده می شود.
برای ویرایش و تغییر دادن لیبل یا موقعیت فیلدها، روی فیلد موردنظر کلیک کنید. صفحه ویرایش فیلد به شکل زیر برای شما نشان داده می شود.
- در صفحه باز شده در قسمت LABEL برچسب مورد نظر را اعمال کنید. در این قسمت می توانید فیلدها را فارسی سازی نمایید. به عنوان مثال Name را به نام تغییر دهید.
- در صورتی که پر کردن فیلد برای کاربر اجباری باشد، گزینه REQUIRED FIELD را فعال کنید.
- حال روی Display کلیک کنید تا پنجره کشویی مربوط به آن باز شود.
- در قسمت Default Value می توانید روی آیکون موجود در این بخش کلیک کرده و یک تگ را انتخاب کنید تا به صورت پیش فرض در این فیلد قرار بگیرد.
- در قسمت Placeholder می توانید متنی که می خواهید قبل از اینکه کاربر اطلاعاتی وارد کند، در فیلد نمایش داده شود را وارد کنید. به محض کلیک کردن کاربر این اطلاعات پاک می شود.
- در قسمت Description می توانید توضیحاتی مربوط به فیلد را وارد کنید.
- در کنار دکمه Publish آیکونی به شکل لینک وجود دارد که با استفاده از آن می توانید به لینک فرم دسترسی داشته باشید. اگر نمی خواهید فرم را در یک نوشته یا برگه در سایت خود قرار دهید و ترجیح می دهید کاربران با استفاده از یک لینک به آن دسترسی داشته باشند. می توانید با کلیک روی آیکون لینک در کنار دکمه Publish این کار را انجام دهید.
اگر می خواهید تمام تنظیمات فیلدها را برای استفاده های بعدی ذخیره کنید کافی است روی آیکون “ستاره” در گوشه بالا سمت راست کلیک کنید. با انجام این کار یک کپی از فیلد شما ساخته شده و در قسمت اضافه کردن فیلدها برای استفاده های بعدی نشان داده می شود.
سپس روی DONE کلیک نمایید.
برای ویرایش فیلدها می توانید روی آیکون آبی رنگ تنظیمات در سمت چپ فیلد نیز کلیک کنید. با قرار دادن موس بر روی آیکون مربوطه دو گزینه دیگر ظاهر می شود که مربوط به پاک کردن فیلد و تکرار آن است.
اگر روی آیکون سطل آشغال کلیک کنید، فیلد حذف می شود و اگر روی تکرار کردن کلیک کنید، فیلد کپی می شود.
پس از اینکه تغییرات مورد نظر خود را وارد کرده و از تنظیمات راضی شدید، روی دکمه Publish کلیک کنید.
در ادامه آموزش افزونه Ninja Forms به شما نشان خواهیم داد که چگونه بدون استفاده از قالب از پیش تعریف شده یک فرم تماس با ما بسازید.
ساخت فرم تماس بدون استفاده از قالب پیش ساخته
اگر نمی خواهید از یک قالب از پیش تعیین شده استفاده کنید و می خواهید قالب سفارشی خود را بسازید در صفحه حاوی انواع فرم ها روی Blank Form کلیک کنید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.
برای اضافه کردن فیلدهای موردنظر خود کافی است روی گزینه های سمت راست صفحه کلیک کنید. پس از وارد کردن فیلدها روی دکمه DONE کلیک نمایید.
به این نکته توجه داشته باشید که پس از کلیک روی فیلدها ممکن است چیزی در صفحه ظاهر نشود. اما با کلیک بر روی دکمه DONE، فیلدهای اضافه شده نمایش داده خواهد شد.
در صورتی که بخواهید فیلدی به فیلدهای موجود اضافه کنید روی آیکون + در انتهای صفحه کلیک نمایید تا کشویی فیلدها ظاهر شود.
بعد از اعمال تغییرات و کامل کردن فرم می توانید بر روی Preview Changes کلیک کنید تا قبل از اینکه بازدیدکنندگان سایت بتوانند در فرانت اند سایت آن را مشاهده کنند، نگاهی به ظاهر فرم در سایت بیندازید.
برای ویرایش هریک از فیلدها روی آیکون چرخ دنده روبروی آن کلیک کنید تا صفحه ویرایش فیلد مشابه آنچه که در قسمت قبل توضیح داده شد، ظاهر شود.
هنگامی که فرم را برای ارائه در سایت آماده کردید روی دکمه Publish کلیک کنید.
افزونه Ninja Forms علاوه بر اینکه اجازه ویرایش فیلدهای فرم را به شما می دهد، امکان سفارشی سازی ایمیل ها را نیز می دهد. در بخش بعدی آموزش به این مهم می پردازیم.
مدیریت ایمیل ها در افزونه Ninja Forms
هر فرم نینجا دارای یک بخش اقدامات و اعلان های پیش فرض ایمیل است که باید آن را راه اندازی کنید. برای این کار روی تب Emails & Actions در بالای سازنده فرم کلیک کنید.
چهار اقدام پیش فرض در این صفحه قرار داده شده است که با فعال باقی نگه داشتن آنها می توانید از آنها استفاده کنید. همچنین می توانید یک اقدام جدید بسازید.
برای ساخت اقدام جدید، روی آیکون آبی رنگ + در پایین صفحه کلیک کنید.
اگر می خواهید اقدام شما ایجاد یک ایمیل جدید باشد، روی پنجره Email کلیک کنید.
صفحه ای مشابه شکل زیر نمایش داده می شود.
Action Name: نامی که در این قسمت وارد می کنید در لیست اقدام ها نمایش داده می شود.
To: آدرس ایمیلی که این اقدام به آن ارسال خواهد کرد. شما می توانید به صورت دستی یک آدرس ایمیل تایپ کنید یا از آیکون موجود در این قسمت برای افزودن فیلدی از فرم (مانند ایمیل کاربران) برای ارسال پیام به آن استفاده کنید. آدرس های ایمیل اضافی را می توان با جدا کننده ویرگول اضافه کرد.
Reply To: این فیلد اگر خالی گذاشته شود، از آدرس ایمیلی که در قسمت داشبورد> عمومی> تنظیمات وجود دارد، برای آن استفاده می شود.
Email Message: بدنه ایمیل خود را در این قسمت ایجاد کنید. اگر محتوایی در این قسمت قرار ندهید، یک پیام ایمیل خالی به گیرنده می رسد. برای افزودن همه فیلدهای فرم به پیام ایمیل، صرف نظر از اینکه کاربر اطلاعاتی را در آن قسمت وارد کرده باشد یا خیر، روی آیکون وارد کردن تگ ها کلیک کنید، روی تب Forms در سمت چپ کلیک کرده و All Fields Table را انتخاب کنید. برای اینکه فقط فیلدهایی که حاوی داده هستند به پیام ایمیل اضافه شوند، روی تب Forms در سمت چپ کلیک کرده و Fields Table را انتخاب کنید.
پس از اینکه از تغییرات مورد نظر خود رضایت کامل به دست آوردید، روی دکمه Publish کلیک کنید.
اضافه کردن فرم به یک نوشته یا برگه
در این قسمت از آموزش افزونه Ninja Forms نحوه اضافه کردن فرم ساخته شده به یک نوشته یا برگه را توضیح خواهیم داد. برای این کار سه روش وجود دارد.
روش 1: استفاده از بلوک Ninja Forms در ویرایشگر گوتنبرگ وردپرس
در ویرایشگر گوتنبرگ وردپرس یک بلوک جداگانه برای Ninja Forms طراحی و اعمال شده است.
یک برگه یا نوشته جدید ایجاد کرده یا یکی از برگه ها یا نوشته های قدیمی را در حالت ویرایش باز کنید. روی آیکون اضافه کردن بلوک کلیک کرده و از میان بلوک های عرضه شده روی بلوک Ninja Forms کلیک نمایید.
صفحه ای مشابه شکل زیر باز می شود. با کلیک بر روی قسمت Select a Form ، لیستی از فرم های ایجاد شده در افزونه Ninja نمایش داده می شود.
با انتخاب کردن فرم مورد نظر خود بلوک رفرش و فرم ساخته شده بر روی صفحه ظاهر می شود. سپس بر روی دکمه انتشار یا بروزرسانی کلیک کنید.
در ویرایشگر کلاسیک وردپرس بعد از باز کردن نوشته یا برگه مورد نظر خود مشاهده می کنید که در نوار ابزار بالای صفحه دکمه جدیدی به نام “Add Form” اضافه شده است.
با کلیک بر روی این دکمه یک پنجره پاپ آپ مشابه شکل زیر برای شما باز می شود که در پنجره کشویی آن می توانید فرم موردنظر خود را انتخاب کنید.
روش 2: استفاده از شورت کد
در پیشخوان افزونه Ninja Forms لیستی از فرم هایی که ایجاد کرده اید، نشان داده شده است. در مقابل هر فرم شورت کد یکتای مربوط به آن درج شده است.
شورت کد فرم مورد نظر خود را کپی کرده و در ویرایشگر کلاسیک وردپرس در نوشته یا برگه موردنظر خود پیست کنید.
در ویرایشگر گوتنبرگ می توانید این کار را با اضافه کردن بلوک کد کوتاه انجام دهید.
روش 3: ضمیمه کردن فرم
در این قسمت از آموزش افزونه Ninja Forms به توضیح روش سومی برای اضافه کردن فرم در یک صفحه می پردازیم که برای هر دو ویرایشگر تقریباً یکسان است.
در هر دو ویرایشگر کلاسیک و ویرایشگر گوتنبرگ وردپرس در سایدبار سمت چپ نوشته یا برگه موردنظر، گزینه ای به نام “Append a Ninja Form” وجود دارد. از پنجره کشویی این قسمت فرم موردنظر خود را انتخاب کنید تا در انتهای نوشته یا برگه اضافه شود.
آموزش تنظیمات افزونه Ninja Forms
آموزش افزونه Ninja Forms بدون توضیحی در مورد زیرمنوی Setting این افزونه کامل نمی شود.
در منوی Ninja Forms پیشخوان وردپرس روی زیرمنوی Setting کلیک کنید.
- General Setting : در این قسمت می توانید فرمت تاریخ و واحد پول رایج را انتخاب کنید.
- reCAPTCHA Setting : در این قسمت با کلیک بر روی لینک داده شده ابتدا کلید API را دریافت کرده سپس با وارد کردن کلیدهای داده شده CAPTCHA را در فرم خود اعمال کنید.
- Advanced Setting : در این قسمت می توانید تنظیمات پیشرفته افزونه را اعمال کنید.
- Saved Fields : در این قسمت می توانید فیلدهای ذخیره شده را پاک کنید.
جمع بندی
افزونه Ninja Forms برای تمام سطوح کاربران وردپرس مناسب است. چه اولین وبلاگ خود را راه اندازی کنید، چه محصول یا خدمت خود را بصورت آنلاین بفروشید، چه در حال طراحی و چه در حال توسعه سایت خود باشید، می توانید از این افزونه استفاده کنید. این افزونه به شما کمک می کند فرم های سفارشی مورد نیاز خود را با سازنده فرم کشیدن و رها کردن آن مانند یک حرفه ای ایجاد کنید.
امیدواریم از این آموزش بهره لازم را برده باشید.
دانلود افزونه
با سلام من تیتجا فرم را ساختم سوالم اینه که زمانی که کاربر ایمیلی رو ارسال میکته من از کجا میتوانم ان را مشاهذه کنم با تشکر
بصورت پیشفرض بعد از دریافت فرمی از Ninja Forms برای ایمیل مدیریت وردپرس که از منوی تنظیمات >> عمومی قابل مشاهده و تغییر است، از دریافت فرم ها مطلع می شوید که می توانید از طریق پنل مدیریتی Ninja Forms گزینه Dashboard فرم های ساخته شده را مشاهده می نمائید که با کلیک روی Contact Me فرم مورد نظر و از طریق تب منو Email & Actions اقدام به تغییر یا اضافه نمودن ایمیلی دیگر برای دریافت فرم ها بنمائید…
سلام برای ساختن فرمهای تو در تو و چند صفحه ای چجوری باید عمل کرد؟
ممنون
در افزونه Ninja Forms شما باید افزودنی (افزونه) Multi-Part Forms رو به نینجا فرم اضافه کنید تا قابلیت ساخت فرم های چند صفحه ای به قابلیت های آن اضافه شود…
جناب ویسی من تازه کار هستم و بفرمایید چجوری این افزونه را باید به نینجا اضافه کنم؟ ممنون
کافیه افزونه Multi-Part Forms رو بصورت اورجینال پیدا کنید و از طریق منوی افزونه ها >> افزودن اقدام به نصب آن نمائید…
من افزونه را موفق شدم نصب کنم و در لیست افزونه ها قرار گرفته اما موقع ساخت فرم ها دیده نمیشه تا ارش استفاده کنم، لطفا راهنمایی بفرمایید
میشه به دکمه ارسال فرم نینجا URL دلخواه بدهیم ؟
بله، این کار قابل انجام است که کاربر بعد از ثبت فرم به صفحه دلخواه هدایت شود، برای این موضوع باید از Redirect Action استفاده کنید که از مسیر تب Emails & Action دکمه + را بزنید و سپس Redirect را انتخاب نمائید…
باسلام، آیا افزونه فوق امکان نمایش پاسخ ها در همان صفحه را دارد؟
چون دنبال یک جایگذین برای wp user fronted هستم
افزونه Ninja Forms یک افزونه ی فرم ساز هستش، شما بهتره از افزونه های مدیریت دیدگاه استفاده کنید، کارایی بیشتری برای شما دارد…
سلام
میشه روی دکمه submit یک لینک به یکی از برگه های سایت رو گذاشت؟
بله، در افزونه Ninja Forms قابلیتی وجود دارد که کاربر بعد از ثبت فرم اتوماتیک به صفحه دیگری Redirect شود، برای این امکان می توانید از بخش Emails & Actions قسمت Redirec رافعال و تنظیمات مربوطه ی مورد نظر خود را اعمال بفرمائید…
سلام . چجوری یک ایمیل دوم را مثل افزونه contect form 7 پیوست کنم ؟ (به نحوی که موقع ارسال پیام کاربر از فرم ، برای ایمیل کاربری پیامی ارسال شود . (با ایمیل noreply))
سلام محسن عزیز، وقت بخیر. آموزش رو آپدیت کردم و قسمت ایمیل رو در اون آوردم. امیدوارم پاسخگوی نیاز شما باشه
سلام
من فرم ساختم
وقتی کسی فرم رو پر میکنه و میفرسته چظور میتونم در پیشخوان وردپرس نوتیفیکیشن دریافت کنم و اون فرم به ایمیلم ارسال بشه و بعد پاسخ رو بتونم به ایمیل ارسال کننده پاسخ بدم؟
سلام محمد عزیز وقت بخیر برای ارسال ایمیل به شما یا هرکس دیگه ای که می خواهید ایمیل فرم برای او ارسال بشه، طبق آموزش مقاله باید از یک اکشن جدید ایمیل بسازید.