La comunicación con los usuarios es muy importante por lo que debemos ofrecer un formulario de contacto en todo sitio web. En el ejemplo que veremos a continuación realizaremos un formulario de contacto en HTML que enviara las respuestas a un correo electrónico mediante funciones de PHP y tendrá un diseño agradable y adaptable a dispositivos con la integración de atributos de CSS3. Ver ejemplo: Formulario de contacto HTML5/CSS3/PHP

Estructura de Formulario de contacto

En el documento de HTML se definirá la estructura y los campos que dispondrá el formulario de contacto. Debemos abrir el «editor de código» o el bloc de notas por defecto y guardar el documento como formulario.html. Adicionalmente agregamos las siguientes lineas en el documento HTML.

<html lang="es">
<head>
  <title>Formulario de contacto HTML5/CSS3/PHP</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="form-estilos.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
 
</head>
 
<body>
 
<aside> 
 
<H1>Formulario de contacto HTML5/CSS3/PHP</H1>
<a href="https://www.internetedadinero.com">¿Como se hace?</a> | <a href="https://www.internetedadinero.com">Descargar Archivos</a>
<hr>
<FORM ACTION="enviar_email.php" METHOD="post"> 
 
<label for="first_name">Nombre</label> <INPUT type="text" size=36 name="first_name"></INPUT> 
<label for="last_name">Apellido</label> <INPUT type="text" size=36 name="last_name"></INPUT> 
<label for="email">E-mail</label> <INPUT type="email" size=36 name="email"></INPUT> 
<label for="telephone">Teléfono</label> <INPUT type="tel" size=36 name="telephone"></INPUT> 
<label for="message">Mensaje</label> <TEXTAREA rows=5 cols=30 name="message"></TEXTAREA> 
<br>
<INPUT type="reset" value="Borrar"> <INPUT type="submit" value="Enviar"><a href="https://www.internetedadinero.com/tutorial-formulario/email_form.php"></a>
 
</FORM> 
 
</aside> 
 
</body>
 
<footer>
    <a href="https://www.internetedadinero.com">Formulario de contacto HTML5/CSS3 - www.internetedadinero.com</a>
  </footer>
 
</html>

 

Atributos del Formulario de contacto

Una vez agregada la estructura de formulario de contacto, debemos añadir atributos para mejorar la visualización y permitir que se adapte a la pantalla de cualquier dispositivo móvil.  Para añadir atributos debemos crear un documento de CSS, lo nombraremos form-estilos.css y añadimos las siguientes lineas antes de guardarlo.

h1 {
	font-size: 22px;
	font-family: 'Source Sans Pro', sans-serif;
	text-decoration: underline;
	margin: 0px 0px;
}
 
p {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	margin-bottom: 0px;
}
a {
  color: #333;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
}
label {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	margin-bottom: 0px;
	font-weight: bold;
}
 
input[type=text], input[type=tel], input[type=email] {
	width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
}
 
textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}
 
input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    margin-top: 10px;
}
 
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
    background-color: #333;
}
 
footer {
  position: fixed;
  width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 0px 10px 0px;
  background-color: #333;
  text-align: center;
}
footer a {
  color: #fff;
}

 


Archivo de Envio del Formulario de contacto

Tenemos los documentos vinculados y si revisamos el archivo formulario.html en el navegador podremos ver que ya tiene el aspecto indicado, ya es adaptable y permite que rellenemos los campos, sin embargo hasta el momento los datos no van a ningún sitio. Debemos agregar el documento de PHP que tendrá las especificaciones de envio de correo y que llevara a cabo la función de recolección y envio de datos a un correo electrónico especifico. Abrimos un nuevo documento y se nombrara enviar_email.php, adicionalmente agregamos las siguientes lineas.

