Contact Form Success Message

[xMatter]

I am looking to modify my contact form (page template in WordPress) to display the SUCCESS message within the same space as the actual form. Sort of like an overlay of the 200px by 300x area, but without the form fields.

Here is all the code:

<?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
    $nameError = 'Please enter your name.';
    $hasError = true;
} else {
    $name = trim($_POST['contactName']);
}

if(trim($_POST['email']) === '')  {
    $emailError = 'Please enter your email address.';
    $hasError = true;
} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
    $emailError = 'You entered an invalid email address.';
    $hasError = true;
} else {
    $email = trim($_POST['email']);
}

if(trim($_POST['phone']) === '') {
    $phoneError = 'Please enter your phone number.';
    $hasError = true;
} else {
    $phone = trim($_POST['phone']);
}

if(trim($_POST['message']) === '') {
    $messageError = 'Please enter a message.';
    $hasError = true;
} else {
    if(function_exists('stripslashes')) {
        $message = stripslashes(trim($_POST['message']));
    } else {
        $message = trim($_POST['message']);
    }
}

if(!isset($hasError)) {
    $emailTo = get_option('tz_email');
    if (!isset($emailTo) || ($emailTo == '') ){
        $emailTo = '';
    }
    $subject = 'New Message From Website';
    $body = "Name: $name \n\nEmail: $email \n\nPhone: $phone \n\nMessage: $message";
    $headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

    wp_mail($emailTo, $subject, $body, $headers);
    $emailSent = true;
    }

    } ?>

<?php get_header(); ?>

<?php get_sidebar(); ?>  

<div id="content">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

    <div class="entry-content">
        <?php if(isset($emailSent) && $emailSent == true) { ?>

            <div class="thanks">
            <p>
            Thank you for taking the time to contact us by email, your email was sent successfully. 
            <br /> 
            We will respond as soon as we can. Sometimes emails can be placed into the "Junk" folder, so please be sure to check there.</p>
            </div>

        <?php } else { ?>
        <?php the_content(); ?>
        <?php if(isset($hasError) || isset($captchaError)) { ?>
        <p class="error">Sorry, an error occured.<p>
        <?php } ?>

            <form method="post" id="contactform" action="<?php echo $_SERVER['PHP_SELF'];?>">
            <ul>
            <li>
            <label for="contactName">Name</label>
            <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
            <?php if($nameError != '') { ?>
                <span class="error"><?=$nameError;?></span>
            <?php } ?>
            </li>

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

            <li>
                <label for="phone">Phone</label>
                <input type="text" name="phone" id="phone" value="<?php if(isset($_POST['phone'])) echo $_POST['phone'];?>" class="required requiredField" />
                <?php if($phoneError != '') { ?>
                <span class="error"><?=$phoneError;?></span>
                <?php } ?>
            </li>

            <li>
                <label for="message">Message</label>
                <textarea name="message" id="message" class="required requiredField"><?php if(isset($_POST['message'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['message']); } else { echo $_POST['message']; } } ?></textarea>
                <?php if($messageError != '') { ?>
                <span class="error" id="message"><?=$messageError;?></span>
                <?php } ?>
            </li>

            <li>
                <input type="submit" value="Send Message" id="button" /> <!--<input type="submit"></input>-->
            </li>
            </ul>

            <input type="hidden" name="submitted" id="button" value="true" />

            </form>
        <?php } ?>
    </div><!-- .entry-content -->

</div><!-- .post -->

<?php endwhile; endif; ?>
</div><!-- #content -->

The form action was recently changed to SELF, but that is as far as I got. Any help would be greatly appreciated.

[EvolutionFallen]

Do you have jQuery included on the site? You could use AJAX to submit the form, then on success

$('#contactform').fadeOut('fast', function() {
    $('.thanks).slideDown('normal');
});