ایجاد فرم های حرفه ای در وردپرس با افزونه Ninja Forms

درود بر شما همراهان همیشگی وب پرداز،

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

معرفی افزونه Ninja Forms

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

با این حال برخی امکانات نیز وجود دارد که باید برای فعال سازی آنها مبلغی را پرداخت کنید. مثل اطلاعیه sms و …

مرحله ۱: دانلود نصب افزونه Ninja Forms

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

سپس آن را بر روی سایت وردپرسی خود نصب نمایید. مقاله روبرو میتواند به شما در این امر کمک کند: “آموزش نصب افزونه در وردپرس”

مرحله ۲: ساخت فرم جدید در افزونه Ninja Forms

پس از نصب و فعالسازی افزونه، در پنل مدیریت وردپرسی خود به مسیر Ninja Forms >> Dashboard و یا Ninja Forms >> Add New بروید.

در این صفحه شما باید نوع فرم خود را انتخاب نمایید. برای مثال اگر قصد ساخت فرم تماس با ما را دارید میتوانید با انتخاب Contact Us آن را ایجاد کنید.

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

ما در این اینجا برای آموزش یک فرم تماس با ما ایجاد میکنیم و گزینه Contact Us را انتخاب میکنیم.

مرحله ۳: تنظیم و فارسی سازی فرم

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

همانطور که میبینید چون ما فرم تماس با را انتخاب کرده بودیم چند قسمت را بصورت خودکار برای ما ایجاد کرده است. تنها کاری که لازم است انجام  دهیم این است که این قسمت ها را فارسی کنیم.

برای مثال برای فارسی سازی قسمت Name بر روی آن کلیک کنید.

سپس در قسمت Label مقدار Name را برای مثال به نام و نام خانوادگی تغییر دهید و بر روی دکمه Done کلیک کنید. برای سایر قسمت ها نیز، ترجمه مشابه را انجام دهید.

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

همانطور که مشاهده میکنید قسمت های متخلفی مثل Address(آدرس)، Date(تاریخ) و… وجود دارد. برای افزونه آپشن مورد نظر کافیست بر روی آن کلیک کنید و سپس بر روی دکمه Done کلیک نمایید.

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

در قدم بعد، در قسمت بالای صفحه، بر روی Email & Actions کلیک کنید. این قسمت مربوط به ایمیل هایی میباشد که برای کاربران ارسال میشود.

این قسمت نیز به ترجمه نیاز دارد. برای مثال اگر بر روی Email Notification کلیک کنید.

قسمت هایی وجود دارد که بایستی ترجمه شوند. دقت نمایید که عبارات بین {} را تغییر ندهید. مثال ترجمه:

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

و اما در پایان بر روی Advanced در قسمت بالای صفحه کلیک کنید.

اخرین قسمتی که به ترجمه نیاز دارد، پیام هایی میباشد که برای کاربران نمایش داده میشوند. برای ترجمه این پیام ها بر روی Display Settings کلیک کنید.

در قسمت FORM TITLE میتوایند عنوان فرم را تعیین کنید. که ما در اینجا عنوان “تماس با ما” را قرار میدهیم.

سپس در همین بخش بر روی قسمت Advanced کلیک کنید.

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

فراموش نکنید پس از اعمال تغییرات بر روی دکمه Done کلیک کنید.

مرحله ۴: از فرم خود استفاده کنید !

در آخرین محله کافیست با کلیک بر روی دکمه PUBLISH در سمت چپ، بالای همین صفحه فرم خود را ایجاد نمایید. سپس به پنل مدیریت خود در مسیر Ninja Forms >> Dashboard برگردید.

شرتکد (shortcode) فرمی که ساخته اید را کپی کنید. میتوانید با قرار دادن این کد در مطالب و صفحات خود فرم ساخته شده را نمایش دهید.

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

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

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

موفق و پیروز باشید.

امتیازدهی به این مطلب
[کل: 2 میانگین: 5]

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

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

20 − سه =