How to create a custom popup submit message in contact form 7

When you work with Contact Form 7, you probably want to display your custom message with unique styles differ from plugin’s default style, or you want to redirect the user to another page after submitting happen.
Here is the simplest solution without using any plugin or complicated configuration!

after you create your form and add its shortcode to your page, then open your browser console and inspect form element like picture below:

get form hash with inspect element

as you see, the action attribute of the form contains a URL which data will submit there. This URL contains that page URL + hash statement. In fact, after you submit the form, the page will refresh, and a hash will bind to the address of that page (you can try it and see the browser’s address bar).

So just write this code below to your page template.

important: replace your form hash with the hash you see in code below:

if(window.location.hash == ‘#wpcf7-w243-a90-o2’){
  alert(‘your message sent successfully!’)
}

or you can redirect the user to another page with:

if(window.location.hash == ‘#wpcf7-w243-a90-o2’){
  window.location.href='/'
}

Also you may want to hide the default message box of the contact form. So add this style to your stylesheet:

div.wpcf7-mail-sent-ok{
  display:none !important;
}

enjoy it:)