{"id":285548,"date":"2026-03-05T21:05:48","date_gmt":"2026-03-05T21:05:48","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/form-styler-for-gravity-forms-and-elementor\/"},"modified":"2026-03-16T21:26:49","modified_gmt":"2026-03-16T21:26:49","slug":"form-styler-for-gravity-forms-and-elementor","status":"publish","type":"plugin","link":"https:\/\/scn.wordpress.org\/plugins\/form-styler-for-gravity-forms-and-elementor\/","author":14506843,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.1","stable_tag":"1.1","tested":"6.9.4","requires":"5.6","requires_php":"7.2","requires_plugins":null,"header_name":"Form Styler for Gravity Forms and Elementor","header_author":"AppsCreo","header_description":"Add and style Gravity Forms using Elementor widgets.","assets_banners_color":"181a20","last_updated":"2026-03-16 21:26:49","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/form-styler-for-gravity-forms-and-elementor","header_author_uri":"https:\/\/appscreo.com","rating":0,"author_block_rating":0,"active_installs":20,"downloads":242,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0":{"tag":"1.0","author":"appscreo","date":"2026-03-05 21:15:34"},"1.1":{"tag":"1.1","author":"appscreo","date":"2026-03-16 21:26:49"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3477065,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3477065,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-772x225.png":{"filename":"banner-772x225.png","revision":3484270,"resolution":"772x225","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0","1.1"],"block_files":[],"assets_screenshots":{"Screenshot-6.png":{"filename":"Screenshot-6.png","revision":3484264,"resolution":"6","location":"assets","locale":""},"screenshot-1.png":{"filename":"screenshot-1.png","revision":3484264,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3484264,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3484264,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3484264,"resolution":"4","location":"assets","locale":""},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3484264,"resolution":"5","location":"assets","locale":""}},"screenshots":{"1":"Gravity forms customization","2":"Gravity forms customization","3":"Gravity forms customization","4":"Gravity forms customization","5":"Gravity forms customization","6":"Gravity forms customization"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[358,76538,19476,5835,1655],"plugin_category":[],"plugin_contributors":[255991],"plugin_business_model":[],"class_list":["post-285548","plugin","type-plugin","status-publish","hentry","plugin_tags-contact-form","plugin_tags-elementor","plugin_tags-form-styling","plugin_tags-form-widget","plugin_tags-gravity-forms","plugin_contributors-appscreo","plugin_committers-appscreo"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/form-styler-for-gravity-forms-and-elementor\/assets\/icon-128x128.png?rev=3477065","icon_2x":"https:\/\/ps.w.org\/form-styler-for-gravity-forms-and-elementor\/assets\/icon-256x256.png?rev=3477065","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/form-styler-for-gravity-forms-and-elementor\/assets\/screenshot-1.png?rev=3484264","caption":"Gravity forms customization"},{"src":"https:\/\/ps.w.org\/form-styler-for-gravity-forms-and-elementor\/assets\/screenshot-2.png?rev=3484264","caption":"Gravity forms customization"},{"src":"https:\/\/ps.w.org\/form-styler-for-gravity-forms-and-elementor\/assets\/screenshot-3.png?rev=3484264","caption":"Gravity forms customization"},{"src":"https:\/\/ps.w.org\/form-styler-for-gravity-forms-and-elementor\/assets\/screenshot-4.png?rev=3484264","caption":"Gravity forms customization"},{"src":"https:\/\/ps.w.org\/form-styler-for-gravity-forms-and-elementor\/assets\/screenshot-5.png?rev=3484264","caption":"Gravity forms customization"},{"src":"https:\/\/ps.w.org\/form-styler-for-gravity-forms-and-elementor\/assets\/Screenshot-6.png?rev=3484264","caption":"Gravity forms customization"}],"raw_content":"<!--section=description-->\n<p><strong>Form Styler for Gravity Forms and Elementor<\/strong> 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 \u2014 inputs, labels, buttons, layout \u2014 without writing a single line of CSS.<\/p>\n\n<p>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 <strong>Gravity Forms Orbital theme<\/strong> introduced in Gravity Forms 2.5 and fully updated for the new theme framework structure in Gravity Forms 2.9+.<\/p>\n\n<p><strong>Looking for more advanced visual styling?<\/strong><\/p>\n\n<p>For users who want deeper, CSS\u2011free control over Gravity Forms (and other elements), check out our companion plugin <strong>Simple Custom Code \u2013 Custom CSS, JS, and HTML, Visual CSS Customizer<\/strong>. It includes a Gravity Forms Visual CSS Customizer that lets you tweak virtually every aspect of your form using interactive visual tools.<\/p>\n\n<p>\ud83d\udc49 <a href=\"https:\/\/wordpress.org\/plugins\/appscreo-visual-css-customizer\/\">Learn more about Simple Custom Code \u2013 Custom CSS, JS, and HTML, Visual CSS Customizer<\/a><\/p>\n\n<h4>Why Use This Widget?<\/h4>\n\n<ul>\n<li><strong>Accurate live preview<\/strong> \u2014 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>\n<li><strong>No CSS required<\/strong> \u2014 every visual property is exposed as an Elementor control. Change colors, typography, spacing, shadows, and more directly from the Style panel.<\/li>\n<li><strong>Responsive controls<\/strong> \u2014 padding, margin, row gap, and column gap all support per-breakpoint values via Elementor's responsive system.<\/li>\n<li><strong>Clean, minimal code<\/strong> \u2014 the plugin hooks into Elementor and Gravity Forms using their official APIs with no hacks, no JavaScript overrides, and no style sheet conflicts.<\/li>\n<\/ul>\n\n<h4>Features<\/h4>\n\n<p><strong>Form Settings (Content Panel)<\/strong><\/p>\n\n<ul>\n<li>Select any active Gravity Form from a dropdown (placeholder always appears first)<\/li>\n<li>Toggle form title and description visibility<\/li>\n<li>Enable AJAX submission<\/li>\n<li>Set a custom field values string (pre-populate fields)<\/li>\n<li>Configure tab index start<\/li>\n<\/ul>\n\n<p><strong>Form Container (Style Panel)<\/strong><\/p>\n\n<ul>\n<li>Padding and margin (responsive, per-breakpoint)<\/li>\n<li>Row gap and column gap between fields (responsive)<\/li>\n<li>Border (type, width, color)<\/li>\n<li>Border radius<\/li>\n<li>Box shadow<\/li>\n<li>Background \u2014 solid color or gradient<\/li>\n<li>Enable smooth transitions toggle<\/li>\n<\/ul>\n\n<p><strong>Form Labels<\/strong><\/p>\n\n<ul>\n<li>Typography (font family, size, weight, line height, letter spacing)<\/li>\n<li>Text color<\/li>\n<\/ul>\n\n<p><strong>Sub Labels<\/strong><\/p>\n\n<ul>\n<li>Typography<\/li>\n<li>Text color<\/li>\n<\/ul>\n\n<p><strong>Input Fields \u2014 Normal \/ Hover \/ Focus states<\/strong><\/p>\n\n<ul>\n<li>Padding (Normal only)<\/li>\n<li>Border (type, width, color)<\/li>\n<li>Border color per state (Hover \/ Focus)<\/li>\n<li>Background color per state<\/li>\n<li>Typography and text color (Normal only)<\/li>\n<li>Border radius (Normal only)<\/li>\n<li>Box shadow per state \u2014 Default, None (removes shadow), or Custom<\/li>\n<li>Placeholder color and typography (Normal only)<\/li>\n<li>Focus state outline \u2014 Default, None (removes browser outline), or Custom (color, width, offset)<\/li>\n<\/ul>\n\n<p><strong>Submit Button \u2014 Normal \/ Hover \/ Focus states<\/strong><\/p>\n\n<ul>\n<li>Background \u2014 solid color or gradient, per state<\/li>\n<li>Text color per state<\/li>\n<li>Border color (Focus state)<\/li>\n<li>Box shadow per state \u2014 Default, None (removes shadow), or Custom<\/li>\n<li>Hover animation (Elementor built-in)<\/li>\n<li>Focus state outline \u2014 Default, None, or Custom (color, width, offset)<\/li>\n<li>Border (type, width, color)<\/li>\n<li>Border radius<\/li>\n<li>Typography<\/li>\n<li>Padding<\/li>\n<\/ul>\n\n<h3>Donate &amp; Support Development<\/h3>\n\n<p>If you find this plugin helpful, consider supporting future updates:<\/p>\n\n<ul>\n<li><strong><a href=\"https:\/\/github.com\/sponsors\/appscreo\">GitHub Sponsors<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/buymeacoffee.com\/appscreo\">Buy Me a Coffee<\/a><\/strong><\/li>\n<\/ul>\n\n<p>Thank you! \u2764\ufe0f<\/p>\n\n<h3>Want to help?<\/h3>\n\n<p>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\">GitHub issues<\/a> or translations.<\/p>\n\n<p>You can also visit our GitHub page to report issues:\nhttps:\/\/github.com\/appscreo\/form-styler-for-gravity-forms-and-elementor<\/p>\n\n<h4>Requirements<\/h4>\n\n<ul>\n<li>WordPress 5.6 or higher<\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\">Elementor<\/a> 3.5 or higher (free version is sufficient)<\/li>\n<li><a href=\"https:\/\/www.gravityforms.com\/\">Gravity Forms<\/a> 2.7 or higher with the Orbital theme active<\/li>\n<\/ul>\n\n<h4>Privacy<\/h4>\n\n<p>This plugin does not collect, store, or transmit any personal data. It has no external HTTP requests and does not use cookies.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>form-styler-for-gravity-forms-and-elementor<\/code> folder to <code>\/wp-content\/plugins\/<\/code>.<\/li>\n<li>Activate the plugin through <strong>Plugins \u2192 Installed Plugins<\/strong> in your WordPress dashboard.<\/li>\n<li>Make sure both Elementor and Gravity Forms are installed and active.<\/li>\n<li>Open any page or post in the Elementor editor.<\/li>\n<li>Search for <strong>\"Gravity Form\"<\/strong> in the widget panel (look under the <em>Gravity Forms<\/em> category).<\/li>\n<li>Drag the widget onto your canvas, select a form from the dropdown, and start styling.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20work%20with%20the%20free%20version%20of%20elementor%3F\"><h3>Does this work with the free version of Elementor?<\/h3><\/dt>\n<dd><p>Yes. The widget uses only core Elementor controls and APIs that are available in the free version of Elementor.<\/p><\/dd>\n<dt id=\"which%20gravity%20forms%20version%20is%20supported%3F\"><h3>Which Gravity Forms version is supported?<\/h3><\/dt>\n<dd><p>The widget supports Gravity Forms 2.7 and higher. It is optimised for the Orbital theme introduced in Gravity Forms 2.5 and correctly handles the updated theme framework CSS and JavaScript structure introduced in Gravity Forms 2.9.<\/p><\/dd>\n<dt id=\"the%20form%20looks%20unstyled%20in%20the%20elementor%20editor.%20what%20should%20i%20do%3F\"><h3>The form looks unstyled in the Elementor editor. What should I do?<\/h3><\/dt>\n<dd><p>This was a known issue in older versions of similar plugins caused by loading Gravity Forms styles into the wrong Elementor context. This plugin loads all required Gravity Forms styles and scripts into the Elementor <strong>preview iframe<\/strong> (not just the editor shell), so the form should render with full Orbital theme styling by default. If you are still seeing unstyled output, ensure that the Orbital theme is selected in <strong>Gravity Forms \u2192 Settings \u2192 Default Form Settings<\/strong>.<\/p><\/dd>\n<dt id=\"can%20i%20use%20this%20plugin%20with%20elementor%20pro%3F\"><h3>Can I use this plugin with Elementor Pro?<\/h3><\/dt>\n<dd><p>Yes. The widget is fully compatible with Elementor Pro and works alongside all Pro features including Theme Builder, dynamic tags, and custom breakpoints.<\/p><\/dd>\n<dt id=\"does%20ajax%20submission%20work%20when%20enabled%3F\"><h3>Does AJAX submission work when enabled?<\/h3><\/dt>\n<dd><p>Yes. Enabling the AJAX toggle passes <code>ajax=\"true\"<\/code> to the Gravity Forms shortcode. All standard Gravity Forms AJAX behaviour is preserved.<\/p><\/dd>\n<dt id=\"can%20i%20embed%20the%20same%20form%20more%20than%20once%20on%20the%20same%20page%3F\"><h3>Can I embed the same form more than once on the same page?<\/h3><\/dt>\n<dd><p>Yes. You can place multiple instances of the widget on the same page and target different forms or the same form with different settings. Use the Tab Index Start control to avoid duplicate tab index values when embedding the same form twice.<\/p><\/dd>\n<dt id=\"is%20this%20plugin%20compatible%20with%20caching%20plugins%3F\"><h3>Is this plugin compatible with caching plugins?<\/h3><\/dt>\n<dd><p>Yes. The widget outputs standard Gravity Forms HTML via the official shortcode function. Compatibility with caching plugins follows the same rules as any other Gravity Forms shortcode embed.<\/p><\/dd>\n<dt id=\"how%20do%20i%20remove%20the%20browser%20focus%20outline%20from%20input%20fields%3F\"><h3>How do I remove the browser focus outline from input fields?<\/h3><\/dt>\n<dd><p>In the <strong>Input Fields<\/strong> section, switch to the <strong>Focus<\/strong> tab, find the <strong>Outline<\/strong> control, and select <strong>None (remove outline)<\/strong>. Note that removing outlines reduces keyboard accessibility, so consider replacing them with a visible box shadow instead.<\/p><\/dd>\n<dt id=\"my%20submit%20button%20styles%20are%20visible%20in%20the%20editor%20but%20disappear%20on%20the%20front%20end.%20why%3F\"><h3>My submit button styles are visible in the editor but disappear on the front end. Why?<\/h3><\/dt>\n<dd><p>This was a known issue where Gravity Forms' own stylesheet could overwrite button styles depending on CSS load order. Fixed in version 1.1 \u2014 button styles now use increased specificity to reliably override the Gravity Forms defaults on both the editor preview and the published page.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.1.0<\/h4>\n\n<p><strong>New \u2014 Input Fields<\/strong>\n* Added <strong>Padding<\/strong> control (Normal tab) for inputs, textareas, and selects.\n* Added <strong>Placeholder Color<\/strong> control (Normal tab) \u2014 targets the native <code>::placeholder<\/code> pseudo-element and the legacy <code>.placeholder<\/code> class used by older Gravity Forms versions.\n* Added <strong>Placeholder Typography<\/strong> control (Normal tab) \u2014 allows customising font family, size, weight, style, and letter spacing of placeholder text.<\/p>\n\n<p><strong>New \u2014 Submit Button<\/strong>\n* Added a <strong>Focus<\/strong> state tab to the Submit Button section, matching the structure of the existing Normal and Hover tabs. Includes: background (solid or gradient), text color, border color, box shadow (Default \/ None \/ Custom), and outline (Default \/ None \/ Custom with color, width, and offset).<\/p>\n\n<p><strong>Fixed \u2014 Submit Button styles not applying on the front end<\/strong>\n* Button styles set in the Elementor editor were visible in the preview but lost on the published page because Gravity Forms' own stylesheet was overriding them by load order. Affected declarations (color, padding, border radius, border color, box shadow) now include <code>!important<\/code> so they reliably win over Gravity Forms defaults regardless of stylesheet enqueue order.<\/p>\n\n<p><strong>Fixed \u2014 \"Select a form\" placeholder appearing out of order in the dropdown<\/strong>\n* Gravity Forms returns form IDs as integers. Assigning integer keys to an associative PHP array alongside an empty-string key caused PHP to reorder the array and push the placeholder option to the bottom of the list. Form IDs are now explicitly cast to strings, and the placeholder is merged using the union operator (<code>+<\/code>) to guarantee it always appears first.<\/p>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Embed and fully style Gravity Forms inside Elementor with live preview, Orbital theme support, and pixel-perfect design controls.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/285548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=285548"}],"author":[{"embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/appscreo"}],"wp:attachment":[{"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=285548"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=285548"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=285548"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=285548"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=285548"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/scn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=285548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}