comparte el articulo 

Formulario de contacto con HTML5, CSS y PHP

Actualizado el 12/09/2013 < > 17 Cometarios

Resumen: Integramos tres tecnologías vigentes como lo son HTML5, CSS y PHP para realizar un sencillo formulario de contacto que nos permita poner en práctica las nuevas características del lenguaje de marcado.

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';
}
}

Publicado el 13/10/2011, última actualización 12/09/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

17 Cometarios

  1. Karlos

    Hola que tal estuve checando los ejemplos me agrada el de html pero tengo una pequeña pregunta en que parte del codigo ingresaria el correo al cual quiero que llegen los mensajes? si me pudieras decir te lo agradeceria hasta pronto =)

    Jueves, 15 de diciembre 2011

  2. Daniel Ernesto Navarro Herrera

    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

    Martes, 3 de enero 2012

  3. jaime

    hola bueno yo tengo el mismo problema que karlos…. pero al poner mi correo no me llega nada solo 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…

    Jueves, 23 de febrero 2012

  4. alejandro

    ¿en php es permitidometer las variables asi en la cadena?
    $msjCorreo = “Nombre: $nombre\n E-Mail: $email\n Mensaje:\n $mensaje”;

    no deveria ser asi
    $msjCorreo = “Nombre: “.$nombre.”\n E-Mail: “.$email.”\n Mensaje:\n “.$mensaje;

    alguen que explique el porq

    Viernes, 9 de marzo 2012

  5. Alfredo Gutiérrez

    FUNCIONA EXCELENTE!!!!! finalmente encuentro un formulario sencillo de hacer y sin problemas!
    de verdad muchas gracias!!!

    Sábado, 10 de marzo 2012

  6. Pablo

    Hola, gracias por el tuto, he seguido todo pero al darle enviar me saca un error:500, cambié el correo de la variable para por uno que tengo en gmail, y sin embargo me sigue sacando el mismo error, que puedo hacer?

    Jueves, 15 de marzo 2012

  7. jorge sanabria

    Simple y completamente funcional
    En un tiempo de puro copipaste estos tutoriales son los que realmente destacan

    Sábado, 24 de marzo 2012

  8. Daniel Castro

    Elñ tuto esta bueno.

    tengo una duda

    solo se crean dos archivos el index y el css ? por lo general utilizaba un php con el nombre send . gracias

    Viernes, 29 de junio 2012

  9. Amy

    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 demas me funciona bien

    Miércoles, 1 de agosto 2012

  10. Yann

    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.

    Lunes, 20 de agosto 2012

  11. María

    gracias!

    Viernes, 31 de agosto 2012

  12. Rodrigo

    el bloque de codigo php debe estar entre el tag de y el de y asi funciona..

    lo extraño es que cuando llega el mail.. de remitente aparece mailphp@extension del servidor donde esta alojado.. y no le veo donde cambiarlo…

    saluts..!

    Lunes, 1 de octubre 2012

  13. Rodrigo

    no se posteo bien el comentario.. el bloque php debe estar declarado previamente del tag de -form- pero debajo el primer tag body…

    Lunes, 1 de octubre 2012

  14. andres molina

    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

    Miércoles, 17 de julio 2013

  15. Omar

    Ojalá todos los tutoriales y ejemplos fueran así de claros y sencillos.
    Gracias amigo, funciona perfecto!!!.

    Sábado, 31 de agosto 2013

  16. rene

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

    Lunes, 24 de noviembre 2014

  17. Andrew

    Hola xD creo que esta muy básico, pero aun asi se aprecia tu tutorial :)

    Domingo, 28 de junio 2015

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras