Mobile: "Success" message not visible in viewport after form submission

Design help General
1

Hi,

Has anyone come across a good way to scroll to the “Success” message after submitting long forms on mobile?

1 Like
2

Hi @biodust

I’m not sure if i get your question, might miss something here :smiley:
Can you detail, or share something please to show me what kind of issues you are experimenting with long forms on mobile ?

3

Thanks for answering, @zbrah. If you launch this page on mobile you will see the long form.
http://klinikk-groruddalen.webflow.io/kontakt

When submitting form, viewport position stays the same, but when form is hidden for “success”, you have to scroll up again to see the “success” message. This is not so intuitive for users, that might be wondering if form is sent or not. It would be cool to automatically scroll up to the “success” message, or be able to display it in the viewport.
“Error” message is not a problem, cause form stays visible when message is displayed.

1 Like
4

Paste this in Page Settings > Footer Code, and publish

<script>
$('form').submit(function() {
  $('html,body').animate({ scrollTop: $(this).offset().top });
});
</script>

Replace $(this).offset().top with 0 if you want to scroll to the top of the page.

9 Likes
5

This worked perfect. Thanks, @samliew.

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.