How to remove Fluent Forms default CSS styling

Fluent Forms is a fairly new addition to the WordPress form plugin market, however it is quickly gaining popularity among WordPress users due to it’s slick UI, easy customization and powerful features in the free version.

I have used just about every other form plugin in the past and opted to use Fluent Forms because it feels light and less bloated than other form plugins. Another reason that I chose Fluent Forms is because it includes Mailchimp and Google reCaptcha integrations right out of the box in the free version.

Setting up a basic contact page form and newsletter form was easy and straightforward. The only limitation I ran into was that there is no option to disable the default CSS output by the plugin. This article provides the steps necessary to remove the default CSS with custom PHP code snippets that can be added to your child theme’s functions.php file or to a custom functionality plugin (recommended).

Step 1. Add the code snippet

Copy and paste the following code snippet to either a custom functionality plugin or your child theme’s functions.php file:

// Remove Fluent Forms CSS styles.
add_action( 'wp_enqueue_scripts', function () {

	// Remove Fluent Forms default CSS.
	wp_deregister_style( 'fluentform-public-default' );
	wp_dequeue_style( 'fluentform-public-default' );

	// Remove Fluent Forms main CSS.
	// wp_deregister_style( 'fluent-form-styles' );
	// wp_dequeue_style( 'fluent-form-styles' );

}, 1000 );
Code language: JavaScript (javascript)

Note: Uncomment lines 9 and 10 to remove the global plugin styles. This is not recommended but can be useful if you want full control of the form styling.

Step 2. Remove default button styles

From the WordPress admin dashboard, navigate to the form you wish to edit. Once you are on the form Editor screen, follow the steps below:

• 1. Click on the Submit button and open the settings.
• 2. Click the Input Customization tab.
• 3. Change the Button Style to Custom.
• 4. Clear all of the Color settings, including the Hover State Color settings.

Now that you have removed the default button CSS styles, the form button should inherit your theme styles.

Unfortunately there is currently no way to remove the button styling with PHP. The Fluent Forms plugin does make use of WordPress actions and filters, but the styling for the Submit button component is hard coded at the moment. I have submitted this issue to the plugin’s Github repository for the developers to take a look at, and hopefully implement a simple filter to remove button styles.

Wrapping up

Overall, Fluent Forms is an absolute gem in terms of form plugins. From the simple UI to the powerful features included in the free version, Fluent Forms is already my favorite free option, and could potentially replace all of my other form plugins for basic form functionality. If the developers were to remove jQuery as a dependency, it would become the leader in terms of performance, which is even more important to me than all of the amazing features and beautiful interface.

You can check out an example of a custom styled form on our Contact page →