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

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

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

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

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

• استفاده از پلاگین‌ها
• فرم‌های HTML سفارشی (بدون استفاده از پلاگین)
• استفاده از صفحه‌سازها
• ادغام با سرویس‌های «شخص ثالث» (Third-Party)

در ادامه این بخش در خصوص هر کدام از روش‌های ارائه شده در بالا توضیح داده خواهد شد.

بهترین افزونه برای ساخت فرم در وردپرس چیست؟

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

• لینک نصب پلاگین Gravity Forms: «+»
• لینک نصب پلاگین Contact Form 7: «+»
• لینک نصب پلاگین WPForms: «+»
• لینک نصب پلاگین Ninja Forms: «+»

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

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

ساخت فرم در وردپرس با استفاده از صفحه‌سازها

یکی دیگر از روش‌های موجود برای ساخت فرم در وردپرس استفاده از «صفحه‌سازها» (Page Builders) است. صفحه‌سازهای معروفی همچون Elementor  و Beaver Builder اغلب دارای ویجت‌های آماده‌‌ای برای ساخت فرم هستند. توسعه‌دهندگان می‌توانند از این ویجت‌های آماده برای ساخت فرم‌های سفارشی خود استفاده کنند.

ساخت فرم در وردپرس با ادغام سرویس‌های شخص ثالث

وردپرس به راحتی با سایر سرویس‌های شخص ثالث ادغام می‌شود و از این ویژگی برای ساخت فرم نیز می‌توان استفاده کرد. به عنوان مثال، می‌توان با استفاده از سرویس‌هایی همچون Google Forms یا TypeForm فرم مورد نظر را طراحی کرد و سپس، کد مربوط به آن را در وردپرس قرار داد. پیش‌تر در مطلب زیر از مجله فرادرس نحوه ساخت فرم تماس وب سایت با گوگل فرم آموزش داده شده است.

ساخت فرم در وردپرس بدون استفاده از پلاگین چه مزایایی دارد؟

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

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

• نگهداری آسان
• سفارشی‌سازی
• یادگیری بیشتر
• کاهش وابستگی
• انعطاف‌پذیری
• بهبود عملکرد

در ادامه هر کدام از دلایل ارائه شده در بالا به طور کامل توضیح داده خواهند شد.

سادگی

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

سفارشی‌سازی

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

یادگیری بیشتر

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

کاهش وابستگی

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

انعطاف‌پذیری

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

بهبود عملکرد

فرم‌های سفارشی ایجاد شده توسط کد در مقایسه با فرم‌های ایجاد شده با استفاده از پلاگین عملکرد و سرعت بهتری دارند، زیرا در مقایسه با پلاگین‌ها سبک‌تر هستند. فرم‌های سفارشی به این دلیل سبک هستند که تنها ویژگی‌های ضروری و مورد نیاز را دارند و سایر قابلیت‌های اضافی ارائه شده توسط پلاگین‌ها را ندارند.

چگونه با استفاده از وردپرس سایت طراحی کنیم؟

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

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

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

چگونه بدون استفاده از پلاگین در وردپرس فرم ایجاد کنیم؟

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

برای ساخت فرم در وردپرس بدون استفاده از پلاگین باید با مفاهیم پایه برنامه نویسی آشنایی داشته باشید. به منظور طراحی ظاهر فرم از زبان‌های HTML ،CSS و جاوااسکریپت استفاده خواهد شد. علاوه بر این، برای اجرای عملکردها نیز زبان محبوب PHP مورد استفاده قرار می‌گیرد. بنابراین، آشنایی اولیه با هر کدام از این زبان‌ها برای ساخت فرم در وردپرس ضروری است.

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

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

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

گام ۱: ایجاد برگه جدید

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

در بخش افزودن عنوان می‌توانید عنوان مربوط به برگه را وارد کنید.

گام ۲: پیدا کردن پوسته فعال بر روی سایت

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

با توجه به تصویر بالا مشاهده می‌کنید که پوسته «دو هزار و بیست و پنج»  (twentytwentyfive) در سایت فعال است.

گام ۳: دسترسی به فایل‌های پوسته فعال بر روی سایت

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

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

گام ۴: تغییر فایل function.php پوسته فعال در سایت

برای ایجاد فرم جدید یا انجام هر گونه تغییرات در پوسته سایت باید کدهای مورد نظر خود را در فایلfunction.php قرار دهید یا کدهای موجود در این فایل را ویرایش کنید. در نخستین گام باید یک «کد کوتاه» (shortcode) به این فایل اضافه کنید. کد کوتاه در وردپرس قابلیتی است که به توسعه‎‌دهندگان امکان می‌دهد تا کدهای مربوط به محتوای مورد نظر خود را در نوشته‌ها و برگه‌های وردپرسی قرار دهند. برای یادگیری بیشتر در خصوص ساخت قالب در وردپرس می‌توانید فیلم آموزش طراحی قالب وردپرسی سایت فیلم و سریال با معماری MVC فرادرس را مشاهده کنید که لینک آن در ادامه آورده شده است.

برای افزودن یک کد کوتاه جدید به پوسته سایت کافی است تا قطعه کد زیر را به انتهای فایلfunction.php اضافه کنید.

در قطعه کد بالا پارامتر اول نشان دهنده نام کد کوتاه است. همچنین، پارامتر دوم تابعی را مشخص می‌کند که توسط این کد کوتاه اجرا خواهد شد. در ادامه باید تابعfdContactForm را در فایلfunction.php پیاده‌سازی کنید. قطعه کد زیر پیاده‌سازی مربوط به این تابع را نشان می‌دهد.

در تابع ارائه شده در قطعه کد بالا فرم مورد نظر پیاده‌سازی شده است.

گام ۵: افزودن کد کوتاه به برگه وردپرس

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

بعد از انتخاب بلوک کد کوتاه باید همانند تصویر زیر عنوان مربوط به کد کوتاه را وارد کنید.

در نهایت بعد از انجام تغییرات بالا برگه مورد نظر را ذخیره کنید و جهت مشاهده فرم ایجاد شده بر روی گزینه نمایش برگه کلیک کنید.

گام ۶: افزودن کدهای css سفارشی به فرم

فرم اولیه ایجاد شده در بخش قبلی برای زیباتر شدن نیاز به اعمال برخی تغییرات دارد. برای طرح و رنگ دادن به عناصر نوشته شده در زبان HTML باید از کدهای CSS استفاده کنید. به منظور افزودن کدهای CSS به فرم مورد نظر در گام نخست باید افزونهSimple Custom CSS and JS را بر روی وردپرس خود نصب کنید که در تصویر زیر این افزونه نشان داده شده است.

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

سپس، یک عنوان دلخواه برای این بخش انتخاب و آن را منتشر کنید. بعد از ذخیره کدهای ارائه شده در بالا به سراغ فرم ساخته شده رفته و تغییرات را مشاهده کنید. تصویر زیر ظاهر جدید فرم ساخته شده را بعد از اضافه کردن کدهای CSS نشان می‌دهد.

گام ۷: ایجاد جدول در پایگاه داده وردپرس

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

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

با توجه به ورودی‌های فرم تماس ساخته شده فیلدهایname ،email ،message وsubmission_time برای جدول مشخص شده‌اند که به ترتیب به نام، ایمیل، پیام و زمان ارسال پیام اشاره دارند.

گام ۸: نوشتن کدهای مربوط به ذخیره اطلاعات در جدول

بعد از ایجاد جدول به منظور ذخیره اطلاعات در پایگاه داده باید تابع جدیدی در فایلfunction.php مربوط به پوسته فعال سایت پیاده‌سازی شود. برای این منظور با استفاده از متدadd_action تابع جدیدی را پیاده‌سازی خواهیم کرد که قطعه کد مربوط به آن در ادامه آورده شده است.

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

تابع بالا مقادیر وارد شده توسط کاربر از طریق فرم تماس را در جدولwp_contact_form_submission درج می‌کند. برای عملکرد صحیح این تابع به ۲ نکته زیر باید توجه کنید.

• نکته اول: در فرم پیاده‌سازی شده توسط تابعfdContactForm() حتماً از متد Post استفاده کنید. برای این منظور باید مشخصهmethod=”post” در تگ مربوط به فرم قرار گیرد.
• نکته دوم: باید یک input مخفی با مشخصهname=”action” در فرم ساخته شده وجود داشته باشد. برای این منظور قطعه کد زیر در فرم تماس قرار داده شده است.

