Gravity Forms Material Design Review

Description

Gravity Forms Material Design by WP Monks is a must have plugin to give your forms a modern look - and it works with a single click! I use it on every form I create - it's that essential!

This post may contain affiliate links. If you purchase something through one of these links, I will receive a small commission at no additional cost to you. Your trust is important to me and I only recommend products that I have tried and believe in. Read my full disclosure statement here.

Tools Used

i

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.

Review

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.

Before

After

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

Notes

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.