How to Change WordPress JetPack Contact Form Success Messaging

Today I ran into some ugly styling using the Contact Form that comes with the WordPress JetPack plugin. After a quick search on the world wide web I came across this post on the WordPress support forum.

It’s pretty simple to update. Click on the link for more info.

Update 6 Jun 2015: I found a more comprehensive and update-to-date how-to on modifying Jetpack styles. Check out this article.

From the first link here are the changes I made.

add_filter( 'grunion_contact_form_success_message', 'nmm_change_contact_form_success_message' );
function nmm_change_contact_form_success_message( $msg ) {
	global $contact_form_message;
	return "<h3>Hey, you're sweet! Your message has been sent. <br />We'll message you back really soon.</h3>" . wp_kses( 
		$contact_form_message, 
		array( 'br' => array(), 'blockquote' => array() )
	);
}

And from the second link here are the CSS changes I made. It’s SASSified for those who aren’t familiar with this syntax.

	#contact-form-25 {
		
		h3 {
		
			text-align: center;
			color: $site_color;
			font-weight: normal;
			font-size: 1em;
		
			a {
				
			}
			
		}
		
		blockquote {
			
			margin: 0;
			
		}
		
	}