Write Hype is the personal weblog of web designer/developer Josh Minnich, featuring articles about life, events, and happenings.

<div class="input">
    <p class="help">
        <strong>Name</strong><br />
        Enter your first name, or your first and last name here. Or even your favorite nickname!
    </p>
    <label for="name">Name</label>
    <input type="text" id="name" name="contact[name]" />
</div>
<div class="input">
    <p class="help">
        <strong>Email</strong><br />
        Please enter a valid email address here. Fake or mistyped emails won't send!
    </p>
    <label for="email">Email</label>
    <input type="text" id="email" name="contact[email]" />
</div>
<div class="input">
    <p class="help">
        <strong>Message</strong><br />
        Leave me some feedback, ask me a question, or just leave me a quick comment; I'll get back with you asap!
    </p>
    <label for="message">Message</label>
    <textarea id="message" name="contact[message]"></textarea>
</div>

// On mouse over show some help
$('input, textarea').mouseover(function()
{
    $(this).prev().prev().fadeIn('slow');
})
// On mouse out show some help
$('input, textarea').mouseout(function()
{
    $(this).prev().prev().fadeOut('slow');
})

$('form').submit(function()
{
    // Grab data
    var contactname = $('#name').attr('value');
    var contactemail = $('#email').attr('value');
    var contactmessage = $('#message').attr('value');
    // Send it
    jQuery.post('index.php', { name : contactname, email : contactemail, message : contactmessage }, function(data)
    {
        if(data == 'true')
        {
            $('.status').html('<span class="success">Thank you ' + contactname + ', for contacting me!</span>');
            $('#message').attr('value', 'What do you want to tell me?');
            $('.status').fadeIn('slow');
            $('.status').animate({ opacity: 1.0 }, 5000);
            $('.status').fadeOut('slow');
        }
        else
        {
            $('.status').html('<span class="error">Sorry ' + contactname + ', it seems that the contact form didn\'t work.</span>');
            $('.status').fadeIn('slow');
            $('.status').animate({ opacity: 1.0 }, 5000);
            $('.status').fadeOut('slow');
        }
    })
    // Keep the form from refreshing the page
    return false;
})

<?php
if(!empty($_POST))
{
    // Validate before submit
    foreach($_POST as $field)
    {
        if($field == 'Tell me your name!' || $field == 'Where can I contact you?' || $field == 'What do you want to tell me?')
        {
            echo 'false';
            exit();
        }
        else
        {
            echo 'true';
            exit();
        }
    }
}
?>

if(data == 'true')
{
    $('.status').html('<span class="success">Thank you ' + contactname + ', for contacting me!</span>');
    $('#message').attr('value', 'What do you want to tell me?');
    $('.status').fadeIn('slow');
    $('.status').animate({ opacity: 1.0 }, 5000);
    $('.status').fadeOut('slow');
}
else
{
    $('.status').html('<span class="error">Sorry ' + contactname + ', it seems that the contact form didn\'t work.</span>');
    $('.status').fadeIn('slow');
    $('.status').animate({ opacity: 1.0 }, 5000);
    $('.status').fadeOut('slow');
}