Prevent page refresh in wordpress form submission
<p>I have setup a small form in my wordpress website.But when I press the submit button the page reloads and goes to the top although the form gets submitted and a success message is displayed.How to prevent this?I want the page to stay at the form section.I dont want users to scroll down to find what happened to the form.</p>

<p>PHP:
              </p>

<pre><code>  &lt;?php 
  //If the form is submitted
  if(isset($_POST['submitted'])) {

    //Check to see if the honeypot captcha field was filled in
    if(trim($_POST['checking']) !== '') {
        $captchaError = true;
    } else {

        //Check to make sure that the name field is not empty
        if(trim($_POST['contactName']) === '') {
            $nameError = 'You forgot to enter your name.';
            $hasError = true;
        } else {
            $name = trim($_POST['contactName']);
        }

        //Check to make sure sure that a valid email address is submitted
        if(trim($_POST['email']) === '')  {
            $emailError = 'You forgot to enter your email address.';
            $hasError = true;
        } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
            $emailError = 'You entered an invalid email address.';
            $hasError = true;
        } else {
            $email = trim($_POST['email']);
        }

        //Check to make sure comments were entered  
        if(trim($_POST['comments']) === '') {
            $commentError = 'You forgot to enter your comments.';
            $hasError = true;
        } else {
            if(function_exists('stripslashes')) {
                $comments = stripslashes(trim($_POST['comments']));
            } else {
                $comments = trim($_POST['comments']);
            }
        }

        //If there is no error, send the email
        if(!isset($hasError)) {

            $emailTo = 'me@somedomain.com';
            $subject = 'Contact Form Submission from '.$name;
            $sendCopy = trim($_POST['sendCopy']);
            $body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
            $headers = 'From: My Site &lt;'.$emailTo.'&gt;' . "\r\n" . 'Reply-To: ' . $email;

            mail($emailTo, $subject, $body, $headers);

            if($sendCopy == true) {
                $subject = 'You emailed Your Name';
                $headers = 'From: Your Name &lt;noreply@somedomain.com&gt;';
                mail($email, $subject, $body, $headers);
            }

            $emailSent = true;

        }
    }
  } ?&gt;


  &lt;?php get_header(); ?&gt;
  &lt;script type="text/javascript" src="&lt;?php bloginfo('template_directory'); ?&gt;/scripts/contact-form.js"&gt;&lt;/script&gt;



  &lt;?php if(isset($emailSent) &amp;&amp; $emailSent == true) { ?&gt;

    &lt;div class="thanks"&gt;
        &lt;h1&gt;Thanks, &lt;?=$name;?&gt;&lt;/h1&gt;
        &lt;p&gt;Your email was successfully sent. I will be in touch soon.&lt;/p&gt;
    &lt;/div&gt;

  &lt;?php } else { ?&gt;

    &lt;?php if (have_posts()) : ?&gt;

    &lt;?php while (have_posts()) : the_post(); ?&gt;
        &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt;
        &lt;?php the_content(); ?&gt;

        &lt;?php if(isset($hasError) || isset($captchaError)) { ?&gt;
            &lt;p class="error"&gt;There was an error submitting the form.&lt;p&gt;
        &lt;?php } ?&gt;

        &lt;form action="&lt;?php the_permalink(); ?&gt;" id="contactForm" method="post"&gt;

            &lt;ol class="forms"&gt;
                &lt;li&gt;&lt;label for="contactName"&gt;Name&lt;/label&gt;
                    &lt;input type="text" name="contactName" id="contactName" value="&lt;?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?&gt;" class="requiredField" /&gt;
                    &lt;?php if($nameError != '') { ?&gt;
                        &lt;span class="error"&gt;&lt;?=$nameError;?&gt;&lt;/span&gt; 
                    &lt;?php } ?&gt;
                &lt;/li&gt;

                &lt;li&gt;&lt;label for="email"&gt;Email&lt;/label&gt;
                    &lt;input type="text" name="email" id="email" value="&lt;?php if(isset($_POST['email']))  echo $_POST['email'];?&gt;" class="requiredField email" /&gt;
                    &lt;?php if($emailError != '') { ?&gt;
                        &lt;span class="error"&gt;&lt;?=$emailError;?&gt;&lt;/span&gt;
                    &lt;?php } ?&gt;
                &lt;/li&gt;

                &lt;li class="textarea"&gt;&lt;label for="commentsText"&gt;Comments&lt;/label&gt;
                    &lt;textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"&gt;&lt;?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?&gt;&lt;/textarea&gt;
                    &lt;?php if($commentError != '') { ?&gt;
                        &lt;span class="error"&gt;&lt;?=$commentError;?&gt;&lt;/span&gt; 
                    &lt;?php } ?&gt;
                &lt;/li&gt;
                &lt;li class="inline"&gt;&lt;input type="checkbox" name="sendCopy" id="sendCopy" value="true"&lt;?php if(isset($_POST['sendCopy']) &amp;&amp; $_POST['sendCopy'] == true) echo ' checked="checked"'; ?&gt; /&gt;&lt;label for="sendCopy"&gt;Send a copy of this email to yourself&lt;/label&gt;&lt;/li&gt;
                &lt;li class="screenReader"&gt;&lt;label for="checking" class="screenReader"&gt;If you want to submit this form, do not enter anything in this field&lt;/label&gt;&lt;input type="text" name="checking" id="checking" class="screenReader" value="&lt;?php if(isset($_POST['checking']))  echo $_POST['checking'];?&gt;" /&gt;&lt;/li&gt;
                &lt;li class="buttons"&gt;&lt;input type="hidden" name="submitted" id="submitted" value="true" /&gt;&lt;button type="submit"&gt;Email me &amp;raquo;&lt;/button&gt;&lt;/li&gt;
            &lt;/ol&gt;
        &lt;/form&gt;

        &lt;?php endwhile; ?&gt;
    &lt;?php endif; ?&gt;
  &lt;?php } ?&gt;

  &lt;?php get_footer(); ?&gt;
</code></pre>

<p>JS:</p>

<pre><code>            $(document).ready(function() {
        $('form#contactForm').submit(function() {
            $('form#contactForm .error').remove();
            var hasError = false;
            $('.requiredField').each(function() {
                if(jQuery.trim($(this).val()) == '') {
                    var labelText = $(this).prev('label').text();
                    $(this).parent().append('&lt;span class="error"&gt;You forgot to enter your '+labelText+'.&lt;/span&gt;');
                    hasError = true;
                } else if($(this).hasClass('email')) {
                    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                    if(!emailReg.test(jQuery.trim($(this).val()))) {
                        var labelText = $(this).prev('label').text();
                        $(this).parent().append('&lt;span class="error"&gt;You entered an invalid '+labelText+'.&lt;/span&gt;');
                        hasError = true;
                    }
                }
            });
            if(!hasError) {
                $('form#contactForm li.buttons button').fadeOut('normal', function() {
                    $(this).parent().append('&lt;img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading&amp;hellip;" height="31" width="31" /&gt;');
                });
                var formInput = $(this).serialize();
                $.post($(this).attr('action'),formInput, function(data){
                    $('form#contactForm').slideUp("fast", function() {                 
                        $(this).before('&lt;p class="thanks"&gt;&lt;strong&gt;Thanks!&lt;/strong&gt; Your email was successfully sent. I check my email all the time, so I should be in touch soon.&lt;/p&gt;');
                    });
                });
            }

            return false;

        });
    });
</code></pre>