Contact-form-7 from Wordpress: no success message displayed

Question

I am using contact form 7 (version 3.8.1) with Wordpress 3.9.1, and I can't make the "successfully sent" message appear (or any other message). However, the message is sent successfully.I researched about this topic, but everything I found were posts from 3 years ago, so they were using older versions and it didn't help me. I would like to know if there is any possibility to make it work, or which alternatives I have to this free plugin.

Answer 1

Same things happened to me with contact form 7 which did not display a success message after clicking on the send button. Just add below code at the top or in the contact form 7 at the section -> FROM Code Is

<h3>[response]</h3>  

You can replace the <h3> tag by your choice!

Answer 2

Just had this issue. The problem was incorrectly closed div tags, which resulted in no success or failure messages. Be sure to validate your HTML.

Answer 3

The "successfully sent" message is loaded via jQuery, and it sounds like there is a jQuery or Javascript conflict with the theme and other scripts that are loading.

Use Firebug with Firefox, or use the developer tools in Chrome or Safari or IE to see what Javascript is loading on your site. Send yourself an email and see what errors you get.

Answer 4

If you're using any scripting in the "Additional Settings" section, try removing and retesting. I have encountered Javascript conflicts if those functions are invalid.

For example, it is common to use the on_sent_ok hook to trigger events, but the hook needs to be compatible with the version of the Google Analytics tracking code on your site.

Answer 5

Mark3000 has already shed light on it. Check if you have tied your form to Google Analytics goals - meaning if the form is sent you see it as a conversion in GA. You do that by placing a code in Additional Settings tab of Contact Form 7 (hook on_sent_ok mentioned by Mark3000).

Now the problem is that you may have Google Analytics code removed for wp admins, not to have GA recording your visits (admin visits) as external traffic on your website. You remove the GA for admins in almost all plugins for SEO (All In One SEO, Yoast, Monster etc.). And when there is no GA script on the site the success message will simply not be triggered - that's the secret.

To look it up you may try to open the page with your form in the incognito/private mode and see if you get the success message to show up.

I've solved the riddle thanks to chaddosan answer in the following thread in wordpress.org forum https://wordpress.org/support/topic/contact-form-7-not-displaying-sent-message/

PS. By the way Contact Form 7 author has deprecated the on_sent_ok https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

Answer 6

After a visitor of your blog submits the contact form, the visitor sees a response message from Contact Form 7, such as “Your message was sent successfully” or “Validation errors occurred.” I sometimes hear from users who tell me that the position of the response message is not good, and, in fact, sometimes their visitors miss the message entirely.

The response message is shown at the bottom of the form by default. You can change the location by putting a response message placeholder [response] inside the form. You can insert this [response] tag into any place of your choice. You can use it multiple times in a form. The response message will be shown within the placeholder after submission.

Answer 7

For me, it was solved by disabling js optimization at the autooptimize plugin.

Answer 8

This issue is actually a non-issue. If you are logged in as an admin to the WordPress dashboard, the success message doesn't show, though all functionality works. If you logoff the admin user for that WordPress site, the success message will automagically start working.

Answer 9

I have found that the issue may be attributed to some basic settings that some admins may or may not have checked that pertain to the latest version of Contact Form 7.

1. One thing to check is that the id= attribute to the shortcode can be checked to verify that the page with the form is using the correct contact form that you are intending to use in Contact Form 7. In my case it is on my Front Page of a very good theme called Mesmerize. If you import the "Personal" site import, you get a popup that says you should install Contact Form 7 and enable it if you want all the features of the imported page to work (i.e. the contact form at the bottom of the page).

So, the first thing I found was that the theme import called "Personal" was not using the correct shortcode for the default contact form in Contact Form 7 plugin and I found that the only difference was the id= instantiation. In the settings for the Contact Form 7 form it was alluding to use this shortcode:

[contact-form-7 id="9" title="Contact form 1"]

and in the Theme Customization for the form it showed the 3rd Party Form Shortcode as a different id="#". After using the shortcode from Contact Form 7's form that fixed any issue where my published form was using the incorrect form id.

2. Then I added the tag for the response or "success" notifications to appear in the same form box by using the before mentioned fix of adding this tag to the top of my form code:

   [response]

Hence my form code near the top looked like this after adding it:

[response]

<label> Your name
    [text* your-name] </label>

This allowed a box to appear after submission of a form that has a green outline to the box but no words were visible, however after inspecting it in Chrome, I found the words were there but were in a font color of white. Against my white background they were invisible. Highlighting the inside of the box with my mouse revealed that the problem now was simply to change the color of the response text and this is done by editing the theme's "Additional CSS" section to make the word's visible.

In your WP admin Dashboard menu on the left side of the screen, mouse over Appearance menu (left side).

Click on Customize. On the left side scroll down to the Customize menu titled "General Settings" and click it.

Now click on Additional CSS.

Enter this code into the window provided for additional CSS code:

#wpcf7-f711-p302-o1 > form > div.wpcf7-response-output {
color: black!important;
}

Click on Publish and your site is fixed.

I will admit the issue was frustrating but a simple fix was the one that revealed the issue. Some themes or default settings of the two brought a lack of the response in Contact Forms 7, fixing that, and doing some quality assurance between my theme and my form fixed the id instantiation issue, then the styling that made the text visible is what gave the full fix in my case. I hope this helps someone. Here are the various web apps and versions of the entire platform that I believe were pertinent to the issue:

PHP version 7.4 WordPress version: 5.7.1 Mesmerize Theme Version: 1.6.106 Autoptimize Version 2.8.3 (required by Mesmerize Theme) Contact Form 7 Version 5.4 Mesmerize Companion version (1.6.122) (required by Mesmerize Theme) WPForms Lite Version 1.6.6

Cheers!

Answer 10

The help reply line of Disable all other plugins and switch to default theme is well worn-out, but still should be one of your first approaches towards debugging the issue. I've found that in about 90% of the cases, it is due to a conflict with another plugin or theme.

Another helpful debugging tool is to hook out the after send call, like so:

add_action('wpcf7_mail_sent', 'my_custom_mail_sent' );
 
 function my_custom_mail_sent( $contact_form ){
    // to get form id
    $form_id = $contact_form->id();
    // to get submission data
    // $submission = WPCF7_Submission::get_instance(); 
    //$posted_data = $submission->get_posted_data();
 }