ساختن فرم‌های سفارشی با استفاده از افزونه Gravity Forms کاملاً ساده است، اما اگر به دنبال بهبود استایل فرم‌های خود هستید، ممکن است متوجه شوید که این افزونه گزینه‌های سفارشی‌سازی محدودی را ارائه می‌دهد. در این مطلب از سری مطالب آموزشی وبلاگ پارس وی دی اس به نحوه استایل کردن فرم های گراویتی فرم وردپرس بدون کدنویسی می‌پردازیم.
Gravity Forms یکی از محبوب‌ترین افزونه‌های فرم تماس برای وردپرس است که به شما امکان می‌دهد فرم‌های تماس حرفه‌ای برای وب‌سایت خود ایجاد کنید. درحالی‌که سبک‌های پیش‌فرض به طور یکپارچه با موضوع وردپرس انتخابی شما ادغام می‌شوند، ممکن است همیشه کافی نباشند.
وقتی می‌خواهید فرم را متناسب با زیبایی وب‌سایت خودتنظیم کنید، چه می‌کنید؟ یا زمانی که می‌خواهید دکمه‌های طراحی شده سفارشی داشته باشید که فرم را تعاملی‌تر می‌کند؟
این جایی است که پلاگین‌های شخص ثالث وارد عمل می‌شوند. با استفاده از این افزونه‌ها در صفحه‌ساز المنتور خود، می‌توانید فرم‌های تماس خود را بدون نیاز به کدنویسی طراحی و تغییر دهید.
چرا باید به فرم‌های ثبت‌نام مدل دهید؟
با معرفی اخیر ویژگی‌هایی که به شما امکان می‌دهد فرم‌های تماس خود را سفارشی کنید (مانند قالب فرم Orbital Gravity Forms ) این افزونه کار بسیار خوبی برای تطبیق با قالبهای فعلی وردپرس شما انجام می‌دهد.
این بدان معناست که فرم‌های شما می‌توانند به‌راحتی با موضوع و سبک کلی وب‌سایت شما ترکیب شوند. بااین‌حال، ممکن است بخواهید طراحی را حتی بیشتر ارتقا دهید تا با برند خود مطابقت داشته باشد و تجربه کاربری را بهبود بخشد.
در اینجا چند دلیل برای درنظرگرفتن استایل کردن Gravity Forms خود با المنتور آورده شده است:
از همسویی برند اطمینان حاصل کنید یک فرم خوب طراحی شده که با عناصر برندسازی شما همسو باشد، ظاهری منسجم به وب‌سایت شما می‌دهد. نه‌تنها حرفه‌ای به نظر می‌رسد؛ بلکه هویت برند را برای کاربران تقویت می‌کند و وب‌سایت شما را به یاد ماندنی‌تر می‌کند.
افزایش تبدیل طرح‌های ساده و درعین‌حال جذاب فرم تماس که به‌راحتی قابل‌درک هستند، می‌توانند کاربران را تشویق به تکمیل فرم کنند و در نتیجه نرخ تبدیل را افزایش دهند. ایجاد فرم‌های مختصر با فیلدهای محدود می‌تواند تعامل بازدیدکنندگان را آسان‌تر کند، درحالی‌که بهینه‌سازی فراخوان‌ها برای اقدام (CTA) دید را تضمین می‌کند.
باتوجه‌به محدودیت‌هایی که در استایل و سفارشی‌سازی در Gravity Forms وجود دارد، می‌توانید از ویجت Gravity Forms Styler از The Plus Addons for Elementor استفاده کنید. این ویجت به شما این امکان را می‌دهد که بدون دانش کدنویسی فرم خود را طراحی کنید.
این ویجت رایگان با پذیرش فلسفه “طراحی به‌گونه‌ای که می‌خواهید” گزینه‌های سفارشی‌سازی متنوعی را ارائه می‌دهد و ایجاد فرم نامحدود را با یک راه‌اندازی سریع امکان‌پذیر می‌کند.
![Gravity form style 1 how to style gravity forms in wordpress [without coding] from the plus addons for elementor](https://parsvds.com/wiki/wp-content/uploads/2024/12/Gravity-Form-Style-1.webp)
نمونه‌ای از فرم گرانشی سفارشی در اینجا نمونه‌ای از Gravity Form است که با استفاده از ویجت Gravity Forms Styler سفارشی‌سازی شده است. با استفاده از این ابزارها، می‌توانید به‌راحتی فرم‌هایی ایجاد کنید که نه‌تنها به هدف خود عمل می‌کنند، بلکه به زیبایی با طراحی کلی وب‌سایت شما همخوانی دارند.
چگونه به فرم‌های ثبت‌نام مدل دهیم؟
اکنون، بیایید روند گام‌به‌گام استایل و سفارشی‌سازی فرم‌های ثبت نام (Gravity) در المنتور را با استفاده از ویجت Gravity Forms Styler از The Plus Addons for Elementor درک کنیم.
اما ابتدا، بیایید افزونه‌های موردنیاز وردپرس را که برای نصب و فعال‌سازی نیاز دارید، ببینیم.
پیش‌نیازها:
- پلاگین صفحه‌ساز رایگان المنتور
- افزونه Gravity Forms
- افزونه‌های پلاس برای المنت
- ویجت Gravity Forms Styler باید فعال باشد
مرحله ۱: با استفاده از افزونه Gravity Forms یک فرم تماس ایجاد کنید:
اولین گام این است که یک فرم تماس جدید ایجاد کنید اگر قبلاً آن را ایجاد نکرده‌اید. برای انجام این کار، به Forms > Add New بروید و بر اساس اطلاعاتی که می‌خواهید جمع‌آوری کنید، فیلدهای فرم مختلف را اضافه کنید.
روی Update کلیک کنید.
![Create a contact form using the gravity forms plugin how to style gravity forms in wordpress [without coding] from the plus addons for elementor](https://parsvds.com/wiki/wp-content/uploads/2024/12/Create-a-contact-form-using-the-Gravity-Forms-plugin.webp)
مرحله ۲: ویجت Gravity Form Styler را فعال کرده و از آن استفاده کنید:
اکنون ویجت Gravity Forms Styler را در المنتور فعال کنید. به Plus Settings > Plus Widgets بروید. ویجت را جستجو کنید و روی ذخیره کلیک کنید.
![Activate and use the gravity form styler widget how to style gravity forms in wordpress [without coding] from the plus addons for elementor](https://parsvds.com/wiki/wp-content/uploads/2024/12/Activate-and-use-the-Gravity-Form-Styler-widget.webp)
به صفحات در داشبورد وردپرس خود بروید و برای صفحه‌ای که می‌خواهید فرم تماس را در آن اضافه کنید، روی Edit with Elementor کلیک کنید.
ویجت Gravity Forms Styler را بکشید و رها کنید.
![Drag and drop the gravity forms styler widget how to style gravity forms in wordpress [without coding] from the plus addons for elementor](https://parsvds.com/wiki/wp-content/uploads/2024/12/Drag-and-drop-the-Gravity-Forms-Styler-widget-1024x253.webp)
در ویرایشگر سمت چپ، به Gravity Form > Select Form بروید و فرم تماس خود را از منوی کشویی انتخاب کنید.
![Select your contact form how to style gravity forms in wordpress [without coding] from the plus addons for elementor](https://parsvds.com/wiki/wp-content/uploads/2024/12/Select-your-contact-form-395x1024.webp)
مرحله ۳: عناصر مختلف فرم تماس را در المنتور استایل کنید:
با افزونه‌های پلاس برای المنتور، می‌توانید به‌سرعت جنبه‌های مختلف فرم Elementor Gravity، از جمله فیلدهای ورودی، دکمه ارسال، ناحیه متن، کادر بررسی و موارد دیگر را سبک‌سازی کنید. در اینجا، شما این امکان را دارید که عنوان فرم را نمایش یا پنهان کنید و حتی آن را متناسب با طراحی وب‌سایت خود سفارشی کنید.
سفارشی‌سازی‌ها در برگه Style ویجت Gravity Form Styler
1. به برگه ورودی و ناحیه متن استایل دهید:
در برگه Style ویرایشگر، می‌توانید فیلدهای ورودی مانند نام، مخاطب، ایمیل و غیره را در فرم تماس خود سفارشی کنید. این شامل سفارشی کردن تایپوگرافی، رنگ پس‌زمینه، حاشیه‌ها، سایه جعبه و حاشیه است.
![Style the input tab and text area how to style gravity forms in wordpress [without coding] from the plus addons for elementor](https://parsvds.com/wiki/wp-content/uploads/2024/12/Style-the-Input-tab-and-Text-area.webp)
علاوه بر فیلدهای ورودی، می‌توانید ناحیه متن را نیز به طور مشابه تنظیم کنید تا یک سبک منسجم در فرم حفظ شود.
![Textarea field styling how to style gravity forms in wordpress [without coding] from the plus addons for elementor](https://parsvds.com/wiki/wp-content/uploads/2024/12/Textarea-field-styling.webp)
۲. دکمه ارسال را استایل کنید:
با Gravity Forms می‌توانید به‌راحتی فرم‌های چندمرحله‌ای ایجاد کنید تا اطلاعات دقیقی از بازدیدکنندگان وب‌سایت خود جمع‌آوری کنید. در اینجا، می‌توانید دکمه‌های «Next»، «Previous» و «Submit» روی فرم را با استفاده از ویجت Gravity Forms Styler سفارشی کنید.
گزینه‌های مختلفی برای تغییر متن، پس‌زمینه، رنگ‌ها، حاشیه‌ها و موارد دیگر برای دکمه‌های فرم در اختیار شما قرار می‌دهد.
![Style the submit button how to style gravity forms in wordpress [without coding] from the plus addons for elementor](https://parsvds.com/wiki/wp-content/uploads/2024/12/Style-the-Submit-button.webp)
۳. دکمه رادیو یا CheckBox را استایل کنید:
در مرحله بعد، اگر کادر انتخاب یا دکمه‌های رادیویی را در فرم‌ها اضافه کرده‌اید، ویجت به شما امکان می‌دهد سبک پیش‌فرض Gravity Forms را حذف کرده و آن‌ها را تغییر دهید.
در بخش Checkbox/Radio Field، می‌توانید تایپوگرافی، رنگ متن، رنگ علامت‌گذاری شده/بدون علامت، حاشیه کادر و موارد دیگر را سفارشی کنید تا این عناصر از نظر بصری جذاب شوند.
![Style the radio button or how to style gravity forms in wordpress [without coding] from the plus addons for elementor](https://parsvds.com/wiki/wp-content/uploads/2024/12/Style-the-Radio-button-or-CheckBox.webp)
۴. دکمه آپلود فایل را استایل کنید:
استایل دادن به دکمه آپلود فایل اغلب می‌تواند یک کار گسترده و سخت باشد، حتی با CSS سفارشی برای Gravity Forms. اما افزونه‌های پلاس برای المنتور این کار را با گزینه پیش‌فرض خود برای سبک‌سازی دکمه آپلود فایل آسان‌تر می‌کند.
در قسمت File/Upload File می‌توانید padding، حاشیه یا پس‌زمینه فیلد و دکمه آپلود فایل را به همراه تایپوگرافی و رنگ‌ها تغییر دهید.
![Style the file upload button how to style gravity forms in wordpress [without coding] from the plus addons for elementor](https://parsvds.com/wiki/wp-content/uploads/2024/12/Style-the-File-Upload-button.webp)
علاوه بر این، شما حتی این گزینه را دارید که سبک آپلود چند فایل را برای گزینه آپلود چند فایل در فرم خود فعال کنید. همچنین، می‌توانید پیام‌های پاسخ را برای فرم سفارشی کنید و انیمیشن‌های پیمایشی را اضافه کنید تا فرم‌های تماس خود را تعاملی‌تر کنید.
![Response message how to style gravity forms in wordpress [without coding] from the plus addons for elementor](https://parsvds.com/wiki/wp-content/uploads/2024/12/Response-Message.webp)
جمع‌بندی:
سفارشی کردن سبک‌های فرم Gravity یک راه عالی برای بهبود تجربه کاربر، جذاب کردن وب‌سایت شما و افزایش نرخ تبدیل است. بااین‌حال، افزونه Gravity Forms سفارشی‌سازی‌های منحصربه‌فردی را برای عناصر مختلف ارائه نمی‌دهد و فقط به شما امکان می‌دهد فرم‌های تماس را بر اساستم فرم پیش‌فرض خود استایل دهید.
خوشبختانه، افزونه‌های پلاس برای المنتور راه‌حلی چشمگیر برای استایل کردن فرم‌های Gravity به شکلی که می‌خواهید ارائه می‌دهد.
با ویجت Gravity Form Styler، می‌توانید قفل سفارشی‌سازی‌های نامحدود را برای عناصر فرم مختلف، از فیلدهای ورودی متن گرفته تا دکمه‌های ارسال، چک‌باکس‌ها یا دکمه‌های آپلود فایل باز کنید. اما موارد بیشتری وجود دارد. افزونه‌های Plus برای المنتور همچنین سفارشی کردن طراحی وب‌سایت وردپرس خود را با بیش از ۱۲۰ افزونه منحصربه‌فرد آسان می‌کند.
