AppsCreo

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.
👉 <a href="https://wordpress.org/plugins/appscreo-visual-css-customizer/" rel="ugc">Learn more about Simple Custom Code – Custom CSS, JS, and HTML, Visual CSS Customizer</a>
<h4>Why Use This Widget?</h4>
<ul>
<li>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.</li>
<li>No CSS required — every visual property is exposed as an Elementor control. Change colors, typography, spacing, shadows, and more directly from the Style panel.</li>
<li>Responsive controls — padding, margin, row gap, and column gap all support per-breakpoint values via Elementor’s responsive system.</li>
<li>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.</li>
</ul>
<h4>Features</h4>
Form Settings (Content Panel)
<ul>
<li>Select any active Gravity Form from a dropdown (placeholder always appears first)</li>
<li>Toggle form title and description visibility</li>
<li>Enable AJAX submission</li>
<li>Set a custom field values string (pre-populate fields)</li>
<li>Configure tab index start</li>
</ul>
Form Container (Style Panel)
<ul>
<li>Padding and margin (responsive, per-breakpoint)</li>
<li>Row gap and column gap between fields (responsive)</li>
<li>Border (type, width, color)</li>
<li>Border radius</li>
<li>Box shadow</li>
<li>Background — solid color or gradient</li>
<li>Enable smooth transitions toggle</li>
</ul>
Form Labels
<ul>
<li>Typography (font family, size, weight, line height, letter spacing)</li>
<li>Text color</li>
</ul>
Sub Labels
<ul>
<li>Typography</li>
<li>Text color</li>
</ul>
Input Fields — Normal / Hover / Focus states
<ul>
<li>Padding (Normal only)</li>
<li>Border (type, width, color)</li>
<li>Border color per state (Hover / Focus)</li>
<li>Background color per state</li>
<li>Typography and text color (Normal only)</li>
<li>Border radius (Normal only)</li>
<li>Box shadow per state — Default, None (removes shadow), or Custom</li>
<li>Placeholder color and typography (Normal only)</li>
<li>Focus state outline — Default, None (removes browser outline), or Custom (color, width, offset)</li>
</ul>
Submit Button — Normal / Hover / Focus states
<ul>
<li>Background — solid color or gradient, per state</li>
<li>Text color per state</li>
<li>Border color (Focus state)</li>
<li>Box shadow per state — Default, None (removes shadow), or Custom</li>
<li>Hover animation (Elementor built-in)</li>
<li>Focus state outline — Default, None, or Custom (color, width, offset)</li>
<li>Border (type, width, color)</li>
<li>Border radius</li>
<li>Typography</li>
<li>Padding</li>
</ul>
<h3>Donate & Support Development</h3>
If you find this plugin helpful, consider supporting future updates:
<ul>
<li><a href="https://github.com/sponsors/appscreo" rel="nofollow ugc">GitHub Sponsors</a></li>
<li><a href="https://buymeacoffee.com/appscreo" rel="nofollow ugc">Buy Me a Coffee</a></li>
</ul>
Thank you! ❤️
<h3>Want to help?</h3>
Want to file a bug, contribute some code, or improve translations? Excellent! Check out our <a href="https://github.com/appscreo/form-styler-for-gravity-forms-and-elementor/issues" rel="nofollow ugc">GitHub issues</a> or translations.
You can also visit our GitHub page to report issues: 
https://github.com/appscreo/form-styler-for-gravity-forms-and-elementor
<h4>Requirements</h4>
<ul>
<li>WordPress 5.6 or higher</li>
<li><a href="https://wordpress.org/plugins/elementor/" rel="ugc">Elementor</a> 3.5 or higher (free version is sufficient)</li>
<li><a href="https://www.gravityforms.com/" rel="nofollow ugc">Gravity Forms</a> 2.7 or higher with the Orbital theme active</li>
</ul>
<h4>Privacy</h4>
This plugin does not collect, store, or transmit any personal data. It has no external HTTP requests and does not use cookies.

Form Styler for Gravity Forms and Elementor

Embed and fully style Gravity Forms inside Elementor with live preview, Orbital theme support, and pixel-perfect design controls.

HasThemes

HT Plugins

DevItems

HT Form Widget for Elementor and WPForms is an Elementor addon that allows you to easily add WPForms forms to your pages using a drag-and-drop widget. Simply select your form from a dropdown and customize every aspect of its appearance without writing any code.
Required Plugin: <a href="https://wordpress.org/plugins/wpforms-lite/" rel="ugc">WPForms</a>
<h3>Features</h3>
Easy Form Integration 
* Select any WPForms form from a dropdown list 
* Drag and drop widget placement in Elementor 
* Show or hide form title and description
Complete Styling Control 
* Title Styling – Customize color, typography, padding, margin, border, and border radius 
* Description Styling – Full control over description appearance 
* Label Styling – Style form labels with background color, text color, typography, and spacing 
* Sub-label Styling – Separate styling for sub-labels 
* Required Field Indicator – Custom color for required field markers
Input & Textarea Styling 
* Background and text color customization 
* Typography controls (font family, size, weight) 
* Height adjustment for input fields and textareas 
* Padding, margin, and border controls 
* Border radius for rounded corners
Submit Button Styling 
* Full-width button option 
* Custom width and height controls 
* Button position (left, center, right) 
* Normal and hover state styling 
* Box shadow effects 
* Complete typography control
Responsive Design 
* All styling options support desktop, tablet, and mobile views 
* Create forms that look great on any device
<h3>Need Help?</h3>
Is there any feature that you want to get in this plugin? 
Need assistance to use this plugin? 
Feel free to <a href="https://hasthemes.com/contact-us/" rel="nofollow ugc">Contact us</a>

HT Form Widget for Elementor and WPForms

HT Form Widget for Elementor and WPForms allows you to easily display WPForms forms using Elementor with full styling control.

Form Styler for Gravity Forms and Elementor vs HT Form Widget for Elementor and WPForms