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' );
