5 Easy Ways to Disable the Gravity Forms CSS Stylesheet

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

The 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?