How do I get to a specific location on page after submitting contact form?

Question

After clicking the submit button it will automatically go to the top of the page. Especially on a mobile you will not be able to see the thank you message (Thank you for your message). Below you'll find the code.

<input type="submit" id="submit" name="submit" value="Send Message">
</div><!-- end .submit -->
</form>
<?php else: ?>
<p style="font-size:13pt; font-weight:bold; font-family:Cambria, Times, 'Times New Roman', serif; color:#0F243E; margin-left:0px;">Thank you for your Message!</p>
<script type="text/javascript"> 
setTimeout('ourRedirect()', 9000)
function ourRedirect () {
location.href='../'
}
</script>
<?php endif; ?>
</div> <!-- end form -->

I have been trying all sorts of things but none of them seem to work. Does anyone have an idea? Thank you!

Answer 1

You can try using javascript to submit the form without reloading using ajax. Jquery scroll is good to go but when the form reloaded you have to find if any messages thrown then you have to point out the location.

I suggest you to use ajax form submit without reloading the page. enter link description here

Answer 2

NOTICE:

This solution shows the message instantly but submits the form only later, which may not be what you want. If the user closes the page in 9 seconds after clicking, no submit has been performed at all!

The solution to this is using AJAX, which requires way more knowledge and code than shown here.

---

If you have a

<input type="submit" id="submit" ...

it will submit the page instantly and that's not what you want.

Instead, use

<input type="button" id="submit" ...

You will see the message and it won't scroll up...

But it won't submit the form either. So use this JS instead of yours:

document.getElementById("submit").onclick = function ()
{
  // show message here, e.G. by setting "display: block"

  setTimeout(function () {
    document.getElementById("my-form").submit();
  }, 9000);
};

The <form> must have id="my-form" or any other identifier you prefer.

For more details about how to hide/show the message etc. I direct you to using something like:

<p id="message" style="display: none;" ...

and on the comment line where it says "// show message here":

document.getElementById("message").style = "display: block;";

Answer 3

Just found an easy solution myself.

Just add #thanks or any other name you want to address.

<form action="yourpage.php#thanks">

Put code below anywhere you want it to go after submitting.

<a name="thanks"></a>