jrobinsonc/contact-form.html

## contact-form.html
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <title>Formulario de contacto</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>

    <form action="javascript:;" id="contact-form" method="post" novalidate="novalidate">

            <h3>Formulario de contacto</h3>

            <p id="contact-form-msg" style="display: none"></p>

            <p>
                <label for="contact-form-full_name">Nombre</label>
                <input type="text" id="contact-form-full_name" name="full_name" placeholder="Nombre" class="required">
            </p>

            <p>
                <label for="contact-form-email">Email</label>
                <input type="text" id="contact-form-email" name="email" placeholder="Email" class="required email">
            </p>

            <p>
                <label for="contact-form-message">Mensaje</label>
                <textarea id="contact-form-message" name="message" placeholder="Mensaje" class="required"></textarea>
            </p>

            <p>
                <button type="submit">Enviar</button>
            </p>

    </form>

</body>
</html>

## script.php
<?php

if (isset($_POST['contact_form']))
{
    $message = 'Formulario de Contacto' . "\n\n\n";

    foreach (array('full_name' => 'Nombre', 'email' => 'Email', 'message' => 'Mensaje') as $key => $value)
    {
        $_POST[$key] = strip_tags($_POST[$key]);
        $_POST[$key] = substr($_POST[$key], 0, 200);

        $message .= sprintf('%s: %s' . "\n\n", $value, $_POST[$key]);
    }

    $message .= "\n" . '============================================================' . "\n";
    $message .= sprintf('IP: %s' . "\n", $_SERVER['REMOTE_ADDR']);
    $message .= sprintf('Fecha: %s' . "\n", date('Y-m-d H:i:s'));

    // El email se envia como texto plano.
    $sender = @mail('me@me.com', 'Formulario de contacto', $message);

    exit($sender ? '0' : '1');
}

## scripts.js
jQuery(document).ready(function($) {
    var $contact_form = $('#contact-form'),
        $contact_form_msg = $('#contact-form-msg'),
        $contact_form_inputs = $contact_form.find(':input');

    jQuery.extend(jQuery.validator.messages, {
        required: "(este campo es obligatorio)",
        email: "(el email no es válido)"
    });

    $contact_form.validate({
        errorElement: "em",
        errorPlacement: function (error, element) {

            var $element = $(element);

            $(error).appendTo($element.prev('label'));

        }
    });

    $contact_form.submit(function () {

        if (!$contact_form.valid() || $contact_form.data('sending') === true) { return; }


        $.ajax({
            type: 'POST',
            data: $contact_form.serialize() + '&contact_form=' + new Date().getTime(),
            beforeSend: function () {
                $contact_form_inputs.prop('disabled', true);

                $contact_form_msg.text('(enviando...)').show();

                $contact_form.data('sending', true);
            },
            success: function (response) {

                switch (response) {
                case '0':
                    alert('El mensaje fue enviado.');

                    $contact_form.trigger("reset");
                    break;

                default:
                    alert('Hubo un error, por favor intetalo otra vez.');
                    break;
                }
            },
            complete: function () {

                $contact_form_msg.fadeOut(function () {
                    $contact_form_msg.text('');
                });

                $contact_form_inputs.prop('disabled', false);

                $contact_form.data('sending', false);
            }
        });

    });

});

## styles.css
body {
    background-color: #f6f6f6;
}

#contact-form {
    margin: 0 auto;
    width: 300px;
}

#contact-form p label {
    display: block;
}

#contact-form p input,
#contact-form p textarea {
    border: 1px solid #ccc;
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 3px;
    font-family: "Courier New", Courier, monospace;
}

#contact-form p textarea {
    height: 100px;
}

