In my last project I had the need of customize the messages success and fail of Contact Form 7 and after using this usel post of Isabel Castillo (Style The Response Messages For Contact Form 7) I could make it it.
Now, I want to share some changes that I made to the Isabel’s solution like a class for the email send error and another one for the inputs hints.
/** * @author: Wilhelm * WP iconset https://developer.wordpress.org/resource/dashicons/#analytics */ /* Input hint */ .wpcf7-form .wpcf7-not-valid-tip { padding-left: 2rem; } /* Error */ .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors, .wpcf7-form .wpcf7-response-output.wpcf7-spam-blocked, .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ng { color: #d8000c; background-color: #ffbaba; border: 0; padding: 10px; } /* Success */ .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok { color: #4F8A10; background-color: #dff2bf; border: 0; padding: 10px; } /* icons properties */ div.wpcf7-mail-sent-ok:before, div.wpcf7-validation-errors:before { font: 26px/30px dashicons; margin-right: 16px; vertical-align: middle; } /* WP Dashicon check icon for success */ div.wpcf7-mail-sent-ok:before { content: '\f147'; } /* WP Dashicon no icon for errors */ div.wpcf7-validation-errors:before { content: '\f158'; }
To load the Dashicons of WordPress icons in our theme I don’t use the Isabel’s solution of load the icons using the function wp_enqueue_style( ‘dashicons’ ), instead I load the Dashicons like I explained in my previous post How to use dashicons in your wordpress theme
<?php /* function.php */ //Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' );