Scroll to success message after successful submission (multistep)

[pwkip]

It would be nice if the success message is always scrolled into view automatically after a successful form submission. This is feature that CF7 seems to lack, and it's not super annoying. But, with multistep it can become truly irritating. If for example the first step of you form has a lot of fields, and you submit the form, the form will move back to the first step and scroll back to the top of the form, thus hiding the success message completely.

I will address this issue by always scrolling the success message into view. This will also affect forms that do not contain steps or conditional logic, but I don't see a problem with that.

[Nolanus]

Hi @pwkip,
we're having problems with unwanted scrolls since the last release, probably due to this change. After the form has been loaded, the browser scrolls to the .wpcf7-response-output area. As this area is below the form, the actual form is not visible to the user.

WPCF7 calls reset on the form during the init process: https://github.com/takayukister/contact-form-7/blob/master/includes/js/src/init.js#L41

Conditional fields plugin listens for that event and triggers the scroll to the output area: https://github.com/pwkip/contact-form-7-conditional-fields/blob/master/js/scripts.js#L370

[pwkip]

I'm having trouble reproducing this. Not sure what wpcf7.cached is supposed to mean, but I guess in my testing environment this value is always false. I'll release a quick fix by adding the wpcf7.cached check to my own code. Hope that will fix it.

[pwkip]

Seems to be related to the presence of define('WP_CACHE', true) in wp_config.php. After adding this variable I see that wpcf7.cached returns '1', and so the scrollIntoView() method is indeed called. However, is seems like scollIntoView() only has an effect on visible elements, but when WPCF7 is initiated, .wpcf7-response-output has the CSS property display:none; so nothing happens.
Would be interested to see a live example of the problem you are describing.

[Nolanus]

Hi,
thanks for pointing into the right direction. Our theme indeed set the display property, resulting in the .wpcf7-response-output area to be displayed (which doesn't hurt, as it's empty) and resulting in the scroll to happen. I adjusted the css to not override it when the form is in init, resetting or submitting state.

Maybe adjusting the selector in conditional-fields plugin is an idea? It could only trigger scrollIntoView when the response-output is not intended to be displayed anyway (according to the wpcf7 default style: https://github.com/takayukister/contact-form-7/blob/master/includes/css/styles.css#L20-L24). This way we do not depend on certain styling rules to be applied/not overridden but rather take the actual form state into account.

[pwkip]

Right, I'll add an extra check in the next update. Thanks again for pointing out the issue.

[benjaminpick]

Please make this behaviour optional - as it currently modifies the behavior of all cf7 forms even when conditional forms are not being used. Also, I don't like that, as it scrolls the message to the top of the viewport, the form itself is not on screen anymore.

Or, maybe I was surprised / annoyed by this behaviour because it scrolls down even when the messange would have been visible (in the viewport) anyway.

So this might be a more sane behavior:

if (not in viewport) {
scroll until it fully visible (at the bottom of the viewport? or scrolling up / down until fully visible, but not more?)
}

[pwkip]

@benjaminpick noted. I like you final solution. reopening this issue.

[pwkip]

@benjaminpick In version 2.1.1 of the plugin the page will scroll until the success message is into view, but no further. Please update and let me know what you think.

[benjaminpick]

Works well for me. @Nolanus can you verify as well please?