Contact Form on single page website

programming
1

Hello there. I have a website that is just a single page with the contact form at the very bottom. The contact form uses PHP and jQuery field validation. My issue is, when I submit a message from the contact form the page reloads and goes back to the top. You have to scroll all the way back down to the bottom in order to see the “Message Sent” confirmation. Anyone know of a way to keep the page in the same location when the Submit function takes place?

2

Hi junkerjorg - do you have a link to your contact form? One way is by listening for the submit button press and setting either a “return false” or event.preventDefault() call. We are basically trying to override the default form behavior when a submission happens.

3

www.controlsystemservices.com

5

I added onsubmit=“return false”; to my form and it completely stopped functioning

6

Sorry. I think I made a mistake by suggesting return false. The preventDefault approach is what you need. I tested this out with the following example: https://www.kirupa.com/html5/examples/contactform_test.htm

The code for both the form and the JavaScript looks as follows:

<form id="contactForm" method="POST">
	<div>
		<p>Name</p>
		<input name="name" type="text"> <br> </div>
	<div>
		<p>E-Mail (Optional)</p>
		<input name="email" type="text">
	<br>
	</div>
	<div>
		<p>Comment</p>
		<textarea cols="30" name="comment" rows="9"></textarea> 
		<br> </div>
	<div>
		<input name="submit" type="submit" value="Send!"> </div>
</form>
  
<script>
  var theForm = document.querySelector("#contactForm");
  theForm.addEventListener("submit", handleSubmit, false);

  function handleSubmit(e) {
    e.preventDefault();
  }
</script>

Notice that I listen for the submit event on the form and then call preventDefault in the event handler for that event. Let me know if you have any questions.

Cheers,
Kirupa

7

Semi-off-topic, but: I’ve never really understood why or when return false vs. e.preventDefault() was more appropriate. I vaguely assume it has to do with the age of the API / spec.

AS3 had isDefaultPrevented(), stopPropagation() and stopImmediatePropagation()… which doesn’t help me surf through API name soup in my brain. =)

1 Like
8

This explanation seems to answer it: https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false?rq=1

I had to read it a few times for it to make sense haha.

9

Ah, that especially makes sense given the timeline. If I spent 2-3 years using AS3 in ~2006, then jQuery had its heyday a few years later, then regular JS/DOM had its heyday a few years later, I might have been toggling back-and-forth between recommended approaches for 7-10 years.

Good times.

1 Like
10

So I added the code like this and the form will not send at all. I tried to paste the code here but it didn’t show up when posted so I’ve attached a file instead.

formExample.php (1.5 KB)

11

This one might be a more concise explanation of the two:

12

Just wondering if doing the following effects what you desire:

  1. Remove the following code:
        <script>
  var myForm = document.querySelector("#form");
  myForm.addEventListener("submit", handleSubmit, false);
  
  function handleSubmit(e) {
  	e.preventDefault();
  }
  </script>
  1. Replace the following code:
        <form id="form" method="post" action="<?php echo $_SERVER['js/PHP_SELF']; ?>"novalidate>

with the following:

        <form id="form" method="post" onsubmit="window.scrollTo(0, document.body.scrollHeight);" action="<?php echo $_SERVER['js/PHP_SELF']; ?>"novalidate>

?

13

The scrolling up happens as a result of the page refreshing when the form is submitted. The code you posted will probably work for a microsecond but lose track when the page is refreshed. I could be wrong though.

Also, I am surprised the preventDefault approach isn’t working, for that is one common way to solve this. This is the approach I used to stop the default behavior in this tutorial: https://www.kirupa.com/react/simple_todo_app_react.htm

14

That visibly worked for a second. The page actually held there long enough to start to see the confirmation and then it reloaded back to the top.

15

Excellent; now the user can see the confirmation so you’re all set :grinning: (obviously, it’s not a total solution).

16

Well not exactly :neutral_face: you just start to see the confirmation load and it’s gone. Not long enough to read it. I need to get about 5 more seconds out of it and then it’ll be fine. :smile:

17

Ok, I have taken an entirely new approach to this by creating a popup contact form using js. What I don’t know how to do is get the js to submit the contact form data to email. Can someone help?

  $('#contactform').submit(function() {
    var name = $('#name').val();
    var email = $('#email').val();
    var message = $('#message').val();
    var human = $('#human:checked').val();

    if (human) {
      if (validateEmail(email)) {
        if (name) {
          if (message) {
18

Can you paste your full contact form markup?

19

Kirupa , I actually got help using an Ajax event to send the form data. A huge thanks to Harry Finn for taking the time to help me out!

1 Like