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>

Answer 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.