Subscription form confirmation not visible

[mburridge]

If the Subscription Form block is placed further down the page (as it is at developer.wordpress.org/news) the success/failure confirmation message appears in the same place when the page is refreshed after submission. This necessitates the user having to scroll to see the confirmation message.

Ideally, on page refresh after submission:

• the page should auto-scroll to the location of the confirmation message, or
• the confirmation message should appear in a 'status bar' at the top of the screen, or
• other behaviour that makes the confirmation message obvious to the user.

In either case some JS should be enqueued that targets the .jetpack_subscription_widget .success or .error div.

[ryelle]

I've marked this "On Hold" since ideally this will be fixed in Jetpack. If the developer blog still needs some custom code this status can be removed.

[mburridge]

I don't know what kind of time scale we might be looking at to get this fixed in Jetpack. If it's going to be quite some time then I think in the interim it would be good to just have some simple JS enqueued in the developer blog that scrolls to the location of the form if either the .success or .error classes exist.

[mburridge]

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

[mburridge]

Not tested, but something like this enqueued from the theme's functions.php should do it.

let success = document.getElementsByClassName('success')
let error = document.getElementsByClassName('error')

if (success.length || error.length) {
    document.querySelector('.jetpack_subscription_widget').scrollIntoView(alignToTop)
}

[ice9js]

After looking into it a bit, it seems developer.wordpress.org might be using an outdated version of Jetpack.
Particularly, I noticed the form ID doesn't match the value in the redirect_fragment input which results in an incorrect redirect link when the form is submitted, causing the page not to focus on the form.

I believe the issues described here should already have been fixed in Automattic/jetpack#21067.

[kraftbj]

In terms of timeline, Jetpack's updates are being blocked due to some hardcoded file paths in the Plugin Directory that changed, but I hadn't spent the effort to get it resolved until now :-(.

https://github.com/WordPress/wordpress.org/pull/103 would remove the blocker so I can push forward with the Jetpack upgrade.

[ryelle]

Jetpack has been updated on WordPress.org, and the form focus issue seems to be fixed now 👍🏻

Thanks to @kraftbj and @dd32 for getting wporg updated!

[bph]

I can confirm. The subscription form is fixed.

https://user-images.githubusercontent.com/39980/199076487-9244a200-30db-4be6-abe9-72189853f8a0.mp4

Thank you to @dd32 @kraftbj @ice9js @mburridge to collaborate on the fix so fast!

[mburridge]

Tested and confirmed as working as desired. Thank you @ryelle .