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.
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í:
1
2
3
4
5
6
| <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:
1
| <!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”:
1
2
3
4
5
6
7
8
9
| <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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| 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:
1
| <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:
1
| <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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $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';} |
No hay comentarios:
Publicar un comentario