Form position after submit

When this plugin is enabled, after the user submits the form, and the page is reloaded, instead of the form remaining in the same position, it starts from the top of the form, which hides the message that tells the user it was successful, or if there was an error. Because it is a long form, displaying it from the top hides the bottom. I started this thread over on the Contact Form 7 forum, not realizing it was this plugin that was doing it, so I’m copying the information to here.

I have a long form. After I click submit, the page scrolls up so that the Response Message Box is no longer visible, so the user doesn’t see the message “Thank you for your message. It has been sent.” or the error message if there is one. It doesn’t scroll all the way to the top, so I can’t reposition the message box there. It scrolls about midway, so that top of the page is not visible, and neither is the bottom where the success or error message is. Is this normal behavior, or does it normally stay in the same position after the submission?

I noticed that after submission, the id “#wpcf7-f4851-p4853-o1” is added to the page’s address. Is that what’s making it reposition? If so, why? 4851 is the number of the form, 4853 is the page’s number, although I’m using pretty permalinks.

So, my address changes from https://www.mysite.com/testwp2/membership/free-membership/ to https://www.mysite.com/testwp2/membership/free-membership/#wpcf7-f4851-p4853-o1 (“mysite” is not the actual name).

So, in looking at the source code of the page, I see where it has created an anchor tag that is used to redirect (see the form action statement). It’s just that it puts it in a place that forces the page to reposition so the message box cannot be seen. This source code is taken from Chrome, although the problem exists in Firefox.

<div role=”form” class=”wpcf7″ id=”wpcf7-f4851-p4853-o1″ lang=”en-US” dir=”ltr”>
<div class=”screen-reader-response”></div>
<form action=”/testwp2/membership/free-membership/#wpcf7-f4851-p4853-o1″ method=”post” class=”wpcf7-form” novalidate=”novalidate”>
<div style=”display: none;”>
<input type=”hidden” name=”_wpcf7″ value=”4851″ />
<input type=”hidden” name=”_wpcf7_version” value=”5.0.2″ />
<input type=”hidden” name=”_wpcf7_locale” value=”en_US” />
<input type=”hidden” name=”_wpcf7_unit_tag” value=”wpcf7-f4851-p4853-o1″ />
<input type=”hidden” name=”_wpcf7_container_post” value=”4853″ />
<input type=”hidden” name=”_wpcf7cf_hidden_group_fields” value=”” />
<input type=”hidden” name=”_wpcf7cf_hidden_groups” value=”” />
<input type=”hidden” name=”_wpcf7cf_visible_groups” value=”” />
<input type=”hidden” name=”_wpcf7cf_options” value=”{“form_id”:4851,”conditions”:[],”settings”:false}” />
</div>

This code is in the page above the code for the form.

It seems that the anchor id created starts at the top of the form and this is what moves the page up. I don’t know if it’s your code, or that of cf7. Do you?