<?php
if(isset($_POST['email'])) {
 
    // Edita las líneas siguientes con tu dirección de correo y asunto
 
    $email_to = "tucorreo@tucorreo.com";
 
    $email_subject = "Tu Asunto de correo";   
 
    function died($error) {
 
        // si hay algún error, el formulario puede desplegar su mensaje de aviso
 
        echo "Lo sentimos, hay un error en sus datos y el formulario no puede ser enviado. ";
 
        echo "Detalle de los errores.<br /><br />";
 
        echo $error."<br /><br />";
 
        echo "Porfavor corrije los errores e inténtelo de nuevo.<br /><br />";
        die();
    }
 
    // Se valida que los campos del formulairo estén llenos
 
    if(!isset($_POST['first_name']) ||
 
        !isset($_POST['last_name']) ||
 
        !isset($_POST['email']) ||
 
        !isset($_POST['telephone']) ||
 
        !isset($_POST['message'])) {
 
        died('Lo sentimos pero parece haber un problema con los datos enviados.');       
 
    }
 //Valor "name" nos sirve para crear las variables que recolectaran la información de cada campo
 
    $first_name = $_POST['first_name']; // requerido
 
    $last_name = $_POST['last_name']; // requerido
 
    $email_from = $_POST['email']; // requerido
 
    $telephone = $_POST['telephone']; // no requerido 
 
    $message = $_POST['message']; // requerido
 
    $error_message = "Error";
 
//Verificar que la dirección de correo sea válida 
 
   $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
 
  if(!preg_match($email_exp,$email_from)) {
 
    $error_message .= 'La dirección de correo proporcionada no es válida.<br />';
 
  }
 
//Validadacion de cadenas de texto
 
    $string_exp = "/^[A-Za-z .'-]+$/";
 
  if(!preg_match($string_exp,$first_name)) {
 
    $error_message .= 'El formato del nombre no es válido<br />';
 
  }
 
  if(!preg_match($string_exp,$last_name)) {
 
    $error_message .= 'el formato del apellido no es válido.<br />';
 
  }
 
  if(strlen($message) < 2) {
 
    $error_message .= 'El formato del texto no es válido.<br />';
 
  }
 
  if(strlen($error_message) < 0) {
 
    died($error_message);
 
  }
 
//Plantilla de mensaje
 
    $email_message = "Contenido del Mensaje.\n\n";
 
 
 
    function clean_string($string) {
 
      $bad = array("content-type","bcc:","to:","cc:","href");
 
      return str_replace($bad,"",$string);
 
    }
 
 
 
    $email_message .= "Nombre: ".clean_string($first_name)."\n";
 
    $email_message .= "Apellido: ".clean_string($last_name)."\n";
 
    $email_message .= "Email: ".clean_string($email_from)."\n";
 
    $email_message .= "Teléfono: ".clean_string($telephone)."\n";
 
    $email_message .= "Mensaje: ".clean_string($message)."\n";
 
 
//Encabezados
 
$headers = 'From: '.$email_from."\r\n".
 
'Reply-To: '.$email_from."\r\n" .
 
'X-Mailer: PHP/' . phpversion();
 
@mail($email_to, $email_subject, $email_message, $headers);  
 
?>
 
<!-- Mensaje de Éxito-->
 
Muchas Gracias! Proximamente Estaremos en Contacto.
 
<?php 
}
?>

 

Redireccionar a otra pagina web

Reemplaza el mensaje de exito por las siguientes lineas para redicreecionar a otra pagina web una vez el formulario sea enviado.

<script>
     window.location.href='https://www.internetedadinero.com';
</script>

Conclusiones

Al agregar el documento PHP el formulario quedara funcional, los datos agregados irán al correo electrónico que especifiquemos una vez el usuario oprima el botón de «enviar». Puedes revisar el formulario y hacer pruebas de envio para verificar que todo este funcionando correctamente. Si deseas puedes descargar los archivos y ver el ejemplo en los enlaces a continuación.

Ver ejemplo: Formulario de contacto HTML5/CSS3/PHP
Descargar archivos: Formulario de contacto HTML5/CSS3/PHP

No olvides comentar si tienes alguna duda y si te ha gustado el articulo compártelo ¡Muchas Gracias!

Share This