Contact Form Thank You Top of Page

Question

I have a contact form that is fully functional and displays a "Thank You" message when submitting. The only problem is that the thank you message displays above the form so it's not obvious that the message was sent when the user clicks it.

My form is here:

http://impressify.co/business-writing.php

How do I make it so that when I click the submit button the page scrolls to the top and then displays the contact message? I wan't to make it obvious to the user that the message was sent successfully.

My code is below:

 <?



 if($_SERVER['REQUEST_METHOD'] == "POST")  {                                                            
     $allowedExts = array("gif", "jpeg", "jpg", "png", "doc", "pdf", "docx",         
 "jpg", "docx", "odt", "txt", "msg", "csv", "pps", "ppt", "pptx", "xml", 
 "tar", "m4a", "mp3", "wav", "wma", "mp4", "mov", "flv", "exe");


      for ($i = 1; $i <= 2; $i++) {
          $temp = explode(".", $_FILES["attach".$i]["name"]);
          $extension = end($temp);
          if (in_array($extension, $allowedExts)) {
              move_uploaded_file($_FILES["attach".$i]["tmp_name"],
  "upload/" .$_POST["firstname"]."-".$_FILES["attach".$i]["name"]);
          }
      }

      $to = 'myemail@gmail.com';
      $subject = 'Business Writing Request from      
  '.$_POST["firstname"].$_POST["email"];
      $message = $_POST["message"]."\n\n\n Attachments: ".$_FILES["attach1"]  
  ["firstname"]." ".$_FILES["attach2"]["firstname"]." 
  ".$_FILES["attach3"]["firstname"];
      $firstname=$_REQUEST['firstname'];
      $companyname=$_REQUEST['companyname'];
      $email=$_REQUEST['email'];

      if (($firstname=="")||($email=="")||($message=="")) 
      { 
         echo "<strong><p class =greentip>A first name, message, and email are    
   required, please fill <a href=/business-writing.php>the form</a>   
   again.</p></strong><br>"; 
      } 
      else{ 
          mail("n.dumanov@gmail.com", $subject, $message, $email);
          echo "<strong><p>Your free consultation request has been received!     
  Expect a detailed response within the next 24 hours!</p></strong>"; 
      }  

  }
  ?>

  <form  action="" method="post" enctype="multipart/form-data">                       
 <div class="row uniform 50%">

                            <div class="6u 12u(mobilep)">                                    

<input name="firstname" type="text" value="" placeholder="Name"><br>
</div>

     <div class="6u 12u(mobilep)">

<input name="companyname" type="text" value="" placeholder="Company Name"><br>
     </div>

     <div>
<input name="email" type="text" value="" placeholder="Email"><br> 
 </div>
 </div>
<div class="row uniform 50%">

                            <div class="12u">
<textarea name="message" rows="7" cols="30" placeholder="Give us a general sense of the kind of writing you or your ogranization needs."></textarea><br> 
</div>

                        </div>

     <br><br>
    <center><input class type="submit" value="submit"></center> <br>
     </form>

In JavaScript you can set an onclick event for the submit button that contains `document.scrollTop = 0`. I put this as a comment since javascript isn't one of your tags. If you want I can write up an answer with more detail. — Sam, Dec 18 '15 at 00:14

Chris Trudeau · Accepted Answer · 2015-12-18T00:30:21.430

1

Why don't you set the ID of your form, and then direct to the anchor in your form action:

<form action="#my-form" method="post" enctype="multipart/form-data" id="my-form">

This will basically submit your form and reload your URL as:

http://impressify.co/business-writing.php#my-form

And it should bring you right down to where you want to be, it worked in a simple test I set up.

Or I suppose instead of setting the ID of the form to "my-form" you could could set the ID of your <p> tag that contains your confirmation message to something like "form-confirmation-message" and set the action of your form to action="#form-confirmation-message"

This would probably be the best option as it would bring you right to your message instead of the form, which is just close to your message.

edited Dec 18 '15 at 00:30

answered Dec 18 '15 at 00:20

Chris Trudeau

1,427
3
16
20

Much appreciated, I'm fairly new to coding so that means a lot. If I could give rep to you I would! – ndumanov Dec 18 '15 at 00:38
No problem, if you accept and/or upvote the answer, I get rep :) – Chris Trudeau Dec 18 '15 at 00:39
So I went with your second option and placed a div id at the bottom of the page where I want the confirmation message to appear. The form scrolls down to the bottom page as it should but the message itself still appears in it's old spot, above the form. Any suggestions? – ndumanov Dec 18 '15 at 00:58
Oh I see, I think you'll need to move that last if/else statement in your php to below the form, if that's where you want the message to show up. Are you ok with your "A first name, message, and email are required" message being below the form as well? If so, just try moving that if/else block. – Chris Trudeau Dec 18 '15 at 01:10
Since your code is embedded in the actual html, that message will appear wherever you tell it to print out. – Chris Trudeau Dec 18 '15 at 01:12
It worked! Thanks again, it won't let me upvote but I accepted your answer! – ndumanov Dec 18 '15 at 01:14
lol yeah I think you need 10 rep or something to upvote, no problem an accepted answer gives the most points, good luck with your project! – Chris Trudeau Dec 18 '15 at 01:16

Contact Form Thank You Top of Page

1 Answers1

Linked