Categories
Plugins WordPress

5 Easy Ways to Disable the Gravity Forms CSS Stylesheet

Pliers

We can do this the easy way or the hard way. What’ll it be?

The WordPress form plugin Gravity Forms (if you don’t use it, you should — it’s great) comes with a stylesheet found at [plugin-directory]/plugins/gravityforms/css/forms.css. SEODenver.com’s is found here.

If you want to turn off styles for Gravity Forms, there are a few different ways. Here are five examples of how to turn off CSS for the form plugin.

Gravity Forms does allow you to turn off styles on all pages.

1. Turn off the Gravity Forms stylesheet for all forms on all pages

Gravity Forms Output CSS OptionThe first method of turning off Gravity Forms CSS is also the easiest: if you want to disable styles for all forms, go to your website’s Gravity Forms settings page (found at http://www.[yourwebsite.com]/wp-admin/admin.php?page=gf_settings). There you will choose “No” for the Output CSS option and save your settings. Done.

Turn off Gravity Forms CSS on a per-page basis

To turn off the Gravity Forms forms.css CSS file on a conditional basis, we’re going to have to get a little more complicated.

We are going to “dequeue” the GF style using wp_dequeue_style, a function to be added to WordPress 3.1 (finally!). You can use lots of conditional logic to make sure that only the specific page the form is on is affected.

Make sure to add this code first!

You will need to edit your theme’s functions.php file and add the following, otherwise the examples will not work:

// This will be added in WordPress 3.1
if(!function_exists('wp_dequeue_style')) {
	function wp_dequeue_style( $handle ) {
	    global $wp_styles;
	    if ( !is_a($wp_styles, 'WP_Styles') )
	        $wp_styles = new WP_Styles();

	    $wp_styles->dequeue( $handle );
	}
}

Now we are ready for some examples

If you need to make sure that the form that is replaced is only a specific form — and on a specific page! — we can get more…specific. In the examples below, we’ll cover the bases with how to remove Gravity Forms CSS from pages.

2. Remove Gravity Forms styles on all posts & pages

function remove_gravityforms_style() {
	wp_dequeue_style('gforms_css');
}
add_action('wp_print_styles', 'remove_gravityforms_style');

3. Remove Gravity Forms styles on post/page ID 2

function remove_gravityforms_style() {
	if(is_single('2')) {
		wp_dequeue_style('gforms_css');
	}
}
add_action('wp_print_styles', 'remove_gravityforms_style');

4. Remove styles on post or page ID 2 that contains a form with ID of 3:

function remove_gravityforms_style() {
	global $post;
	// If the content contains Form ID 3, remove styles
	if(is_single('2') && preg_match('/[gravityform(.*?)id=3(.*?)]/', $post->post_content, $matches)) {
		wp_dequeue_style('gforms_css');
	}
}

5. Remove styles on all posts with a custom field of GFRemoveStyle

If you want to simply add a custom field that will force the removal of styles from that page, you can use the following code (again, in your theme’s functions.php file):

function remove_gravityforms_style() {
	global $post;
	if(get_post_meta($post->ID, 'GFRemoveStyle', true)) {
		wp_dequeue_style('gforms_css');
	}
}
add_action('wp_print_styles', 'remove_gravityforms_style');

Once you’ve done that, you can now just add a custom field named “GFRemoveStyle” with any value you want, and the Gravity Forms stylesheet won’t load.

Take these examples and run with them.

You can use the examples above with any of the WordPress Conditional Tags, giving this tutorial endless possibilities.

Any questions?

By Zack Katz

Zack Katz is the founder of GravityKit and TrustedLogin. He lives in Leverett, Massachusetts with his wife Juniper.

7 replies on “5 Easy Ways to Disable the Gravity Forms CSS Stylesheet”

Once I turn off Gravity Forms’ CSS how do I get my theme’s CSS to define the look of my form fields? I am really new to WordPress and CSS and I am trying to figure this out. Unfortunately everything that I have read so far that explains how to do this is a little more advanced than I can currently follow. Can you help a newbie out?

As of WordPress 3.3, wp_enqueue_style can be called mid-page, which makes the style load in the footer. At least current GF (1.6.12) does exactly that when you call form in a template using a shortcode. Dequeueing in wp_print_styles therefore won’t work, because the style isn’t queued yet.

Moving wp_dequeue_style() call to wp_footer action works here.

The only theme that works perfectly with gravity form is TwentyTwelve which is default wordpress theme. I am scratching my head on how to get my other theme to just adopt TwentyTwelve’s css and only apply it for gravity form.

This method is outdated, from the official website https://docs.gravityforms.com/gform_enqueue_scripts/#2-dequeue-stylesheets :

Dequeue Stylesheets
This example shows how you can dequeue the stylesheets for a specific form.

add_action( ‘gform_enqueue_scripts_1’, ‘dequeue_gf_stylesheets’, 11 );
function dequeue_gf_stylesheets() {
wp_dequeue_style( ‘gforms_reset_css’ );
wp_dequeue_style( ‘gforms_datepicker_css’ );
wp_dequeue_style( ‘gforms_formsmain_css’ );
wp_dequeue_style( ‘gforms_ready_class_css’ );
wp_dequeue_style( ‘gforms_browsers_css’ );
}

Comments are closed.