We can use the Bootstrap modal popup and Contact form 7 Doom Events to create the popup.
add_action('wp_footer', 'munesh_Footertext');
function munesh_Footertext() {
echo '<div class="modal fade in formids" id="myModal2" role="dialog" tabindex="-1">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content no_pad text-center">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-header heading">
<h3 class="modal-title" id="MSTitle">Message Sent!</b></h3>
</div>
<div class="modal-body">
<div class="thanku_outer define_float text-center" id="MSBody">Thank you for getting in touch!
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>';
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7invalid', function( event ) {
jQuery('#MSTitle').html('Alert!');
jQuery('#MSBody').html('One or more fields have an error. Please check and try again.');
jQuery('#myModal2').modal('show'); }, false );
</script>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailfailed', function( event ) {
jQuery('#MSTitle').html('Alert!');
jQuery('#MSBody').html('There was an error trying to send your message. Please try again later.');
jQuery('#myModal2').modal('show'); }, false );
</script>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
jQuery('#MSTitle').html('Message Sent!');
jQuery('#MSBody').html('Thank you for getting in touch. We will get back to you ASAP.');
jQuery('#myModal2').modal('show'); }, false );
</script>
<style>div.wpcf7-validation-errors, div.wpcf7-acceptance-missing, div.wpcf7-response-output {display:none!important;} .modal{top:25%!important;}</style>
<?php
}
