Buenas, me aburría esta tarde y vi un post de nuestro amigo francisco de un formulario de contacto pero que estaba con algunas cosas "antiguas" por así decirlo (Como usar $HTTP_POST_VARS en vez de $_POST) y bueno, espero que no le moleste que publique este formulario, no lo he probado pero vamos, que creo que debería funcionar jejeje
Aquí tenéis, está todo en un archivo que podéis llamar como queráis xD
Recordad modificar la siguiente línea, que es el correo donde llegarán los mensajes enviados por el formulario:
-> El resultado final con el CSS del post (que lógicamente podéis modificar para adaptarlo a vuestra página) sería algo así (en Chrome):
[contenido no disponible]
Aquí tenéis, está todo en un archivo que podéis llamar como queráis xD
<!DOCTYPE html><html lang="es">
<head>
<title>Formulario de contacto</title>
<!-- Enlazamos la librería de jQuery -->
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<!-- Validación de los campos del formulario -->
<script>
$(document).ready(function () {
$("p#resultado").hide();
$("#enviar").click(function(){
var nombre = $("input#nombre").val();
var email = $("input#email").val();
var asunto = $("input#asunto").val();
var mensaje = $("textarea#mensaje").val();
if(nombre=="" || nombre==" "){
$("p#resultado").fadeIn('toggle');
$("p#resultado").html("Te faltó completar el campo donde debes introducir tu nombre.");
$("input#nombre").focus();
return false;
}
if(email=="" || email==" "){
$("p#resultado").fadeIn('toggle');
$("p#resultado").html("Te faltó completar el campo donde debes introducir tu email.");
$("input#email").focus();
return false;
}
if(asunto=="" || asunto==" "){
$("p#resultado").fadeIn('toggle');
$("p#resultado").html("Te faltó completar el campo donde debes introducir el asunto.");
$("input#asunto").focus();
return false;
}
if(mensaje=="" || mensaje==" "){
$("p#resultado").fadeIn('toggle');
$("p#resultado").html("Te faltó completar el campo donde debes introducir tu mensaje.");
$("textarea#mensaje").focus();
return false;
}
});
});
</script>
<!-- Estilos de la página. Recomiendo hacerlos en un .css a parte y enlazarlo, pero así es más cómodo para hacer el post en un archivo -->
<style>
* {
margin:0px auto;
text-align: center;
}
body {
text-align: center;
font-family: Eras Light ITC;
}
#linea {
width: 100%;
margin-bottom: 15px;
-moz-box-shadow: 0 0 5px 0 #888;
-webkit-box-shadow: 0 0 5px 0 #888;
box-shadow: 0 0 5px 0 #888;
}
#texto {
font-size: 20px;
}
label {
font-weight: bold;
}
input, textarea {
-moz-box-shadow: 0 0 3px 3px #888;
-webkit-box-shadow: 0 0 3px 3px#888;
box-shadow: 0 0 3px 3px #888;
padding: 3px;
margin-bottom: 10px;
background-color: #eee;
border:1px solid #eef;
border-radius: 2px;
}
button {
border-radius: 5px;
width: 158px;
height: 34px;
font-size: 16px;
font-family: Trebuchet MS,Times,serif;
color: #fff;
padding: 0 0 3px 0;
margin: 0;
cursor: pointer;
border: none;
background-image: -moz-linear-gradient(#84FFCE, #16FF3D);
background-image: -webkit-gradient(linear, center top, center bottom, from(#84FFCE), to(#16FF3D));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#84FFCE,endColorStr=#16FF3D);"
}
button:hover {
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-box-shadow: inset 0 0 3px 3px #888;
-webkit-box-shadow: inset 0 0 3px 3px #888;
box-shadow: inset 0 0 3px 3px #888;
}
#resultado {
font-weight: bold;
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<p id="texto">Formulario de contacto</p>
<hr id="linea">
<form method="post" action="">
<label for="nombre" style="margin-right: 10px;">Nombre</label> <input type="text" id="nombre" name="nombre" placeholder="Tu nombre..." /><br />
<label for="email" style="margin-right: 33px;">Email</label> <input type="text" id="email" name="email" placeholder="[correo eliminado]" /><br />
<label for="asunto" style="margin-right: 20px;" >Asunto</label> <input type="text" id="asunto" name="asunto" placeholder="Asunto del contacto..." /><br />
<textarea id="mensaje" name="mensaje" placeholder="Introduce el contenido de tu mensaje aquí..." rows="10" cols="50" ></textarea><br />
<button type="submit" id="enviar" name="enviar">Enviar!</button>
</form>
<br />
<p id="resultado"></p>
<?php
if(!$_POST){
# Si no envió el formulario no pasa nada
return false;
}
# Modifica la siguiente variable por el email donde recibirás los correos enviados por el formulario
$receptor = "[correo eliminado]";
# Variables enviadas en el formulario
$nombre = strip_tags($_POST["nombre"]);
$email = strip_tags($_POST["email"]);
$asunto = strip_tags($_POST["asunto"]);
$asuntoemail = "".$asunto." <".$email.">";
$mensaje = strip_tags($_POST["mensaje"]);
# Enviamos el email y ponemos un aviso de que el mensaje se envió correctamente
mail($receptor, $asuntoemail, $mensaje);
echo "Tu mensaje ha sido enviado correctamente y será atendido lo más pronto posible, muchas gracias.";
?>
</body>
</html>Recordad modificar la siguiente línea, que es el correo donde llegarán los mensajes enviados por el formulario:
# Modifica la siguiente variable por el email donde recibirás los correos enviados por el formulario
$receptor = "[correo eliminado]";-> El resultado final con el CSS del post (que lógicamente podéis modificar para adaptarlo a vuestra página) sería algo así (en Chrome):
[contenido no disponible]