Con la introducción y apertura de HTML5 como opción de desarrollo, el código fuente de los sitios se ha podido ir limpiando y gracias el uso de las propiedades y características con las que cuenta esta nueva versión del lenguaje, los formularios también han sido simplificados.
En la actualidad, los formularios representan uno de los elementos más fundamentales de las estructuras HTML. Su comportamiento y funcionalidad se ha convertido en un aspecto muy relevante para los sitios web, ya que gracias a ellos se nos permite establecer una interactividad con el usuario y obtener información o contenido que nos permitirá brindar alguna clase de servicio.
En este artículo vamos a aplicar una combinación muy básica de HTML5 con CSS y PHP para crear un formulario de contacto. Es muy probable que a lo largo de tu carrera como desarrollador ya hayas creado una gran cantidad de formularios de contacto, por lo que esto pueda parecer poco atractivo en principio pero tenemos que aclarar que nuestro propósito aquí es aprender utilizar las características de HTML5, eso es lo que marca la diferencia.
Por otro lado, si no tienes conocimientos de programación no te preocupes, no necesitas aprender PHP un nivel muy avanzado para seguir este tutorial.
Requerimientos
Primero que nada, debemos establecer los requerimientos básicos para poder llevar a cabo la práctica de este artículo. Hay que recordar que para poder manejar archivos de tipo PHP como páginas de internet, necesitamos habilitado un servidor web o incluir el servicio en alguna de nuestras computadoras.
Para ello basta con instalar Apache y establecer las conexiones necesarias con el interprete de PHP, en caso de que estemos en una máquina con Windows basta con instalar algún programa como XAMPP o WAMP para levantar todos los servicios y comunicar incluso con una base de datos. Por otro lado, si en tu caso tienes una computadora con Linux, puedes instalar todos los paquetes por separado a través de “apt-get install”.
Estableciendo lo básico de HTML5
Al empezar a desarrollar el código lo primero que debemos crear es nuestro archivo principal, el cual recibirá el nombre de “index.php” y en su primera versión lucirá así:
<header class="principal">
<h1>Mi formulario de contacto HTML5</h1>;
</header>
<section class="principal">
<!-- Aqui irá nuestro formulario -->
</section>
Sin olvidar incluir al principio del archivo la siguiente línea:
<!DOCTYPE HTML>
Como podemos apreciar, a diferencia de la versión anterior de HTML, ahora utilizamos un “DOCTYPE” mucho más limpio y sencillo donde simplemente especificamos que nuestro código hará referencia a una página HTML. Si utilizaste DOCTYPE en el pasado podrás notar la diferencia de la que hablo, y es bastante agradable.
Por otra parte, es muy probable que también hayas notado que hacemos uso de las etiquetas “header” y “section”, estas vienen a reemplazar el empleo excesivo de la etiqueta “div” y de esta manera utilizar etiquetas más específicas que permitan agregar especificidad al código. A estas etiquetas les ha sido asignada la clase “principal”, a la cual le modificaremos el estilo más adelante.
Vale aclarar que HTML5 también incorpora otra etiqueta de nombre “footer” la cual se utilizará, como su nombre lo da a entender, para delimitar el pie de página. En esta ocasión no haremos uso de ella, pero es importante conocerla desde ahora.
El formulario
Es momento de definir el código que le dará forma a nuestro formulario, y como queremos mantenerlo lo más sencillo posible, simplemente incluiremos tres campos, en los cuales pediremos información básica como nombre, correo y mensaje. Para ello basta con incluir el siguiente código dentro de “section”:
<form>
<label for="nombre">Nombre:</label>
<input id="nombre" name="nombre" placeholder="Nombre completo">
<label for="email">Email:</label>
<input id="email" name="email" type="email" placeholder="ejemplo@email.com">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" placeholder="Danos tu mensaje"></textarea>
<input id="submit" name="submit" type="submit" value="Enviar">
</form>
Una vez más podremos notar una serie de diferencias con el código que normalmente manejamos, ya que por ejemplo no necesitamos cerrar la etiqueta input, faltando al respeto a los puristas de XHTML, pero cumpliendo con lo que HTML5 pide.
Además utilizamos un tipo “email” en el segundo campo de nuestro formulario, esto nos facilitará la validación y permitirá que el campo sea desplegado de manera adecuada en dispositivos móviles, permitiendo incrustar el sígno de arroba. En caso de que el navegador donde despleguemos el formulario no maneje aún el tipo “email” entonces el campo será asignado como tipo “text”.
Y finalmente se encuentra “placeholder”, otro atributo bastante atractivo que nos permite agregar un texto preliminar el cual se borrará automáticamente al momento de dar clic en el campo. Esta función nos viene a facilitar la vida, evitándonos pasar tiempo con JavaScript tratando de imitar este efecto.
Con esto, nuestro código HTML5 queda finalizado, como podemos apreciar luce bastante sencillo y en unos minutos comprobaremos su funcionalidad, pero primero ya que tenemos nuestra estructura bien definida tenemos que pasar a darle el estilo necesario para que luzca de manera adecuada.
Estilo con CSS
En esta parte la creatividad de cada quien jugará su papel, en esta ocasión para propósitos del artículo simplemente incluiré estilos básicos que nos permitan centrar el contenido y hacer un poco más grande los campos del formulario, a su vez asignare un color un poco más agradable para la vista y modificaré el botón de envío.
Para lograr esto incluimos el siguiente código en un archivo de tipo CSS:
label {
display:block;
margin-top:20px;
letter-spacing:1px;
}
.principal {
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;
}
Y lo incluimos dentro de nuestro “index” de la siguiente manera:
<link type="text/css" rel="stylesheet" href="estilo.css">
Integración con PHP
Para darle el toque final a nuestro código debemos añadir a la etiqueta “form” los atributos “method” y “action”, los cuales nos ayudarán a mandar la información:
<form method="post" action="index.php">
Con este código indicamos que utilizaremos el método POST para mandar información y esta estará dirigida hacia la página “index.php”, donde finalmente debemos definir que hacer con ella, y para eso añadimos este código PHP:
$nombre = $ _POST['nombre'];
$email = $ _POST['email'];
$mensaje = $ _POST['mensaje'];
$para = 'tucorreo@email.com';
$titulo = 'Hola - La Webera';
$msjCorreo = "Nombre: $nombre\n E-Mail: $email\n Mensaje:\n $mensaje";
if ($ _POST['submit']) {
if (mail ($para, $titulo, $msjCorreo)) {
echo 'El mensaje se ha enviado';
} else {
echo 'Falló el envio';
}
}
modificado el 12 septiembre, 2013 23:08
Ver comentarios (20)
Alguien puede subir como les queda el fichero HTML, CSS y PHP funcionando?
Hay cosas que corregir en el codigo PHP
1.- debe empezar con "
2.- "$_POST" es lo correcto. En el código que han puesto hay un espacio en entre $ y _
Muchas gracias, me sirvió de mucha ayuda.
Me alegro mucho Erik!
Ahora a aplicarlo en tu web :)
Que aplicación o IDE recomiendas para llevar a cabo un proyecto con php, html5 que sea dinámico?
Hola Fernando,
Pues por ejemplo VS code (https://code.visualstudio.com/) está muy bien. Que además tiene extensiones e integración con herramientas como github, etc. que te facilitan bastante la vida.
Un saludo.
Hola xD creo que esta muy básico, pero aun asi se aprecia tu tutorial :)
hola buenas tardes disculpa el php va en el index.php o tengo que hacer una nueva para lo de php,
y el form del formulario se modifica por esto ?????????
yo hice mi index.php donde se encuentra mi formilario jalando mi css y en otro puse lo de php donde se encuentran las variables con el metodo post pero a la hora de regstrarme y darle enviar me manda error en la linea 3 del php :'(
alguien podria ayudarme......
Ojalá todos los tutoriales y ejemplos fueran así de claros y sencillos.
Gracias amigo, funciona perfecto!!!.
te hago una consulta, tenes un fomulario de ejemplo pero para que el q escribe tambien pueda cargar una imagen o un archivo? muchas gracias
el bloque de código php debe estar entre el tag de body y el de form y así funciona..
lo extraño es que cuando llega el mail, de remitente aparece mailphp@extension del servidor donde está alojado.. y no veo donde cambiarlo.
saluts..!
gracias!
Buenas
He probado el formulario y no me carga la pagina con el código php. En cambio cuando dejo vacío, y el archivo en extensión php me lo carga perfectamente. Cuando coloco el código php se queda la pagina en blanco.
Muchas gracias.
No tengo claro donde debo incluir la informacion de integracion con PHP
¿es en la misma pagina index o es un nuevo documento php?
Gracias, lo demás me funciona bien.
El tuto está genial, pero tengo una duda:
¿solo se crean dos archivos el index y el css ? por lo general utilizaba un php con el nombre send . gracias
Simple y completamente funcional.
En un tiempo de puro copipaste estos tutoriales son los que realmente destacan.
Hola, gracias por el tuto, he seguido todo pero al darle enviar me saca un error:500, cambié el correo de la variable por uno que tengo en gmail, y sin embargo me sigue sacando el mismo error, ¿qué puedo hacer?
FUNCIONA EXCELENTE!!!!! finalmente encuentro un formulario sencillo de hacer y sin problemas!
de verdad muchas gracias!!!
Hola, bueno yo tengo el mismo problema que karlos, pero al poner mi correo no me llega nada, sólo aparece lo que escribí en los campos en la barra de dirección. Te agradecería si me ayudas con esto :D de ante mano muchas gracias...
Hola Karlos, en la variable PHP que lleva por nombre "$para" es donde debes incluir el email destinatario, en nuestro ejemplo pusimos un email inventado para demostrar como luciría la declaración:
$para = 'tucorreo@email.com';
Saludos
Hola que tal estuve revisando los ejemplos, me agrada el de html pero tengo una pequeña pregunta: ¿en que parte del código introduciría el correo al cual quiero que lleguen los mensajes? si me pudieras decir te lo agradecería, hasta pronto =)