En esta entrada vamos a ver el código de un formulario simple de contacto para tu web.
El código es simple, un html dónde se verá tu formulario, una hoja CSS dónde está el estilo de tu formulario, un fichero PHP que será el encargado de enviar el mail al destinatario (no se te olvide cambiar el mail por el tuyo), y por último un fichero JavaScript que será el encargado de comprobar las validaciones de los campos y enviar de nuevo la respuesta al usuario de que todo el proceso ha ido bien.
Así es como queda, el diseño de los colores lo podéis poner a vuestro gusto, tocando dos lineas del fichero CSS que os adjunto.
Empezamos por el fichero html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formulario de contacto</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrap">
<br><br>
<form id="contactForm">
<label for="email">Rellene este formulario para ponerse en contacto con nosotros.</label>
<br><br>
<label for="email">Tu Email:</label>
<input type="email" id="email" name="email" placeholder="Ingrese su correo.">
<label for="nombre">Tu Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Ingrese su nombre.">
<label for="asunto">Asunto:</label>
<input type="text" id="asunto" name="asunto" placeholder="Breve descripción del mensaje">
<label for="descripcion">Descripción del mensaje:</label>
<span class="caracteres">Tamaño máximo 500 letras</span>
<textarea name="descripcion" id="descripcion" cols="30" rows="10" placeholder="Escriba el mensaje detalladamente.
Le responderemos al email de contacto lo antes posible."></textarea>
<div id="comprueba">
<p>Comprobación Anti Spam: </p>
<input type="text" id="n1" name="n1" readonly> + <input type="text" id="n2" name="n2" readonly>
=
<input type="text" id="res" name="res" maxlength="2">
</div>
<input type="submit" id="enviar" value="Enviar">
<div style="clear:both"></div>
<div id="respuesta"></div>
</form>
</div>
<br>
</body>
</html> |
Seguimos por la hoja de stylo CSS
body { background-color: #666699; } #wrap { margin:0 auto 0 auto; width:500px; text-align:left; } #contactForm { width: 500px; border: 1px solid #f4fFfF; padding: 15px 15px 15px 15px; background-color: #f4f7f8; } #contactForm * { font-family: sans-serif; display: block; box-sizing: border-box; } #contactForm label { color: #333; cursor: default; margin: 15px 0 3px 0; } #contactForm input[type="text"], #contactForm input[type="email"], #contactForm textarea { padding: 8px; border: 1px solid #CCC; color: #555; font-size: 1em; width: 100%; overflow: hidden; resize: none; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; } #contactForm input[type="text"]:focus, #contactForm input[type="email"]:focus, #contactForm textarea:focus { outline: none; box-shadow: 0px 0px 5px #007DD7; -o-box-shadow: 0px 0px 5px #007DD7; -ms-box-shadow: 0px 0px 5px #007DD7; -moz-box-shadow: 0px 0px 5px #007DD7; } #contactForm .caracteres, #contactForm label[for="descripcion"] { display: inline-block; } #contactForm .caracteres { color: green; } #contactForm #comprueba { margin: 10px 0; float: left; } #contactForm #comprueba p { display: inline-block; color: #333; margin: 0; } #contactForm #comprueba #n1, #contactForm #comprueba #n2 { display: inline-block; width: 20px !important; border: none !important; padding: 0 !important; margin: 0; text-align: center; } #contactForm #comprueba #n1:focus, #contactForm #comprueba #n2:focus { box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; -moz-box-shadow: none; } #contactForm #comprueba #res { display: inline-block; width: 25px; padding: 2px; } #contactForm #comprueba #res:focus { box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; -moz-box-shadow: none; } #contactForm #enviar { border: 1px solid #0169A9; cursor: pointer; float: right; background: linear-gradient(#08A1FF,#008DE4,#0275BB); -o-background: linear-gradient(#08A1FF,#008DE4,#0275BB); -ms-background: linear-gradient(#08A1FF,#008DE4,#0275BB); -moz-background: linear-gradient(#08A1FF,#008DE4,#0275BB); color: #FFF; font-size: 1em; margin: 10px 0 10px 15px; padding: 3px 9px; border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -moz-border-radius: 2px; } #contactForm #enviar:hover { background: linear-gradient(#0275BB,#008DE4,#08A1FF); -o-background: linear-gradient(#0275BB,#008DE4,#08A1FF); -ms-background: linear-gradient(#0275BB,#008DE4,#08A1FF); -moz-background: linear-gradient(#0275BB,#008DE4,#08A1FF); } #contactForm #enviar[disabled] { background: linear-gradient(#08A1FF,#008DE4,#0275BB); -o-background: linear-gradient(#08A1FF,#008DE4,#0275BB); -ms-background: linear-gradient(#08A1FF,#008DE4,#0275BB); -moz-background: linear-gradient(#08A1FF,#008DE4,#0275BB); filter: alpha(opacity=60); opacity: 0.6; cursor: default; } #contactForm #respuesta { display: none; padding: 6px; background: #008DE4; color: #FFF; text-align: center; margin: 10px 0; border: 1px solid #0076BE; cursor: pointer; border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -moz-border-radius: 2px; } |
Este es el fichero PHP
Recuerda: Cambia el mail por el tuyo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | // el proceso que envia el email. error_reporting(0); $emailuser = "tu_email_de_contacto@email.com"; $cabecera = "MIME-Version: 1.0"."\r\n"; $cabecera .= "Content-type: text/html; charset=UTF-8"."\r\n"; $email = htmlentities($_POST["email"]); $nombre = htmlentities($_POST["nombre"]); $messageuser = htmlentities($_POST["asunto"]); $desc = str_replace("\n", "<br>", $_POST["descripcion"]); $respuesta = $_POST["res"]; $n1 = $_POST["n1"]; $n2 = $_POST["n2"]; $respuesta1 = $n1+$n2; if ($email == null || $nombre == null || $messageuser == null || $desc == null || $respuesta == null) { die("Error, todos los campos deben estar rellenos"); } if ($respuesta != $respuesta1) { die("Error, la comprobación Anti-spam a fallado."); } if (mail($emailuser, $messageuser, "<b>Nombre</b>: ".$nombre."<br><b>Correo</b>: ".$email."<br><b>Problema</b>: ".$desc, $cabecera)) { die($nombre.", El email se ha enviado correctamente."); } echo "Error, no se ha podido enviar el correo, inténtelo más tarde."; |
Y por último el fichero JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | $(document).ready(function() {
$('#n1').val(Math.floor(Math.random()*10+1));
$('#n2').val(Math.floor(Math.random()*10+1));
$('#contactForm').submit(function(event) {
$('#respuesta').fadeOut(250);
$.ajax({
url: 'sendmail.php',
type: 'POST',
data: $(this).serialize(),
success: function(resp) {
$.each($('#respuesta'), function(event) {
$(this).fadeIn(250);
$(this).html(resp);
if ($(this).html() == $('#nombre').val()+', ha enviado el correo de forma exitosa.') {
$.each($('#enviar'), function(event) {
$(this).attr({
disabled : true,
value : 'Enviado'
});
$(this).click(function() {
return false;
});
});
}
});
},
error: function(jqXHR, textStatus, errorThrown) {
$.each($('#respuesta'), function(event) {
$(this).fadeIn(250);
$(this).html('Error, no se ha podido enviar el correo, inténtelo más tarde');
});
}
});
return false;
});
$('#descripcion').keyup(function(event) {
$('.caracteres').text(500 - $(this).val().length);
if ($(this).val().length > 500) {
$('.caracteres').css('color','red');
$('#enviar').attr('disabled',true);
} else {
$('.caracteres').css('color','green');
$('#enviar').attr('disabled',false);
}
});
$('#n1, #n2').keydown(function() {
return false;
});
$('#respuesta').click(function(event) {
$(this).fadeOut(250);
});
}); |
Los ficheros comprimidos, para que no tengas que hacer nada, puedes descargarlos desde aquí, te pido una acción social para que puedas descargarlo. Muchas Gracias!
Aquí puedes ver el ejemplo en ejecución, faltaría ponerlo a tu gusto XD.
[sociallocker]
Descárgalo aquí
[/sociallocker]