skip to main content
Menu

Gravity Forms 2.5: Breaking out of the WordPress Design

Recently a big update one of the best form plugins, Gravity Forms 2.5 was finally released to the world. The update brings with it a lot of new and long awaited functionality such as built-in columns and accessibility updates. It also brings with it a redesigned form builder, similar to Gutenberg which while controversial aligns with WordPress’s direction.

GravityForms 2.5 Form List Screen showing 1 form and the hidden WordPress Notifications

However, one of the most striking changes in this version is the design of the whole CMS side of the plugin. A whole pallete of blue is applied, and almost every element has been restyled to fit a Gravity Forms look and feel. The top of the main Forms page is now filled with a rather large Gravity Forms logo to complete the look.

While it’s not completely overtaking, and removing certain stylesheets takes us almost back to the old look and feel, this doesn’t feel like using WordPress. Compare this to other relatively large plugins such as WooCommerce which provide a lot of custom user experience components without taking the user too far away from WordPress and any custom colour schem you may have chosen. Picking a colour scheme in WordPress is great for branding it with your company, or for clearly identifying which environment you are in and most WordPress UI elements, even Gutenberg, pick these colours up.

Another minor point is the font WordPress sidebar’s font displays slightly differently, at least in Firefox on macOS. A minor detail, but an annoying one at least.

A previous GravityForms version Form Listing showing a bunch of forms (names of which removed for client privacy reasons)

Gravity Forms 2.5 vs The Competition

This tends to align Gravity Forms with other form plugins which exist like Formidable Forms, Ninja Forms and others. These plugins make an experience which focuses on their branding and product, rather than integrating into WordPress.

Creating a branding which extends so far outside of the WordPress experience means you don’t have a consistent experience. While training clients, seeing the different look and feel has confused a few clients unnecessarily. Previously clients which were technically literate would be able to identify the use of a plugin, and the explanation of value for money by not re-inventing the wheel understood.

WPForms takes a slightly different approach as it leaves the listing page mostly alone apart from a logo, easily hideable via CSS. However, as soon as you enter the editor for WPForms it takes over the entire admin panel with it’s own editor. Most other plugins also do this whereby their editing interface feels completely alien to WordPress as a whole.

Editing Interface

The editing interface on the new GravityForms feels where most of the thought and improvements were spent. This feels a lot nicer to use as it behaves in quite a similar fashion to Gutenberg. This means explaining the concept of blocks and then taking that knowledge into forms is easier.

Gravity Forms 2.5 editing interface

However, for reasons I don’t quite understand it feels 80% like Gutenberg and the other 20% feels slightly off. Things have slightly the wrong amount of padding, or are a bit larger than they should be. I understand there was a major focus on accessibility in Gravity Forms 2.5 however it doesn’t help if only one part of a system is more accessible than the rest. Especially when you may have found how everything works well editing a post with various accessibility enhancements, to find the form system works in a different way.

Conclusion

Gravity Forms 2.5 is a fantastic update providing a lot of new functionality and updates the Form Editor which was feeling quite tired. It also doesn’t fully take over the WordPress experience when editing forms however it feels like a slipperly slope. Especially when it’s competitors have done so in various levels. In constract to helping WordPress Core be a better experience. Comments or thoughts on this, do get in touch.