#contact-form p em {
    display: inline-block;
    margin-left: 10px;
    font-size: 86%;
    color:#B00000;
}
	<!doctype html>
	<html lang="es">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

	<title>Formulario de contacto</title>

	<link rel="stylesheet" type="text/css" href="styles.css">

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
	<script type="text/javascript" src="scripts.js"></script>
	</head>
	<body>

	<form action="javascript:;" id="contact-form" method="post" novalidate="novalidate">

	<h3>Formulario de contacto</h3>

	<p id="contact-form-msg" style="display: none"></p>

	<p>
	<label for="contact-form-full_name">Nombre</label>
	<input type="text" id="contact-form-full_name" name="full_name" placeholder="Nombre" class="required">
	</p>

	<p>
	<label for="contact-form-email">Email</label>
	<input type="text" id="contact-form-email" name="email" placeholder="Email" class="required email">
	</p>

	<p>
	<label for="contact-form-message">Mensaje</label>
	<textarea id="contact-form-message" name="message" placeholder="Mensaje" class="required"></textarea>
	</p>

	<p>
	<button type="submit">Enviar</button>
	</p>

	</form>

	</body>
	</html>
	<?php

	if (isset($_POST['contact_form']))
	{
	$message = 'Formulario de Contacto' . "\n\n\n";

	foreach (array('full_name' => 'Nombre', 'email' => 'Email', 'message' => 'Mensaje') as $key => $value)
	{
	$_POST[$key] = strip_tags($_POST[$key]);
	$_POST[$key] = substr($_POST[$key], 0, 200);

	$message .= sprintf('%s: %s' . "\n\n", $value, $_POST[$key]);
	}

	$message .= "\n" . '============================================================' . "\n";
	$message .= sprintf('IP: %s' . "\n", $_SERVER['REMOTE_ADDR']);
	$message .= sprintf('Fecha: %s' . "\n", date('Y-m-d H:i:s'));

	// El email se envia como texto plano.
	$sender = @mail('me@me.com', 'Formulario de contacto', $message);

	exit($sender ? '0' : '1');
	}
	jQuery(document).ready(function($) {
	var $contact_form = $('#contact-form'),
	$contact_form_msg = $('#contact-form-msg'),
	$contact_form_inputs = $contact_form.find(':input');

	jQuery.extend(jQuery.validator.messages, {
	required: "(este campo es obligatorio)",
	email: "(el email no es válido)"
	});

	$contact_form.validate({
	errorElement: "em",
	errorPlacement: function (error, element) {

	var $element = $(element);

	$(error).appendTo($element.prev('label'));

	}
	});

	$contact_form.submit(function () {

	if (!$contact_form.valid() \|\| $contact_form.data('sending') === true) { return; }


	$.ajax({
	type: 'POST',
	data: $contact_form.serialize() + '&contact_form=' + new Date().getTime(),
	beforeSend: function () {
	$contact_form_inputs.prop('disabled', true);

	$contact_form_msg.text('(enviando...)').show();

	$contact_form.data('sending', true);
	},
	success: function (response) {

	switch (response) {
	case '0':
	alert('El mensaje fue enviado.');

	$contact_form.trigger("reset");
	break;

	default:
	alert('Hubo un error, por favor intetalo otra vez.');
	break;
	}
	},
	complete: function () {

	$contact_form_msg.fadeOut(function () {
	$contact_form_msg.text('');
	});

	$contact_form_inputs.prop('disabled', false);

	$contact_form.data('sending', false);
	}
	});

	});

	});
	body {
	background-color: #f6f6f6;
	}

	#contact-form {
	margin: 0 auto;
	width: 300px;
	}

	#contact-form p label {
	display: block;
	}

	#contact-form p input,
	#contact-form p textarea {
	border: 1px solid #ccc;
	width: 100%;
	padding: 3px;
	box-sizing: border-box;
	border-radius: 3px;
	font-family: "Courier New", Courier, monospace;
	}

	#contact-form p textarea {
	height: 100px;
	}

	#contact-form p em {
	display: inline-block;
	margin-left: 10px;
	font-size: 86%;
	color:#B00000;
	}