گام ۹: بررسی اطلاعات ذخیره شده در پایگاه داده

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

برای بررسی درج اطلاعات در فرم از طریق phpmyadmin جدولwp_contact_form_submission را باز کنید. در صورت انجام صحیح تمام موارد ذکر شده در بالا مقادیر زیر در جدول قابل مشاهده خواهند بود.

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

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

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

• بررسی پایگاه داده
• چک کردن خطاها
• بررسی فرایند ارسال اطلاعات از طریق فرم
• بررسی نام جدول در پایگاه داده
• پاک کردن کش سرور
• بررسی مجوزها

در ادامه هر کدام از موارد ارائه شده در بالا به طور کامل توضیح داده خواهند شد.

بررسی پایگاه داده

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

چک کردن خطاها

چک کردن خطاهای PHP یکی دیگر از مواردی است که باید در نظر داشته باشید. با فعال کردن گزارش خطاهای PHP می‌توانید بروز خطا در ارسال یا نمایش داده‌های فرم را بررسی کنید. بررسی خطاها به شما کمک می‌کند تا اشتباه‌های خود در کد نویسی را اصلاح کنید.

بررسی فرایند ارسال اطلاعات از طریق فرم

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

بررسی نام جدول در پایگاه داده

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

پاک کردن کش سرور

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

بررسی مجوزها

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

چگونه با استفاده از افزونه در وردپرس فرم ایجاد کنیم؟

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

• افزونه Gravity Forms
• افزونه WPForms
• افزونه Ninja Forms
• افزونه Contact Form 7

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

اگر قصد حضور فعال در حوزه طراحی سایت با وردپرس را دارید، حتماً به زبان‌های برنامه نویسی وب همچون HTML ،CSS، جاوا اسکریپت و PHP توجه ویژه‌ای داشته باشید. برای یادگیری بیشتر در خصوص این زبان‌ها می‌توانید از فیلم‌های آموزشی موجود در مجموعه آموزش‌های طراحی و برنامه‌نویسی سایت فرادرس استفاده کنید که لینک آن در ادامه آورده شده است.

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

Gravity Forms یک افزونه قدرتمند در وردپرس است که به منظور طراحی و پیاده‌سازی فرم‌های سفارشی مورد استفاده قرار می‌گیرد. طراحان سایت با استفاده از این افزونه به سادگی می‌توانند فرم‌های مختلفی همچون فرم تماس، ثبت‌نام، پرداخت، نظرسنجی و سایر موارد را بدون دانش کد نویسی پیاده‌سازی کنند.

از جمله مهم‌ترین ویژگی‌های Gravity Forms به موارد زیر می‌توان اشاره کرد.

• منطق شرطی
• امکان آپلود فایل
• ارسال خودکار ایمیل
• فرم‌های چند صفحه
• ادغام با سایر ابزارها

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

• لینک دانلود افزونه Gravity Forms: «+»

گام ۱: نصب افزونه Gravity Forms

در نخستین گام برای شروع کار با این افزونه باید آن را نصب کنید. برای این منظور از بخش افزونه‌ها باید افزونه‌ «گراویتی فرم» را نصب کنید. برای پشتیبانی از زبان فارسی می‌توانید افزونه «گرویتی فرم فارسی» را نصب کنید که در تصویر زیر مشخصات این دو افزونه آورده شده است.

نصب افزونه دوم صرفاً برای فارسی‌سازی Gravity Forms صورت می‌گیرد.

گام ۲: ایجاد فرم جدید با Gravity Forms

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

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

گام ۳: انتخاب عنوان و توضیحات فرم

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

بعد از تعیین عنوان و توضیحات مناسب برای فرم باید بر روی گزینه ایجاد فرم خالی کلیک کنید.

گام ۴: اضافه کردن فیلدهای فرم

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

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

گام ۵: اضافه کردن فرم ساخته شده به برگه

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

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

گام ۶: دسترسی به اطلاعات فرم

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

یادگیری وردپرس با فرادرس

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

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

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

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

جمع‌بندی

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