En este tutorial vamos a desarrollar un formulario de contacto creado con las tecnologías HTML5, PHP y Bootstrap el cual podrás descargar al final del tutorial gratis para utilizarlo en tus proyectos: El primer paso consiste en un archivo HTML 5, con los siguientes campos:
- Nombre
- Teléfono
- Ciudad
- País
- Mensaje
En este ejemplo estamos validando el campo NOMBRE y el EMAIL los cuales deben ser obligatorios, esta validación la estamos haciendo directamente con la etiqueta REQUIRED de HTML5 y también del lado del servidor con PHP
He decidido hacerlo con Bootstraps para lo cual podemos copiar el código necesario del siguiente link: www,getbootstrap.com/getting-started/
y podemos descargar los archivos necesarios desde la misma web (Hojas de estilo CSS, javascript, Fuentes)
Este seria el codigo de nuestro archivo html que en este ejemplo tendrá el nombre de : formulario_contacto.html
[code]
<!doctype html>
<html>
<html lang=”es”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Formulario de Contacto – Script Personal</title>
<!– Bootstrap –>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<link href=”css/estilos.css” rel=”stylesheet”>
<script type=”text/javascript” src=”js/bootstrap.min.js”></script>
<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”></script>
<script src=”https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js”></script>
<![endif]–>
</head>
<body>
<div id=”formulario”>
<form role=”form” action=”php/contacto.php” method=”POST” id=”contacto” title=”Nombre”>
<label for=”nombre”>Nombre</label>
<input name=”nombre” type=”text” required=”required” id=”nombre” placeholder=”nombre” tabindex=”1″ title=”Nombre”>
<br>
<label for=”email”>Email</label>
<input name=”email” type=”email” required=”required” id=”email” placeholder=”email” tabindex=”2″ title=”Email”>
<br>
<label for=”telefono”>Teléfono</label>
<input name=”telefono” type=”text” id=”telefono” placeholder=”telefono” tabindex=”3″ title=”Telefono”>
<br>
<label for=”ciudad”>Ciudad</label>
<input name=”ciudad” type=”text” id=”ciudad” placeholder=”ciudad” tabindex=”4″ title=”ciudad”>
<br>
<label for=”pais”>País</label>
<input name=”pais” type=”pais” id=”pais” placeholder=”pais” tabindex=”5″ title=”pais”>
<br>
<label for=”Mensaje”>Mensaje</label>
<textarea name=”mensaje” rows=”4″ id=”mensaje” placeholder=”mensaje” tabindex=”6″></textarea>
<br>
<input type=”submit” name=”enviar” tabindex=”7″ value=”Enviar”><input type=”reset” tabindex=”8″ value=”Borrar”>
<input type=”hidden” name=”estado” value=”1″>
</form>
</div>
</body>
</html>
[/code]
El segundo paso consistirá en la creación del archivo PHP encargado de recoger la información, validarla y enviarla a el correo que definamos haciendo uso de la función MAIL de PHP
El siguiente es el script PHP y lo que hacemos aquí es lo siguiente:
- Crear un primer condicional para comprobar que si se esté presionando el botón ENVIAR en el formulario,
- Guardamos en variables los datos enviados desde el formulario
- Validamos del lado del servidor que el nombre y el email no estén vacios con otro condicional anidado dentro del anterior
- En el ELSE del primer condicional, creamos las variables que contendran el correo a enviar: PARA, ASUNTO, EL CUERPO DEL MENSAJE, LAS CABECERAS y creamos otro condicional para la función MAIL y si el mensaje se ha enviado correctamente mostramos un mensaje de confirmación y un enlace para volver al formulario
Este es el codigo utilizado en el ejemplo y el nombre del archivo es: contacto.php
[code]
<?php
//Comprobamos que se haya presionado el boton enviar
if(isset($_POST[‘enviar’])){
//Guardamos en variables los datos enviados
$nombre = $_POST[‘nombre’];
$email = $_POST[‘email’];
$telefono = $_POST[‘telefono’];
$ciudad = $_POST[‘ciudad’];
$pais = $_POST[‘pais’];
$mensaje = $_POST[‘mensaje’];
///Validamos del lado del servidor que el nombre y el email no estén vacios
if($nombre == ”){
echo “Debe ingresar su nombre”;
}
else if($email == ”){
echo “Debe ingresar su email”;
}else{
$para = “correo@tudominio.com”;//Email al que se enviará
$asunto = “Contacto para su sitio web”;//Puedes cambiar el asunto del mensaje desde aqui
//Este sería el cuerpo del mensaje
$mensaje = ”
<table border=’0′ cellspacing=’3′ cellpadding=’2′>
<tr>
<td width=’30%’ align=’left’ bgcolor=’#f0efef’><strong>Nombre:</strong></td>
<td width=’80%’ align=’left’>$nombre</td>
</tr>
<tr>
<td align=’left’ bgcolor=’#f0efef’><strong>E-mail:</strong></td>
<td align=’left’>$email</td>
</tr>
<tr>
<td width=’30%’ align=’left’ bgcolor=’#f0efef’><strong>Teléfono:</strong></td>
<td width=’70%’ align=’left’>$telefono</td>
</tr>
<tr>
<td width=’30%’ align=’left’ bgcolor=’#f0efef’><strong>Ciudad:</strong></td>
<td width=’70%’ align=’left’>$ciudad</td>
</tr>
<tr>
<td width=’30%’ align=’left’ bgcolor=’#f0efef’><strong>País:</strong></td>
<td width=’70%’ align=’left’>$pais</td>
</tr>
<tr>
<td align=’left’ bgcolor=’#f0efef’><strong>Comentario:</strong></td>
<td align=’left’>$mensaje</td>
</tr>
</table>
“;
//Cabeceras del correo
$headers = “From: $nombre <$email>\r\n”; //Quien envia?
$headers .= “X-Mailer: PHP5\n”;
$headers .= ‘MIME-Version: 1.0’ . “\n”;
$headers .= ‘Content-type: text/html; charset=iso-8859-1’ . “\r\n”; //
//Comprobamos que los datos enviados a la función MAIL de PHP estén bien y si es correcto enviamos
if(mail($para, $asunto, $mensaje, $headers)){
echo “Su mensaje se ha enviado correctamente”;
echo “<br />”;
echo ‘<a href=”../formulario_contacto.html”>Volver</a>’;
}else{
echo “Hubo un error en el envío inténtelo más tarde”;
}
}
}
?>
[/code]
Una consulta, estoy usando tu código, me parece super bueno, pero no se dónde se define el mensaje de los campos requeridos, pues estoy haciendo un web en inglés y los mensajes de validación me aparecen en español.
Tienes algún dato de dónde están esos mensajes para poder editarlos?
Gracias!!!
kañsdasd
reemplaza ésta línea “” por ésta otra “”, puede que así te salgan los mensajes
reemplaza lang=es por lang=en
No me funcionó, lo probe en una plantilla con bootstrap y no funciono, tampoco en un archivo aparte como muestras aquí en el tutorial
hola
Me ha servido bastante este sencillo ejemplo con bootstrap, me ha servido bastante para comenzar. Gracias.
SOY EL MEJOR
no puedo activar al 100% este form. cont., me llega al correo pero no recoje la inform. de los campos de texto, envío html y php utilizados:
Enviar
alert(‘Gracias por su mensaje, me contactaré con Ud. a la brevedad.’);
window.location = ‘contact.html’;
alert(‘Message failed. Please, send an email to gordon@template-help.com‘);
window.location = ‘contact.html’;
No sirve
4 dollar drug list alprazolam next step morning after pill