Styles & Layouts for Gravity Forms

Description

Styles and Layouts for Gravity Forms lets you create beautiful designs for Gravity forms. It uses WordPress Customizer so you get a true WYSIWYG experience. All the changes you make in this plugin are instantaneously visible so you can see how the form looks in realtime.

Styles & Layouts for Gravity Forms Premium Addons:

It comes with 100+ options to customize various parts of gravity form like form wrapper,form header, form title and description, submit button, radio inputs, checkbox inputs, paragraph textarea, labels, section breaks, descriptions, text inputs , dropdown menus, labes, sub labels, placeholders, list field, confirmation message, error messages and more.

You get to set the options like background color, font size, font family, borders, width, text alignment, margin, padding, font color and more for all the sections. You are no longer required to use custom CSS codes to create the perfect Gravity Forms design. The designs created with this plugin will work even if you change your theme.

You can set a different style for each form.

Premium Addons to Extend the Functionality

  • Grid Layout :
    Grid Layout lets you create multi column layout for your form. You can create 2 and 3 column layouts. Radio and checkbox inputs can be divided into 2, 3, 4 , 5 columns and you can also set them to be inline. The Gravity Form table layout created with this plugin is fully responsive.
    Checkout the below video to have a quick glance of Grid Layout addon

  • Material Design :
    **This addon will convert Gravity Form into material design with single click of button **. Checkboxes can be converted into material design compatible switch buttons with ripple effect. Color of material design can be easily changed using color picker.
    Checkout how to easily convert any form into material design

  • Theme Pack :
    Theme Pack for Styles and Layouts for Gravity Forms has a collection of 30+ beautifully crafted themes. You will no longer need to change settings for each and every element of form. Gravity Forms Theme pack addon is highly configurable as you can modify the form design even after applying a theme. This addon has themes which uses gradient as background.
    Checkout the below video to have a quick glance of themes addon

  • Tooltips :
    Tooltips addon lets you add tooltips next to field labels in Gravity Forms from customizer. There are multiple colors, icons, animation effects, position options to make your tooltips look beautiful and resonate with your theme.
    Checkout the below video to have a quick glance of Tooltips addon

  • Field Icons :
    Field Icons addon makes it easy to add icons inside form fields. It supports icons for phone, single line input, quantity, custom post fields, post tags, post title, date, email, website, address, name and number fields. It will automatically detect all the fields present inside the form and give you the option to set icons for them. You can also change the position of icons from left to right. It also comes with an option to set padding for icon fields so that the form text doesn’t overlap with the icon.
    Checkout the below video to have a quick glance of Field Icons addon

  • Custom Themes :
    Custom Themes addon for Styles and Layouts for Gravity Forms lets you save your own form designs as themes. You can create unlimited themes and apply them on unlimited forms. This addon will save a lot of time if you want to make two forms with same styling. You are free to modify the form design even after you have applied a theme.
    Checkout the below video to have a quick glance at Custom Themes addon

  • Addon Bundle:
    Addon Bundle is a collection of all the addons of Styles and Layouts for Gravity Forms and you will get it a special discounted price.

Screenshots

  • Open Customize window
  • Styles and Layouts Panel
  • Sections for Settings
  • Options in settings

Installation

  1. Upload the plugin files to the /wp-content/plugins/plugin-name directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the Gravity Forms Styler plugin through the ‘Plugins’ screen in WordPress
  3. Now go to any post/page(in frontend) where you have added a gravity form. Make sure you are logged in.
  4. Click on the Customize button to launch WordPress Cusotmizer.
  5. Click on Styles and Layouts Gravity Forms and then select the gravity Form you want to customize.
  6. Wait while the plugin saves you form selection and refreshes the page.
  7. Now start beautiful designs for your forms

FAQ

Installation Instructions
  1. Upload the plugin files to the /wp-content/plugins/plugin-name directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the Gravity Forms Styler plugin through the ‘Plugins’ screen in WordPress
  3. Now go to any post/page(in frontend) where you have added a gravity form. Make sure you are logged in.
  4. Click on the Customize button to launch WordPress Cusotmizer.
  5. Click on Styles and Layouts Gravity Forms and then select the gravity Form you want to customize.
  6. Wait while the plugin saves you form selection and refreshes the page.
  7. Now start beautiful designs for your forms
Can I create different styles for different Forms?

Yes each form design is stored separately. So, design for each form can be different.

Can I create multiple styles for one form

As of now you can only create one design for one form. If you want to create multiple for single form then first duplicate it in Gravity forms and then create a new design using Styles and Layouts plugin.

Can I add custom Gravity Forms CSS using this WordPress plugin?

Yes, you can add custom CSS code for Gravity Forms with this free plugin. To add the code navigate to Customizer -> Styles & Layouts Gravity Forms -> General Settings -> Custom CSS.

Does this plugin support Gravity Forms in Divi Theme?

Yes, Gravity Forms embedded in Divi themes is also supported. Please check the this link to locate customizer in Divi theme https://wpmonks.com/blog/guide/open-styles-layouts-panel-divi/

Reviews

No pre build themes!

I’ll give 5 stars if I have some prebuild themes with it. Manual work is too embarrassing for me and I tried, it’s become uglier than regular design! Sorry

Best plugin for Gravity Forms Styling

