Contact Form 7 – Large Space After Submit

I’ve added Contact Form 7 to the “Contact Us” page and several other pages. Everything looks good and the spacing is normal. However, when I click on the SUBMIT button and get notified about any errors, a large empty space is inserted at the top of the form. This happens on all the Contact Form 7 pages after the SUBMIT button is used. Do you know how I can stop this large empty space from appearing?

I’ve attached a before and after screenshot to show you what I mean.

Attachments:

You must be logged in to view attached files.

Hello,

Please make the full backup of your site and check the issue on the Storefront theme to detect if our theme causes the problem. Storefront is a free theme developed by WooСommerce.

Best Regards

Hi There,

I made a full backup of the site and tested this issue with the Storefront theme, as per your request.

This issue is ONLY happening in the WoodMart theme, and not in the Storefront theme.

I’ve attached two screenshots from the Storefront theme (one before pressing the Submit button; and one after pressing the Submit button) and you will notice the large space does not appear after pressing the Submit button in the Storefront theme.

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

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

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

Hello,

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.

Best Regards

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.

Attachments:

You must be logged in to view attached files.

Hello,

Please check this tutorial: https://wpbakery.com/video-academy/insert-inner-row-wpbakery-page-builder-wordpress/

The problem is caused by incorrect rows and columns arrangement.

Best Regards

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/

Attachments:

You must be logged in to view attached files.

Hello,

We are glad you have solved the issue.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts