Contact Form 7 Not Showing Success Message

Hi Joseph G,

Well, I thought I was home free, but it was pointed out to me that after putting this code in, although it fixed the contact form problem it created another one. The menu bar no longer shows a sub menu item, and in mobile view the menu bar does not work at all.

I assumed a jQuery conflict of some sort, so I moved the code to a code block on the contact page. That fixed the menu problem for all other pages except the contact page.

Any ideas for how I can track down where the conflict may be so I can get the menu to work on the contact page as well? I know this is a bit outside the original post request, but if you have any ideas I am open to them.

Thanks,
Gary

• This reply was modified 6 years, 5 months ago by garyrw.

Yes, check your code… maybe when you moved it you pasted twice, like I did!

You have “more” code than need be there… it’s repeating and that’s throwing a jquery error, which can take other parts of a site down as well.

    var wpcf7Elm = document.querySelector( '.wpcf7' );

    wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
        $('.submit-success').fadeIn();
        setTimeout( function() {
            $('.submit-success').fadeOut();
        },5000);
    }, false );ener( 'wpcf7mailsent', function( event ) {
        $('.submit-success').fadeIn();
        setTimeout( function() {
            $('.submit-success').fadeOut();
        },5000);
    }, false );

That is what you have, so you can see… “too much”. ??

OK, but here’s the kicker. I got rid of the ‘more code’ and now have this:

<script>
jQuery(function($) {

    var wpcf7Elm = document.querySelector( '.wpcf7' );

    wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
        $('.submit-success').fadeIn();
        setTimeout( function() {
            $('.submit-success').fadeOut();
        },5000);
    }, false );

})
</script>

And now the contact form no longer works! Go figure…

• This reply was modified 6 years, 5 months ago by garyrw.

Perhaps you should try to completely remove the code, if you have it set up differently. Maybe it will work without the xtra code now! ??

I don’t see any console log errors that are related to this code, if it’s all setup right this time. I do see another error on submission though (404 on the :https://iracearchitecture.com/wp/index.php/contact/ site). Not sure why it’s doing that now.

Sorry, not sure without jumping into it more myself.

A lot of fun you are having with this one!

Are you all using the [response] tag?

All this nonsense done and after last comment no one even take resposibilty, to comment that this guy comment very correct answer to this query. All this happen because no one tutorial, no one user guide section mentioned you have to use [response] tag to get the success message on contact 7 form.

In my case, I just add the following code in the header.php file within the head tag and [response] tag in contact-form and it is resolved for me.

<script>
jQuery(function($) {

wpcf7Elm.addEventListener( ‘wpcf7mailsent’, function( event ) {
$(‘.submit-success’).fadeIn();
setTimeout( function() {
$(‘.submit-success’).fadeOut();
},5000);
}, false );

})
</script>

Thanks all of you!

@amymankar i done that you said, put [response] after the form code and put that script in the header.php of the theme, and the “send confirmation” doesnt appear… emails sends correctly but the spinner just keeps runing and message confirmation doesnt shows… help please… thank you!!!

Hi guys,
I’m looking for a help. “Message Sent!” doesn’t appear. I can see only a empty green banner but nothing is shown like “Message Sent Successfully”.
How can i solve?
Is there anibody for a help ..Step to step?!

Hi,

Can you just point out what is causing the error in the first place?? Adding extra script usually creates more problems and in the future might even break.

I’d like to have a working contact form, without having to add any extra fixing code!!!

Hi again,

I was able to fix my problem by going in settings-> permalinks and choose a different option, saved it and switched back to the original selection. It apparently reset some htaccess code (that i don’t really understand) and the contact form 7 is now giving a feedback once again.

Hope it helps!

I solve in this way…

adding <h3>[response]</h3> in the form code.

I had the same issue.

email was sent, but wheel kept spinning and no message that said my email was sent.

When I deactivated the “CF7 customizer”-plugin it worked again.

I had same issue and it was because we disabled JSON REST calls by a security plugin. After enabling it “Sent Successfully” message showed up. just FYI.