I have been using this plugin from 2 months and haven’t faced any issue so far. All the settings are working flawlessly and number of options for designing is more than what I needed.

It is a must have plugin if you are using Gravity Forms

Fraud! For 6 of the 7 Gravity Form Addons you have to pay, but not mentioned.

Fraud! On its plugin page, the author describes 7 Gravity Form Addons, but only 1 is free, for the other 6 you have to pay. Only that is not mentioned at any point on the page, you can find it out only if you click on the links to the homepage, which can be found on the plugin page and in the installed program. In practice, the plugin page is only used for free advertising. For me is the attempted fraud!

Betrug! Auf seiner Plugin Seite beschreibt der Autor 7 Gravity Form Addons, aber nur 1 ist gratis, die anderen 6 sind zu bezahlen. Nur, dass ist an keiner Stelle auf der Seite erwähnt, man erfährt es erst, wenn man auf die Links zur Homepage klickt, die auf der Plugin Seite und im installierten Programm zu finden sind. Praktisch wird die Plugin-Seite nur zur kostenlosen Werbung benutzt. Für mich ist das versuchter Betrug!

Fraude! Na sua página do plug-in o autor descreve 7 Gravity Form Addons, mas apenas um é livre, os outros 6 são pagos. Só que este fato não é mencionado no site a qualquer momento, você pode perceber isso somente quando se clica nos links para a homepage, os links se encontram na página do plugin em WordPress e dentro do plugin instalado. Na prática, a página plug-in de WordPress é usado apenas para publicidade gratuita. Para mim, isso é tentativa de fraude!

Waste of time. Need to pay for…

Nowhere in the plugin description does it say that the features described in it need to be purchased. It says “addons”, but that’s far from clear.

The plugin does seem to do CSS changes through the Customizer (which can be useful for some people). I need to change the layout of the form, and that feature requires a paid membership.

Read all 16 reviews

Contributors & Developers

“Styles & Layouts for Gravity Forms” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

3.0.1 (14 Oct 2017)

  • Fixed custom CSS not working

3.0 (11 Oct 2017)

  • Fixed styling of submit button not working on multipage form
  • Added option to set transparency for background color
  • Added support for use of Gradients as background for form wrapper
  • Fixed % not working in preview
  • Added support for values without ‘px’ or any other unit for margin and padding settings
  • Added an alert if Gravity form is not present
  • Added option to open ‘Styles & Layouts’ directly from edit form page
  • Minified styles.php and now only those styles are shown which have values
  • Added option to give different widths for phones and tabs
  • Fixed padding for placeholder not working
  • Fixed styling of confirmation messages
  • Fixed Default border not working in customizer preview
  • Fixed “Slabo 27px” font family not working
  • Fixed width shown as max-width
  • Added options to change line height and letter spacing
  • some other minor fixes

2.0.8 (30th March 2017)

  • Added option to change description font color
  • Fixed issue with Submit button hover color
  • Changed Maximum width to Width

2.0.7 (10th March 2017)

  • Fixed issue that added ‘pxpx’ after values

2.0.6 (7th March 2017)

  • Added option to change submit button background and font color on hover
  • Added support for 99 most popular Google fonts
  • Automatically add ‘px’ if not added by user.
  • Added option to hide labels
  • Added option to enable admin bar under general settings

2.0.5 (1st January 2017)

  • Fixed placeholders.php not found error

2.0.4 (31th December 2016)

  • Fixed code that showed url parameters in frontend

2.0.3 (28th December 2016)

  • Fixed empty sections after page refresh

2.0.2 (27th December 2016)

  • Live preview is now compatible with WordPress 4.7
  • Fixed page refresh bug on form selection

2.0.1 (16th December 2016)

  • Fixed page refresh bug on form selection

2.0 (6th December 2016)

  • Added option to change placeholder font size, font color and padding.
  • Added option to add custom CSS
  • Fixed preview of font size and padding for checkboxes
  • Removed force style option
  • Updated documentation
  • Fixed auto reload bug
  • Styles & Layouts panel now automatically loads after page selection
  • New backend logic to detect forms using Gravity Forms hook

1.4.1 (14th July 2016)

  • Added List Field section
  • Compatibility with Materialize Addon
  • Added background color for section break title and description

1.4 (14th July 2016)

  • Added option to reset styles
  • Added option to force styles

1.3.3 (23rd June 2016)

  • Added font size for checkboxes
  • Added documentation on plugin activation
  • changed text ‘Enter Gravity form Id’ to ‘Select Gravity Form’

1.3.2 (17th May 2016)

  • Compatible with Avada theme (Fusion page builder), Visual Composer and other page builder addons
  • Added styles for sub labels
  • Changed background to background-colour in css output

1.3.1 (20th April 2016)

  • Fixed bug

1.3 (2nd April 2016)

  • Fixed error message when no font is selected
  • Fixed Background color bug for Submit button
  • Removed default background color for Header border
  • Added border color, font color,border style , margin in dropdown field settings

1.2 (24th feb 2016)

  • Added Addon and Licensing page
  • Added stla-license-fields hook

1.1

  • Added condition to check if Gravity Forms is activated
  • Added gf_stla_after_post_style_display, gf_stla_add_theme_section hooks

1.0

  • initial release