jQuery + PHP: Formulario de contacto simple
Un simple formulario de contacto utilizando jQuery y PHP.
HTML
<form id="formulario_contacto" method="post">
<div id="resultado">Complete los campos obligatorios.</div>
<label for="nombre">Nombre y Apellido:</label> <input type="text" id="nombre" name="nombre" /><br />
<label for="email">Email:</label> <input type="text" id="email" name="email" /><br />
<label for="comentarios">Comentarios:</label> <textarea id="comentarios" name="comentarios"></textarea><br />
<label></label> <input type="submit" id="enviar_mensaje" value="Enviar comentario" />
</form>
CSS
#formulario_contacto { margin: 0 auto; padding: 0px; }
#formulario_contacto label { display: inline-block; width: 200px; text-align: right; margin-right: 10px; cursor: pointer; }
JavaScript 1.7
$(function(){
$('#enviar_mensaje').click(function(e){
e.preventDefault();
var _target = ''; // Pagina PHP que obtiene los resultados y envia el correo. Ej: http://tusitio.com/procesa_envio.php
var _resultado = $('.resultado');
var _data = $('#formulario_contacto').serialize();
$('#resultado').fadeOut();
$.ajax({
url: _target,
dataType: 'json',
type: 'POST',
data: _data,
complete: function(json){
$('#resultado').html('Enviado:' + json);
}
}).fail(function(){
$('#resultado').html('Error al enviar el formulario.');
}).done(function(){
$('#resultado').html('Enviado.');
});
});
});