Tutoriales de diseño web

HTML5, CSS3 y JQuery

volver al índice

Formulario de contacto con envío PHP

Escrito por Laura Chuburu

Simple y fácil de usar

Prácticamente todos los sitios web necesitan un formulario de contacto que se resuelve en HTML, CSS y PHP. Si estamos trabajando en equipo, el envío del formulario (en PHP u otro lenguaje) lo resuelven los programadores y sin dudas es la mejor manera de hacerlo. Pero si somos diseñadores o maquetadores y estamos trabajando solos en un proyecto simple, este formulario nos permite salir del paso.

Captura de pantalla del formulario

Cómo usar

Descargar la carpeta fuera de nuestro proyecto. Dentro de la carpeta encontraremos los siguientes archivos:

Archivo index.html:

En este archivo, dentro del body está el el formulario con todos los campos. Copiar todo el código que se encuentra entre los comentarios y pegar en el archivo donde queremos que aparezca, por ejemplo en la página contacto.html puede ser dentro de una div o article que defina una columna. En el head de ese archivo hay un vínculo con una fuente de Google que usamos para diseñar el demo, pero la fuente utilizada dependerá de cada proyecto.

Archivo styles.css

En este archivo se encuentran las reglas css necesarias para definir el aspecto visual del formulario. No hace falta vincularlo porque es muy poco código, se pueden copiar y pegar en la hoja de estilos del proyecto.

La propiedad que seguramente sea necesario modificar es el max-width del selector .form-consulta {} para adaptarlo a su contenedor. Por otro lado la familia tipográfica de los campos de formulario por defecto es arial y para cambiarla es necesario definirla dentro de la regla que afecta a los input (en este caso .campo-form) ya que esa propiedad no la hereda del body o de otro elemento padre.

Archivo envia.php

Este archivo es el que resuelve el envío. Hay que copiarlo y pegarlo dentro de nuestro proyecto en la misma carpeta donde está el archivo que tiene el formulario. Si se va a usar tal cual con los mismos campos, sólo es necesario abrir en un editor de código y cambiar en la línea 3 el mail al que queremos que llegue.

Archivo confirma.html

Este archivo se usa para confirmarle al usuario que su mensaje fue enviado. No tiene nada especial, no hace falta copiarlo de la carpeta, pero sí es necesario crearlo y guardarlo dentro de la misma carpeta donde están los otros dos archivos. Usualmente lo crearemos en base a cualquier otra página ya creada del sitio web con un mensaje de confirmación.

Cómo hacer pruebas y posibles errores

Para probar el formulario es necesario subirlo al servidor de hosting y hacer las pruebas online.

Si al probar el formulario nos lleva a la página confirma.html, quiere decir que el mensaje fue enviado. Si no lo recibimos puede estar en correo no deseado.

Si en cambio nos da algún tipo de error, primero confirmar que los archivos envia.php y confirma.html estén subidos al servidor y se encuentren en la misma carpeta. Si están los archivos, revisar el mensaje de error para ubicar un posible error de sintaxis en alguno de los archivos.

NOTA: En el caso del demo -que está al comienzo de este tutorial- no está subido al servidor el archivo envia.php, por lo que si se prueba el envío, da error de archivo no encontrado: Not Found

Cómo hacer cambios

En el archivo envia.php las líneas 11, 12 y 13 tienen un código similar a éste:

$cuerpo = "Nombre y apellido: " . $_POST["nombre"] . "\r\n";

En esa línea las palabras "Nombre y apellido:" se van a ver en el cuerpo del mensaje. En cambio la palabra "nombre" que está entre corchetes corresponde al name="nombre" (en el html) del primer input y es necesaria para realizar el envío.

Entonces si necesitamos agregar por ejemplo un campo "teléfono" al formulario debemos agregar en el html un input similar al del nombre pero con un name="telefono" (sin acento) y en el archivo envia.php agregar la siguiente línea

$cuerpo = "Teléfono: " . $_POST["telefono"] . "\r\n";

Los formularios más complejos o de proyectos más grandes nos va a convenir resolverlo con un programador, pero para situaciones de menor exigencia, este formulario anda bastante bien.

Licencia Creative Commons
Tutoriales de diseño web por Laura Chuburu se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.