How to get a form to come back to the same part of the page

[mrmbarnes]

Hi All

I am using Bootstrap 4 and have a sticky top nav so that the top info is always there.

I am making the contact page for a website… when you submit it does some error checking and gives errors if needed and once the form is submitted it is replaced with a success message.

On a computer this works fine as the form is fully visible on the screen… on a pad it also seems ok as you can see the form when you load the page… it is not great but it is ok… the main issue is on a mobile… to get to the form you have to scroll through 3 other sections.

On a mobile when you submit the form you are taken back to the top of the page and have to scroll and scroll to find the form again… it is very confusing for a user… if there are errors the user might not realise as they will not see them unless they scroll down.

I have tried to submit the form to #contactform and adding an ID div to the correct part of the page… this sort of works… the issue with it is that the ID is at the top of the screen and part of the form is hidden under the nav and it looks terrible.

I thought of just moving the ID up and that worked on the phone but stuffs up the pad and computer.

Do you have any suggestions on how I can get the user back to the top of the form for all platforms?

Thanks for any help.

mrmbarnes

[PaulOB]

If the page is a simple design and you have a fixed height nav (or you can ascertain the height within certain media queries) you could place the fragment identifier target xxpx above the form which will then account for the height of the nav.

It means using an extra element and does require the height of the nav to be available. Here’s an old codepen I did in answer to another question a few years back.

I suppose the other solution would be to update the page with ajax without refreshing the page as such but is a programming task rather than a simple fix.

Note that fixed headers are always a pain to account for and should be used sparingly. Dynamically added sticky headers that only appear when you start to scroll back are probably a better option as they leave the page clear until scrolling back is activated and thus avoiding the problem with fragment identifiers.