WP Forms custom styling

To achieve custom styling for WP Forms, you can use the wp_enqueue_style() function to enqueue a custom CSS file. This will allow you to add your own styles to the WP Forms plugin without modifying its core files.

Here’s an example code snippet that demonstrates how to enqueue a custom CSS file for WP Forms:

function wpsnippets_enqueue_custom_styles() {
    wp_enqueue_style( 'wpforms-custom-styles', get_stylesheet_directory_uri() . '/custom-styles.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_styles' );

In the code snippet above, we define a custom function wpsnippets_enqueue_custom_styles() that uses the wp_enqueue_style() function to enqueue a custom CSS file named custom-styles.css. The get_stylesheet_directory_uri() function is used to get the URL of the current theme’s directory, and we append /custom-styles.css to it to specify the path to our custom CSS file. The array() parameter is used to specify any dependencies for the stylesheet (in this case, there are none), and '1.0' is the version number of the stylesheet.

By adding this code to your theme’s functions.php file, the custom CSS file will be loaded on the front-end, allowing you to add your own styles to WP Forms.

This code snippet can be useful in scenarios where you want to customize the appearance of WP Forms to match your website’s design or branding. By enqueuing a custom CSS file, you can easily add or modify styles without directly modifying the plugin’s files, ensuring compatibility with future updates.

Examples

Example 1: Customizing WP Forms with CSS

This example demonstrates how to customize the appearance of WP Forms using CSS. By adding custom CSS code, you can modify the styling of form elements, such as input fields, buttons, and labels, to match your website’s design.

/* Custom CSS for WP Forms */
.wpcf7 input[type="text"] {
    /* Add your custom styles here */
}

.wpcf7 input[type="submit"] {
    /* Add your custom styles here */
}

.wpcf7 label {
    /* Add your custom styles here */
}

In this code example, we target specific form elements using CSS selectors and apply custom styles to them. The .wpcf7 class is added to all WP Forms elements, allowing us to target them specifically. You can add this CSS code to your theme’s stylesheet or use a custom CSS plugin to apply the styles.

Example 2: Adding Custom Classes to WP Forms

This example demonstrates how to add custom classes to WP Forms elements. By adding custom classes, you can target specific form elements and apply custom styles or JavaScript functionality to them.

/**
 * Add custom classes to WP Forms elements
 */
function wpsnippets_add_custom_classes( $classes, $tag ) {
    if ( 'input' === $tag['name'] ) {
        $classes .= ' custom-input-class';
    }

    if ( 'submit' === $tag['name'] ) {
        $classes .= ' custom-submit-class';
    }

    return $classes;
}
add_filter( 'wpcf7_form_element_class', 'wpsnippets_add_custom_classes', 10, 2 );

In this code example, we use the wpcf7_form_element_class filter hook to add custom classes to WP Forms elements. The wpsnippets_add_custom_classes function checks the element’s tag name and appends the desired custom class to the existing classes. You can modify the function to add different classes based on your requirements.

Example 3: Customizing WP Forms Error Messages

This example demonstrates how to customize the error messages displayed by WP Forms. By modifying the default error messages, you can provide more specific instructions or styling to help users correct their form submission errors.

/**
 * Customize WP Forms error messages
 */
function wpsnippets_custom_error_messages( $error, $name, $instance ) {
    if ( 'your-name' === $name ) {
        $error = 'Please enter your full name.';
    }

    if ( 'your-email' === $name ) {
        $error = 'Please enter a valid email address.';
    }

    return $error;
}
add_filter( 'wpcf7_validation_error', 'wpsnippets_custom_error_messages', 10, 3 );

In this code example, we use the wpcf7_validation_error filter hook to customize the error messages. The wpsnippets_custom_error_messages function checks the field name and replaces the default error message with a custom message. You can modify the function to add different error messages for other form fields.