Cómo hacer un Formulario de Contacto en HTML5,CSS Y PHP/Tutorial

A continuación explicaré como realizar un formulario de contacto de manera simple y eficiente utilizando una combinación de los lenguajes HTML5, CSS y PHP.

Con la nueva versión de HTML (HTML5), el código para desarrollar sitios web es más limpio, intuitivo y comprende nuevas características y propiedades que simplifican nuestro trabajo, gracias a esto los formularios también se desarrollan de una manera más simple y efectiva.

Aunque para mucho sea una obviedad, antes de comenzar quisiera mencionar que para que funcione correctamente el formulario es necesario correrlo en un servidor web para que el código php pueda ser ejecutado.

ESTRUCTURA HTML

Para comenzar a desarrollar el formulario, primero debemos crear nuestro archivo index.html, el mismo contendrá el código que generará visualmente el formulario en nuestra página.

[html]
<!DOCTYPE html>
<!– El encabezado !DOCTYPE html especifica que se trata de un documento HTML5 –>
<html>
<head>
<link type=”text/css” rel=”stylesheet” href=”estilo.css”>
<!– La linea de arriba es para importar estilos CSS a nuestro formulario –>
<title>Formulario de contacto</title>
</head>
<body>
<section class=”formulario”>
<!– Aqui va el codigo del formulario –>
</section>
</body>
</html>
[/html]

EL FORMULARIO

A continuación daremos forma al formulario, vamos a crearlo con 3 campos: Nombre, Correo electrónico y mensaje. Para hacerlo, debemos incluir el siguiente código dentro de la etiqueta section

[html]
<form action=”contacto.php” method=”post”>
<label for=”nombre”>Nombre:</label>
<input id=”nombre” type=”text” name=”nombre” placeholder=”Nombre y Apellido” required=”” />
<label for=”email”>Email:</label>
<input id=”email” type=”email” name=”email” placeholder=”ejemplo@correo.com” required=”” />
<label for=”mensaje”>Mensaje:</label>
<textarea id=”mensaje” name=”mensaje” placeholder=”Mensaje” required=””></textarea>
<input id=”submit” type=”submit” name=”submit” value=”Enviar” />
</form>

[/html]

Quiero mencionar la función que cumplen los atributos required yplaceholder, ambos propiedades de HTML5. Required indica que el campo es obligatorio. Placeholder muestra un texto cuando el campo está vacío, para indicar al usuario que debe ir en ese campo, este texto se borra al hacer click en el campo. El tipo de campo type=”email” nos provee validación automática.

EL CSS

A continuación aplicaremos estilos al formulario, para ello debemos crear el archivo estilo.css e incluír el siguiente código en él. Esta parte depende de la creatividad de cada uno, este código se puede modificar a gusto adaptándolo al diseño de su sitio web.

[css]
label {
display:block;
margin-top:20px;
letter-spacing:1px;
}
.formulario {
display:block;
margin:0 auto;
width:510px;
color: #666666;
font-family:Arial;
}
form {
margin:0 auto;
width:400px;
}

input, textarea {
width:380px;
height:27px;
background:#666666;
border:2px solid #f6f6f6;
padding:10px;
margin-top:5px;
font-size:10px;
color:#ffffff;
}

textarea {
height:150px;
}

#submit {
width:85px;
height:35px;
border:none;
margin-top:20px;
cursor:pointer;
}
[/css]

PHP

A continuación creamos el archivo contacto.php e incluimos el siguiente código.

[php]
<?php
$nombre = $_POST[‘nombre’];
$email = $_POST[‘email’];
$mensaje = $_POST[‘mensaje’];
$para = ‘TUCORREO@CORREO.COM’;
$titulo = ‘ASUNTO DEL MENSAJE’;
$header = ‘From: ‘ . $email;
$msjCorreo = “Nombre: $nombre\n E-Mail: $email\n Mensaje:\n $mensaje”;

if ($_POST[‘submit’]) {
if (mail($para, $titulo, $msjCorreo, $header)) {
echo “<script language=’javascript’>
alert(‘Mensaje enviado, muchas gracias.’);
window.location.href = ‘http://TUSITIOWEB.COM’;
</script>”;
} else {
echo ‘Falló el envio’;
}
}
?>
[/php]

CONCLUSIÓN

Hemos creado un simple pero efectivo formulario utilizando los lenguajes HTML5, CSS y PHP. Creamos 3 archivos: index.html para mostrar el formulario, estilo.css para aplicar diseño, y contacto.php para enviar el contenido a nuestra casilla de correo.

Espero les sea útil.

GRACIAS A: MBARONETTI