Sometimes you may wish to add html elements and CSS classes to the success message of a contact 7 form, like on reword. To do this:

1. add this script to scripts.js in your theme (no need to include the script tags, but you will need a link to jQuery library, which our theme has)

<script>
 /*Because we use html in success message which is not allowed by contact 7 for security reasons, we inject a class for the success message here when mail is sent, begins*/

 document.addEventListener( 'wpcf7mailsent', function( event ) {
    jQuery('.displayQuoteFormSuccessMessageDontDisplayAtFirst').addClass('displayQuoteFormSuccessMessage');
}, false );
    
    //OR, if we need only on a given form (with its id in place of the id below (note that the ID is NOT the id in the shortcode, you must check out the html of the form and look for this "data-wpcf7-id="134". The id is thus 134:
    
    document.addEventListener( 'wpcf7mailsent', function( event ) {
   if ( '2639' == event.detail.contactFormId ) { // Sends sumissions on form 2639 to the first thank you page
    jQuery('.displayQuoteFormSuccessMessageDontDisplayAtFirst').addClass('displayQuoteFormSuccessMessage');
   }
      });
    
    
/*Because we use html in success message which is not allowed by contact 7 for security reasons, we inject a class for the success message here when mail is sent, beginsends*/
</script>

2. Then, in the Contact 7 form, where you want the success message to display, add some text with html, e.g.:

<div class="displayQuoteFormSuccessMessageDontDisplayAtFirst">
<h2>And it's off!</h2>

    <p>Thanks! As soon as your request makes it through cyberspace, we’ll give it a look. Until then, enjoy the <a href="https://www.youtube.com/watch?v=PUJfjcE2lPs" target="_blank" rel="noopener">best of Niles Crane</a>. Pound for pound, there’s never been a better TV character.</p>
</div>
<!--Because we use html in success message which is not allowed by contact 7 for security reasons, we inject a class for the success message in scripts.js in theme directory-->

3. Then add this to your CSS file: 

<style>
.generalFormWrapper .displayQuoteFormSuccessMessageDontDisplayAtFirst {
	/*Because we use html in success message which is not allowed by contact 7 for security reasons, we inject a class for the success message in scripts.js in theme directory. The success message istself is in each Contact 7 form, and is display none until the form is sent then......*/
    display: none;
}
.displayQuoteFormSuccessMessageDontDisplayAtFirst.displayQuoteFormSuccessMessage{
	/*....display it when the form sends and......*/
	display: block;
}
.wpcf7-response-output{
	border: none!important; /*don't display the contact form message area with border. Note success and failure messages go here, so we can't display it none*/
}
</style>

4. Make sure, in the Contact 7 setting for the form, that in the "Messages" tab, you have the "Sender's message was sent successfully" is blank.