Saltar al contenido
Codif铆ca.me | Desarrollo web | Programaci贸n

Simple Formulario de contacto para tu web

17 diciembre, 2013

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.

formulario de contacto

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]

Entradas relacionadas

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada.

Comentarios (31)

Excelente aporte.
驴C贸mo se podr铆a hacer para que una vez que se env铆e, se refresque y el formulario se quede de nuevo en blanco, listo para ser usado de nuevo?
Gracias por el aporte.

Responder

Puedes volver a refrescar el formulario despues del env铆o, o bien con javascript limpiar los cuatro campos. Ambas opciones son f谩ciles de hacer.

Responder

驴Habr铆a que hacer una funci贸n tipo reset?
Gracias

Responder

Si vale , eso te valdr铆a,
C贸n que limpies los campos en js te valdr铆a.
O incluso que refresques la p谩gina.

Responder

驴No ser铆a interesante poner un max length en los campos para evitar inyecciones de script?
Gracias

Responder

Buenas,

Si te refieres a Maxlength en html, no olvides que las validaciones en html o js te las puedes saltar desde el editor de tu navegador, le das a f12 y cambias o quitas lo que te interese, por lo que las validaciones en js o tipo HTML no est谩n de m谩s pero se saltan muy f谩cilmente.

Por otro lado, no es lo mismo enviar datos a tu base de datos o ejecutar algun script contra tu base de datos que es suceptible de poder tener problemas, que env铆ar un formulario para un email que en principio es menos suceptible de problemas.

En mi opini贸n , en este caso , lo l贸gico ser铆a que en PHP en el servidor utilices los elementos de control y seguridad que necesites para garantizar la integridad de tu web/base de datos.

Responder

Hola.
Estoy intentando mostrarte el c贸digo que us茅 para refrescar pero no me deja publicarlo, seguramente por alg煤n filtro de seguridad. 驴como podr铆a publicarlo?
Gracias.

Responder

Buenas,
Genail lo del c贸digo.

Pues o bien lo subes a pastebin.com o jsfiddle.net , y me envias el enlace, o si lo prefieres puedes envi谩rmelo al email y lo subo. 馃槈
C贸mo te venga mejor.

Mi email es ber*******@gmail.com

Responder

el link esta ca铆do, me podr铆as ayudar; gracias

Responder

Hola, he buscado varios ejemplos de c贸digo fuente en la red y este es de los que me parecen m谩s estructurados de todos.

Aunque lo he usado durante unos d铆as en Agosto finalmente me decante por un generador de formularios , por nuestro negocio necesitamos programar unos 30 formularios de reserva al a帽o, por el momento hemos conseguido reducir el tiempo que dedicamos a programar los formularios y sobre todo a verificar el correcto funcionamiento de los mismos (pruebas). Nuestro tiempo de desarrollo se ha reducido en menos del mitada. Asi que con generadores puedes configurar formularios de cierta complejidad y lo que m谩s no ayuda es que luego puedes copiarlos, haciendo una plantilla inicial luego puedes replicarlos y cambiar los campos que necesites.

Espero que os sirva de ayuda.
Mil gracias por el aporte

Responder

ber: cual es el nombre que le debo poner la archivo php?

Responder

En la linea 7 del fichero js, le he puesto el nombre
sendmail.php

puedes cambiar esa linea por el nombre que quieras y llamar al fichero con el nombre que quieras…. tienen que ser iguales claro
XD

Responder

Hola
A m铆 tambi茅n me dice que el fichero ya no est谩 disponible para descargar… C贸mo me lo puedes pasar?
Gracias.

Responder

Lo acabo de actualizar para que puedas bajarlo gratis desde el link.

Responder

Hola Pablo,
Lo acabo de actualizar para que puedas bajarlo gratis desde el link.
Saludos,

Responder

Hola Ber,

Ya lo tengo en mi web, a煤n no est谩 subida, parece que todo bien pero 驴Por que tarda tanto en cargar? 驴Hay algo que pueda hacer?

Responder

Buenas Antonio,

Pues no deber铆a de tardar nada, quiz谩 algun problema que tengas en tu server, o quiz谩 que no hayas puesto las referencias a las librer铆as bien.

Acabo de hacer un test de velocidad y da un n煤mero MUY alto, 100 es el m谩ximo, as铆 que no deber铆as de tener ning煤n problema de velocidad por el c贸digo.

Saludos,

Responder

Gracias por la pronta respuesta,

Los cuatro archivos est谩n en la carpeta ra铆z (la hoja de estilos me la coge, por cierto en el c贸digo html tienes puesto Style.css y el archivo se llama Style2.css, solo para que lo sepas). Siento decirte que el mail no me llega y el antispam no me formula la suma… Puede que est茅 haciendo algo mal… Si se te ocurre algo te lo agradecer铆a! 馃檪

Saludos.

Responder

De que manera puedo cambiar que cuando llegue la informaci贸n al mail en lugar de “Problema” diga “Mensaje”, y que llegue con el mail que el remitente puso en el formulario de contacto?

Muchas gracias!!

Responder

Buenas,
En la linea 25 , del fichero PHP
Cambia la palabra Problema, por Mensaje, o la palabra que quieras.

if (mail($emailuser, $messageuser, \"Nombre: \".$nombre.\"Correo: \".$email.\"Problema:

Saludos

Responder

Muchas gracias!!

Responder

Se puede agregar el campo de tel茅fono? C贸mo puedo hacer esto?

Responder

Genial, gracias por el aporte. Espero que no est茅 caduco. De hecho no s茅 si es demasiado tarde para seguir 茅ste hilo pero… 驴como ingreso los archivos en el c贸digo? 驴deben llevar un orden? Ingreso uno a uno y no consigo nada, todos a la vez tampoco, hay algo de base que se me escapa. Ruego orientaci贸n. Gracias!

Responder

Hola , hice todo , pero no me llega el mensaje.

Responder

No facilitan las cosas de ninguna manera

Responder

Ya… las mates son muy dif铆ciles.

Responder

Hola no me envia el correo electronico no se que hacer

Responder

Cuando hago clic en enviar, me muestra el contenido del fichero php y no env铆a el email.

Responder

Podr铆an ayudarme me aparece el siguiente error :

‘Error, no se ha podido enviar el correo, int茅ntelo m谩s tarde’,

Responder

que nombre le pusiste a los archivos html,php,javascript???

Responder

Buenas,
Descargalo entero, tienes todo el 膰odigo en el bot贸n descargar, y as铆 solo tienes que poner tu email para el formulario.

Saludos,

Responder