內容簡介
Form Styler for Gravity Forms and Elementor 是一個專為 Gravity Forms 和 Elementor 設計的外掛，提供拖放小工具，讓使用者可以輕鬆嵌入和自訂 Gravity Forms，而無需撰寫 CSS 代碼，確保編輯器中的預覽與實際顯示一致。
【主要功能】
• 拖放小工具，輕鬆嵌入 Gravity Forms
• 直觀的樣式控制，無需 CSS
• 支援響應式設計，適應不同裝置
• 自訂表單標題和描述的可見性
• 提供多種輸入欄位的樣式選項
• 支援 AJAX 提交功能
外掛標籤
開發者團隊
② 後台搜尋「Form Styler for Gravity Forms and Elementor」→ 直接安裝（推薦）
原文外掛簡介
Form Styler for Gravity Forms and Elementor is the missing bridge between Gravity Forms and Elementor. It adds a dedicated drag-and-drop widget to the Elementor editor that lets you embed any Gravity Form on your page and style every part of it — inputs, labels, buttons, layout — without writing a single line of CSS.
Unlike the plain shortcode approach, this widget renders Gravity Forms correctly inside the Elementor preview iframe so what you see in the editor is exactly what your visitors see. It is built specifically for the Gravity Forms Orbital theme introduced in Gravity Forms 2.5 and fully updated for the new theme framework structure in Gravity Forms 2.9+.
Looking for more advanced visual styling?
For users who want deeper, CSS‑free control over Gravity Forms (and other elements), check out our companion plugin Simple Custom Code – Custom CSS, JS, and HTML, Visual CSS Customizer. It includes a Gravity Forms Visual CSS Customizer that lets you tweak virtually every aspect of your form using interactive visual tools.
👉 Learn more about Simple Custom Code – Custom CSS, JS, and HTML, Visual CSS Customizer
Why Use This Widget?
Accurate live preview — Gravity Forms styles load correctly inside the Elementor editor so you are always designing with a real, styled form, not a naked HTML structure.
No CSS required — every visual property is exposed as an Elementor control. Change colors, typography, spacing, shadows, and more directly from the Style panel.
Responsive controls — padding, margin, row gap, and column gap all support per-breakpoint values via Elementor’s responsive system.
Clean, minimal code — the plugin hooks into Elementor and Gravity Forms using their official APIs with no hacks, no JavaScript overrides, and no style sheet conflicts.
Features
Form Settings (Content Panel)
Select any active Gravity Form from a dropdown (placeholder always appears first)
Toggle form title and description visibility
Enable AJAX submission
Set a custom field values string (pre-populate fields)
Configure tab index start
Form Container (Style Panel)
Padding and margin (responsive, per-breakpoint)
Row gap and column gap between fields (responsive)
Border (type, width, color)
Border radius
Box shadow
Background — solid color or gradient
Enable smooth transitions toggle
Form Labels
Typography (font family, size, weight, line height, letter spacing)
Text color
Sub Labels
Typography
Text color
Input Fields — Normal / Hover / Focus states
Padding (Normal only)
Border (type, width, color)
Border color per state (Hover / Focus)
Background color per state
Typography and text color (Normal only)
Border radius (Normal only)
Box shadow per state — Default, None (removes shadow), or Custom
Placeholder color and typography (Normal only)
Focus state outline — Default, None (removes browser outline), or Custom (color, width, offset)
Submit Button — Normal / Hover / Focus states
Background — solid color or gradient, per state
Text color per state
Border color (Focus state)
Box shadow per state — Default, None (removes shadow), or Custom
Hover animation (Elementor built-in)
Focus state outline — Default, None, or Custom (color, width, offset)
Border (type, width, color)
Border radius
Typography
Padding
Donate & Support Development
If you find this plugin helpful, consider supporting future updates:
GitHub Sponsors
Buy Me a Coffee
Thank you! ❤️
Want to help?
Want to file a bug, contribute some code, or improve translations? Excellent! Check out our GitHub issues or translations.
You can also visit our GitHub page to report issues:
https://github.com/appscreo/form-styler-for-gravity-forms-and-elementor
Requirements
WordPress 5.6 or higher
Elementor 3.5 or higher (free version is sufficient)
Gravity Forms 2.7 or higher with the Orbital theme active
Privacy
This plugin does not collect, store, or transmit any personal data. It has no external HTTP requests and does not use cookies.
