Umbraco Forms: How do I keep the scroll position on form submit to see thanks?

Questions
1

Hiya
It’s been a while since I have used Umbraco Forms.

I have a form on the page that is quite far down on the page, the client does not want to navigate to a new page with a thank you message on it, but display the thanks message.

Currently the form submits and the message is visible, however the page is scrolled to the top and thus not visible to the user submitting the form.

How do people normally solve this?

Thanks :smiling_face_with_three_hearts:

2

Hi @warren

The default theme rolls out with a “ScrollToFormScript” which you could use as an example, you can retrieve the default themes from the docs here Themes | 13.latest (LTS) | Umbraco Forms and the umbraco form js script “should” handle the rest.

The code is fairly simple to implment and basically is just a check to see if the form is submitted and renders a bit of html to trigger a JS event to do the scroll so you could implement your own if doing something more custom. For example:

@if (!ViewData.ModelState.IsValid || Model.SubmitHandled || Model.PageHandled)
{
    <div id="umbraco-forms-form-submitted" data-form-client-id="@Model.FormClientId" class="umbraco-forms-hidden"></div>
}
3

Thanks I will take a look next week, when I switch back to that project/client. If its out of the box, I have probably messed something up then.

1 Like