Como crear un formulario de contacto

Categorias: Desarrollo web, Aplicaciones prefabricadas

La mayoría de nuestros clientes suelen añadir un formulario de contacto en su sitio web. Algunos crean el formulario usando PHP; otros utilizan el formulario de contacto incluido en el gestor de contenidos (CMS) con el cual gestionan su sitio web, como Mambo, PHP-Nuke o X-Cart; y por último, la mayoría utiliza el script “formmail.php” que viene preinstalada en la mayoría de nuestros servidores.

Nota: este tutorial es sólo para clientes de guebs.

Un formulario de contacto típico permite al usuario la entrada de datos en unos campos previamente definidos por el webmaster del sitio, la validación de los datos introducidos por el usuario y la recepción de estos datos en una dirección de correo electrónico definido por el webmaster. Esto es lo más común, útil y lo que precisamente, permite nuestro script “formmail.php”.

Crear un formulario de contacto utilizando el script “formmail.php” es tan sencillo como:

1. Crear el código HTML del formulario y pegarlo en cualquiera de las páginas de tu sitio web, ya sea una página nueva como una página que ya existente.
2. Probar y verificar que el formulario funciona.
3. Opcionalmente, crear 3 páginas HTML adicionales. Uno de ellos serán el que se muestra al usuario cuando el envio del formulario es correcto, otro cuando algunos de los datos introducidos es incorrecto y otro cuando, el usuario no ha completado todos los campos obligatorios.

Código HTML básico del formulario

Como ejemplo, vamos a mostrar el código básico de un formulario con 4 campos:

<form action="http://www.tudominio.com/cgi-sys/formmail.php" method="post"> <input type="hidden" name="recipient" value="tunombre@tudominio.com"/> E-mail: <input type="text" size="50" name="email"/> <br /> Nombre: <input type="text" size="50" name="realname"/> <br /> Asunto: <input type="text" size="50" name="subject"/> <br /> Mensaje:<br /> <textarea cols="50" rows="15" name="message"></textarea> <br /> <input type="submit" value="submit"/> </form>

Puedes modificar el formulario a tu gusto, pero asegurate de que defines el atributo “action” del formulario correctamente y que incluyes el campo oculto “recipient” con tu dirección de correo como valor del mismo. El dominio de está dirección de correo debe ser el mismo que el dominio para el cual estás configurando este formulario. Tampoco debes olvidate de incluir el campo “email” ya que este también es obligatorio.

Ten en cuenta también, que los campos “realname” y “subject” no son obligatorios, pero si los defines “realname” será utilizado como remitente del email que recibirás y el campo “subject” será utilizado como el asunto de este email. Por lo tanto, es conveniente utilizarlos, pero no obligatorio.

Campos obligatorios

Hasta ahora hemos visto un ejemplo básico del formulario, pero el script formmail.php dispone muchas otras funcionalidades. Por ejemplo, incluyendo el campo oculto “required” puedes hacer que uno o varios campos del formulario sean obligatorios.

Basandonos en el formulario anterior, si incluimos el siguiente campo oculto “required”, haremos que los campos “subject” y “message” sean obligatorios:

<input type="hidden" name="required" value="subject,message"/>

Como ahora, los campos “subject” y “message” son obligatorios, tendremos que indicarlo en formulario:

<form action="http://www.tudominio.com/cgi-sys/formmail.php" method="post"> <input type="hidden" name="recipient" value="tunombre@tudominio.com"/> <input type="hidden" name="required" value="subject,message"/> E-mail: <input type="text" size="50" name="email"/> <br /> Nombre: <input type="text" size="50" name="realname"/> <br /> Asunto: <input type="text" size="50" name="subject"/> (Obligatorio) <br /> Mensaje: (Obligatorio)<br /> <textarea cols="50" rows="15" name="message"></textarea> <br /> <input type="submit" value="submit"/> </form>

Información del usuario

Otra de las opciones disponibles es la posibilidad de incluir en el email la dirección IP y la identificación del navegador del usuario que ha cumplimentando el formulario, para ello tendremos que añadir el campo oculto “env_report” a nuestro formulario:

<input type="hidden" name="env_report" value="REMOTE_ADDR,HTTP_USER_AGENT"/>

Incluir el formulario en tu sitio web

Ahora que ya tenemos el código definitivo del formulario, ya podemos adaptar su diseño a nuestras necesidades e incluirlo en nuestro sitio web. Como ejemplo, crearemos una nueva página cuyo único contenido será el formulario:

<html> <head> <title>Formulario de contacto</title> </head> <body> <form action="http://www.tudominio.com/cgi-sys/formmail.php" method="post"> <input type="hidden" name="recipient" value="tunombre@tudominio.com"/> <input type="hidden" name="required" value="subject,message"/> <input type="hidden" name="env_report" value="REMOTE_ADDR,HTTP_USER_AGENT"/>   <table border="0"> <tr> <td colspan="2">Los campos con asterisco son obligatorios.</td> </tr> <tr> <td>E-mail *</td> <td><input type="text" size="50" name="email"/></td> </tr> <tr> <td>Nombre</td> <td><input type="text" size="50" name="realname"/></td> </tr> <tr> <td>Asunto</td> <td><input type="text" size="50" name="subject"/></td> </tr> <tr> <td>Mensaje *</td> <td><textarea cols="50" rows="15" name="message"></textarea></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="submit"/></td> </tr> </table> </form> </body> </html>

Este código tendrás que pegarlo en un nuevo documento en blanco, guardarlo con el nombre que quieras ( por ejemplo: “contacto.html” ) y subirlo a tu sitio web mediante FTP. Una vez hecho esto, lo mejor es que accedas al formulario con tu navegador y verifiques que funciona correctamente.

Páginas de resultado personalizados

Si has probado el formulario habrás visto que, al rellenar y enviar el formulario, los mensajes que muestra son muy aburridos. Si quieres personalizar estos mensajes, crea 3 nuevas páginas HTML y subelas a tu sitio web. Una de estás páginas será el que se muestra al usuario cuando el envio del formulario es correcto, otra cuando alguno de los datos introducidos es incorrecto y otra, cuando el usuario no ha completado todos los campos obligatorios.

Una vez hayas creado estas 3 nuevas páginas HTML, debes indicar al formulario cuales son estas páginas incluyendo los siguientes 3 campos ocultos en el código HTML del formulario:

<input type="hidden" name="redirect" value="http://www.tudominio.com/envio_correcto.html" /> <input type="hidden" name="error_redirect" value="http://www.tudominio.com/envio_error.html" /> <input type="hidden" name="missing_fields_redirect" value="http://www.tudominio.com/envio_incompleto.html" />

En el campo oculto “redirect” debes indicar la dirección de la página que muestra el mensaje de envio correcto, en el campo “error_redirect” debes indicar la dirección de la página de error y en el campo “missing_fields_redirect” debes indicar la dirección de la página que indica que hay campos obligatorios que no han sido rellenados.

Tagging: formmail, formularios, formulario contacto