← Back

Style and customize the Gravity Forms wp Plugin

Learn how to easily customize your Gravity Forms powered website by visually editing each element. You'll just need to install and activate the CSSHero WordPress plugin.

About this Plugin

Gravity Forms is one of the most highly popular premium WP plugins for form creation and handling. It allows newbies and pros to build  powerful forms, embedding all different kind of widgets and elements.

It has an easy interface to configure the ultimate form for any kind of need, and handle the processing of information of single and multi-step forms.

Now, you can customize more easily the design of any form built with Gravity Forms with CSS Hero. Style and give a personal touch to your input fields, drop down selects, textareas, labels…and make your form look better.

You might be interested in doing this to achieve a tighter visual integration between the form’s styling and your site’s branding colours, or just to make it look better or more visible so you would try to maximize as much as possible the conversion rate.

Is quite incredible how someone with zero coding knowledge can design very powerful forms that follow even complex workflows, and then completely style them with CSS Hero, which gives the power to test every possible change real time.

You will be able to style your form in any possible way, customizing every CSS property of the form elements.

Gravity Forms WordPress plugin overview

Let’s go through the main features of this plugin, for those who ain’t used it yet:

Form builder  and Form Fields

You can add, by using the Form Editor, Standard Fields, Advanced Fields, Post Fields and Pricing Fields.

Standard Fields:

  • Single Line Text,
  • Paragraph Text,
  • Drop Down,
  • Number,
  • Checkboxes,
  • Multiple Choice (Radio Button),
  • Hidden Field,
  • HTML,
  • Section Break and Page Break fields.

Advanced fields:

  • Name,
  • Date,
  • Time,
  • Phone,
  • Address,
  • Website,
  • Email,
  • File Upload
  • CAPTCHA Fields

Post Fields:

  • Title,
  • Body,
  • Excerpt,
  • Tags,
  • Category,
  • Image
  • Custom Fields.

Pricing Fields:

  • Product,
  • Option,
  • Quantity,
  • Shipping,
  • Donation
  • Total Fields.

Conditional Logic

Conditional Logic allows you to configure your form showing/hiding fields, sections, pages or even the submit button based on user selections.
So, this conditional logic feature allows you to control what information your user is asked to provide on your WordPress site and tailor the form specifically to their needs.

Order Forms

With pricing fields, Gravity Forms makes it easy to create Order Forms in WordPress. Order forms can incorporate pricing specific fields to allow your users to make selections and generate a total based on product and option selections.

  • Product Fields
  • Option Fields
  • Shipping Methods
  • Total Fields
  • PayPal Add-On for Payments

Entry Management

GF save all form entries in your database.
You can easily access to the data via the WordPress Dashboard for edit or simply view.


You can configure notification emails that are sent when a form is submitted. Creating a quick automatic answer email for your submitters is very simple (like an autoresponder) as well as admin email notification setup.

Gravity Forms CSS Customization Styles & Layout

Of course, for this purpose we suggest you to edit with CSS Hero –  it will automatically integrate with Gravity Forms’ elements to allow easy point and click editing.

WordPress Integration

Obviously Gravity Forms is  seamlessly integrated with  WordPress interface.  You’ll find most important information on your Dashboard Overview, you can integrate your forms via the Embed Shortcode or via the Function Call, or simply drag them by the Widget panel control.
Read more on Gravity form Wp Integration

Useful Link: How To Target specific CSS element in Gravity Forms

If you use (or plan to use) this Plugin...

CSS Hero can help you deeply and quickly customize the Gravity Forms Plugin, solving some common issues like:

  • How to customize fonts in the Gravity Forms WordPress Plugin, to make font biggers or change typeface for titles and header texts
  • How to change CSS background image on the Gravity Forms WordPress Plugin and build background fades
  • How to change colors and styles on Gravity Forms WordPress Plugin
Plugin Author Website Visit Plugin Page

User Feedbacks