Contact Form 7 – Large Space After Submit

Here are the screenshots from my last message (they were too large in the last message)…

I’ve provided the site admin access link below in the private content area.
Thanks

I’m sorry but your instructions were confusing and they didn’t seem to have any effect.

In your instructions, you said:
**********************************************
“Your row is configured as full-height. You would better insert the inner row as shown: https://gyazo.com/96720c7d89a5092764d1a2db30c64a96
Then make the wrapping row full-height and the inner row default height.”
**********************************************

I don’t know what you mean by “wrapping row”.

There are only two rows on the CONTACT US page.

There is an “outer row” – which I think is what you mean by “wrapping row”

And there is an “inner row”

If the “outer row” is the same as the “wrapping row”, then it is already set to full-height.

Furthermore, the outer row is the ONLY row that has a full-height setting (and there is no full-height setting for the inner row).

Nonetheless, I disabled the original rows on the CONTACT US page and tried to build a new one from scratch using your video. After trying to follow your instructions, the outer row or wrapping row was once again set to full-height (because it is the only row that has a full-height setting) and the inner row was kept on its default height (since it has no full-height setting). But as you can see in Screenshot 1, this didn’t fix the problem. A large space still appears after you hit the SUBMIT button.

I’m not sure that “full-height” has anything to do with it. Because if you click on the ASK A QUESTION button (in the middle of the header), a popup will appear with another contact form. And if you click on the SUBMIT button in that popup, another large empty space will appear. And in the settings for the popup form, the full-height setting was never used in the row, but the large empty space still appears in the popup (see Screenshot 2).

You are more than welcome to go back into the site and test your settings on the new row configuration that I created (since the original row has been disabled). You might find that the full-height setting has nothing to do with the large empty space that appears after the SUBMIT button is pressed.

I figured out what the problem is…

If the contact form has empty fields and you click on the SUBMIT button, a “screen reader response” will appear and it will say:
*****************************************
One or more fields have an error. Please check and try again.
– Please fill out this field.
– Please fill out this field.
– Please fill out this field.
*****************************************
And these lines of text are what is causing the empty space.

The issue is that the text is the same color of blue as the blue background, which is why you cannot see it.

I had the same problem before, where the field labels were not visible, so we added the following CSS to change the color of the field labels to white text:
*****************************************
#wpcf7-f7025-p7034-o2 form.wpcf7-form p label {
color: #f2f2f2;
}
****************************************

So I did my best to create CSS that will change the “screen reader response” text to white, but it is not working properly. Can you please tell me what is wrong with this CSS?
****************************************
#wpcf7-f7025-p7034-o3 form.wpcf7-form p screen-reader-response {
color: #f2f2f2;
}
*****************************************

If you need to see this issue, or inspect the screen reader response, you can see it at the bottom of the CONTACT US page (I added a contact form without the blue background, so if you click on the SUBMIT button at the bottom of the page, you will see the “screen reader response” appear in the default blue letters).

https://it-specialists.ca/contact-us/