Gravity Forms - Any License
Gravity Forms Material Design
Update 11/21/20: I ran into some issues with an update around version 3.3 and have disabled this plugin on almost all of my forms. Several more updates have been released since then so the issues may have been fixed, but I have not had the bandwith to retest in a while.
What is Material Design?
According to Wikipedia: “Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.”
In essence, it makes forms look more modern. The images below show the standard Gravity Forms look labeled “before” followed by the same form with Material Design enabled. Note the difference in how the form reacts when the cursor is moved.
How Does it Work?
First you must install the Styles & Layouts for Gravity Forms plugin from the WordPress repository. Then install the Material Design add-on.
Once installed, edit the form you would like to apply the style to. From the edit screen, click on the Styles & Layouts tab.
This will take you to the theme customizer menu. Once the Styles & Layouts menu loads, it should look like the image below. (You may see fewer or more options depending on which add-ons you have purchased.)
From there it really is as easy as 1, 2, 3!
Step 1: Click Material Design
Step 2: Click “Enable Material Design”
Step 3: Choose your color and click Publish
- While I typically prefer for my field description to appear above inputs, when using material design I select to place the description below the inputs. This provides a better flow to the information I think.
- The one thing I’m not crazy about with the material design plugin is the way it displays paragraph text fields. I like to set up my single line text fields to be side by side (by using CSS classes “gf_left_half” and “gf_right_half”) with a paragraph text field stretching the full width of the form. When material design is enabled, the paragraph text field is shortened so it only covers the left half of the form. Nothing that can’t be fixed with a little CSS, but it’s the only thing that doesn’t work the way I’d like it right out of the box.