Server error handling: no error message is displayed

When a contact form is submitted and an error such as a server timeout occurs, no error message is displayed on the page.

In version 5.3.2, in the file “/wp-content/plugins/contact-form-7/includes/js/scripts.js”, on line 295, the plugin makes an Ajax request to the server to submit the contact form. That Ajax request has the following code to handle errors from the server:

.fail( function( xhr, status, error ) {
var $e = $( ‘<div class=”ajax-error”></div>’ ).text( error.message );
$form.after( $e );
} );

The problem is that “error.message” is empty, so no text is inserted into the new div. Also, the new div is hidden because the class “ajax-error” is set to “display:none”. The result is that the user clicks the submit button and just sees the spinning “loading” indicator, but nothing ever changes and no error is displayed.

I would also suggest that instead of appending the new div after the form, that it be displayed somewhere above the submit button because it’s quite easy to not see the error unless you scroll further down. It would also be good if the error text was in red. The loading image should also be hidden.

Thanks,
Russell