Formulario de Contacto HTML 5, PHP y Bootstrap

11
9845
Formulario html5 php bootstrap
Formulario html5 php bootstrap

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 utlizarlo en tus proyectos: El primer paso consiste en un archivo HTML 5, con los siguientes campos:

  • Nombre
  • Email
  • 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 decidico hacerlo con Bootstraps para lo cual podemos copiar el codigo 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

<!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>

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:

  1. Crear un primer condicional para comprobar que si se esté presionando el botón ENVIAR en el formulario,
  2. Guardamos en variables los datos enviados desde el formulario
  3. Validamos del lado del servidor que el nombre y el email no estén vacios con otro condicional anidado dentro del anterior
  4. 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

<?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";
}
}
}
?>

Descargar el archivo fuente de este tutorial

11 Comentarios

  1. 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!!!

  2. 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’;

Dejar respuesta


*