To customize the CSS of WP Forms, you can use the wp_enqueue_style() function to add your own CSS file to the form. This allows you to override the default styles and apply your own customizations.
Here’s an example of how to enqueue a custom CSS file for WP Forms:
function wpsnippets_enqueue_custom_css() {
wp_enqueue_style( 'custom-wpforms-css', get_stylesheet_directory_uri() . '/custom-wpforms.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_css' );
In the code snippet above, we define a custom function wpsnippets_enqueue_custom_css() that uses the wp_enqueue_style() function to enqueue a custom CSS file named custom-wpforms.css. The get_stylesheet_directory_uri() function retrieves the URL of the current theme’s directory, and we append the file name to it.
You can place this code in your theme’s functions.php file or in a custom plugin file. Once the code is added, make sure to create the custom-wpforms.css file in your theme’s directory and add your custom CSS styles there.
This code snippet is useful when you want to customize the appearance of WP Forms by adding your own CSS styles. It allows you to override the default styles and make the forms match your website’s design.
Examples
Example 1: Customizing WP Forms CSS using a child theme
This example demonstrates how to customize the CSS of WP Forms plugin using a child theme. By creating a child theme and adding custom CSS code, you can override the default styles of WP Forms without modifying the plugin files directly.
// functions.php file in the child theme
function wpsnippets_enqueue_child_theme_styles() {
wp_enqueue_style( 'child-theme-style', get_stylesheet_directory_uri() . '/style.css', array( 'wpforms-full' ), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_child_theme_styles' );
Explanation: In this example, we enqueue a custom CSS file called style.css located in the child theme directory. The wp_enqueue_style() function is used to enqueue the stylesheet, and we specify the dependency on the wpforms-full stylesheet to ensure it loads after the WP Forms styles. By adding your custom CSS rules in the style.css file, you can override the default WP Forms styles.
Example 2: Adding custom CSS classes to WP Forms fields
This example demonstrates how to add custom CSS classes to specific fields in WP Forms. By adding custom classes, you can target specific fields with CSS and apply custom styling.
// functions.php file in the child theme
function wpsnippets_wpforms_field_css_class( $field_class, $field, $form_data ) {
if ( $field['id'] === 'your-field-id' ) {
$field_class .= ' custom-class';
}
return $field_class;
}
add_filter( 'wpforms_field_css_class', 'wpsnippets_wpforms_field_css_class', 10, 3 );
Explanation: In this example, we use the wpforms_field_css_class filter to add a custom CSS class to a specific field in WP Forms. By checking the field ID, we can target a specific field and append the custom class to the existing field classes. You can replace 'your-field-id' with the actual ID of the field you want to target, and 'custom-class' with the desired CSS class.
Example 3: Customizing WP Forms submit button
This example demonstrates how to customize the submit button in WP Forms. By modifying the button’s HTML markup and adding custom CSS, you can style the submit button according to your design requirements.
// functions.php file in the child theme
function wpsnippets_wpforms_submit_button( $button, $form_data ) {
$button = '<button class="custom-button" type="submit">' . esc_html__( 'Submit', 'text-domain' ) . '</button>';
return $button;
}
add_filter( 'wpforms_submit_button', 'wpsnippets_wpforms_submit_button', 10, 2 );
Explanation: In this example, we use the wpforms_submit_button filter to modify the HTML markup of the submit button in WP Forms. By overriding the default button markup, you can add custom CSS classes (custom-button in this case) and change the button text (Submit in this case). You can modify the HTML markup and CSS classes according to your specific styling needs.