Cuando hacemos nuestra página Web, un aspecto muy importante que nunca debemos dejar de lado es otorgarle a nuestros visitantes un medio de contacto con nosotros, en caso de que tengan consultas, comentarios, o bien esten interesados en algún bien o servicio que ofrezcamos.

Hay algunos que prefieren otorgar información a los usuarios sobre como ponerse en contacto con nosotros (Dirección, teléfono, correo electrónico, etc). Sin embargo, el método más efectivo es sin duda un formulario mediante el cual un usuario en particular puede contactarnos tan solo llenando unos campos y presionando un simple de botón. ¿Fácil y bonito eh?.

Como siempre, todo el detalle de esto, después del salto.

Cómo hacer un formulario de contacto

Antes de entrar de lleno, un par de explicaciones:

1.- Antiguamente, los formularios de contacto iban directamente relacionados a un envío de la información vía correo electrónico, desde la dirección de quien enviaba la información hacia la nuestra. Esto era bastante molesto e incómodo para muchos usuarios, ya que al estar vinculado el formulario a un link de tipo “mailto”, se activaba automáticamente el cliente de correo por defecto del usuario (Outlook, Outlook Express, Eudora, etc), el cual muchos usuarios no tenían configurado con una cuenta y por ende se perdía la oportunidad de contacto.

Con la salida de los lenguajes dinámicos de programación Web (PHP, JSP, ASP, etc), se empezó a implementar un envío de formularios vía correo electrónico pero a través del servidor Web donde estaba alojada la página. Esto logró que el usuario solo se preocupará de ingresar sus datos y enviarlos, dejando al servidor para que se encargara del resto, lo cual obviamente se tradujo en una mayor comodidad para los visitantes.

2.- Tomando eso en cuenta, hoy construiremos un sencillo formulario en PHP que haga justamente esa función, al cual le añadiremos una pequeña sentencia, la cual se encargará de validar la dirección de correo ingresada por el usuario.

Con eso claro, vamos a lo que utilizaremos:

Implementos necesarios:

1. Un editor Web. Para este caso utilizaremos el clasico Adobe Dreamweaver CS3 (Pueden conseguir una versión de evaluación en el siguiente enlace).
2. Un servidor Web que soporte PHP (pueden descargar Xampp desde este enlace), o bien un alojamiento Web que soporte el lenguaje (pueden encontrar algunos gratuitos en este enlace).

Además, si nunca han trabajado con formularios, recomendamos leer este tutorial donde cubrimos el proceso de creación en forma detallada.

Con todo eso listo, vamos, manos a la obra:

Procedimiento:

1.- Lo primero que haremos, será crear en Dreamweaver, una nueva página en formato PHP, para esto vamos a Archivo > Nuevo > PHP. Esta página la guardaremos de inmediato con el nombre de contacto.php

2.- Una vez que lo creamos, procederemos a confeccionar nuestro formulario de contacto, el cual deberá contener los siguientes campos:

1. Nombre – Textfield (campo de texto de largo 30) y le pondremos como nombre al textfield “nombre” (sin comillas).
2. Correo Electrónico – Textfield (campo de texto de largo 30) y le pondremos como nombre al textfield “correo” (sin comillas).
3. Sitio Web – Texfield (campo de texto de largo 30) y le pondremos como nombre al texfield “sitio” (sin comillas).
4. Mensaje – Textarea (área de texto, largo y ancho pueden acomodarlo a su gusto) y le pondremos como nombre al textarea “mensaje” (sin comillas).

Además debemos agregar un botón más abajo dentro del mismo formulario que tenga un action de tipo Submit Form, al cual en su valor le pondremos “Enviar”. Opcionalmente pueden agregar un botón de tipo Reset Form para limpiar los datos.

Es conveniente además agregar un pequeño texto sobre el formulario que diga “Los campos con * son obligatorios” y consecuentemente agregar un asterisco al lado de Nombre, Correo electrónico y Mensaje. Luego validaremos que esos datos se hayan ingresado.

Ahora, hacemos click sobre el formulario y en el Inspector de propiedades modificamos los siguientes valores:

1. Action: contacto.php
2. Method: POST

Al terminar deberiamos tener algo como esto:

Propiedades – Click para agrandar

3.- Con esto hemos terminado el diseño de nuestro formulario, ahora pasaremos a confeccionar el código que hará todo el proceso de envío de la información. Para esto, en la vista de diseño de Dreamweaver (en la que hemos estado trabajando hasta ahora) nos situamos antes del formulario y pasamos a la vista de código, donde debemos insertar el siguiente código:

Básicamente lo que le estamos diciendo es “Si no se ha enviado información desde el formulario, muestre lo siguiente”, con lo que mostrará el código que viene a continuación, o sea el correspondiente al formulario vacío.

4.- Luego del fin del código HTML correspondiente al formulario (luego de la etiqueta </form>), debemos agregar el siguiente código, el cual irá con comentarios entremedio en negrita, cursiva y entre /* y */ para ir entendiendo lo que vamos haciendo:

Y con eso tenemos nuestro formulario de contacto listo. Podemos subirlo a nuestro sitio Web y solo esperar que alguien nos contacte.

Algunas notas adicionales:

1.- Para el funcionamiento de este formulario, se requiere que el servidor donde alojemos la página permita el envío de correos electrónicos a través de el. En la mayoría de los alojamientos está activada la opción, pero en caso de que les presente algún problema, deben ponerse en contacto con el administrador de su servicio.

2.- Este formulario es relativamente básico. Pueden agregar más campos según sea su conveniencia, solo asegurandose de hacer el respectivo rescate de datos y la adición correspondiente al mensaje que se terminará enviando.

Como siempre, este tutorial ha sido desarrollado, probado y documentado por el equipo de Como Lo Hago, por lo que cuenta con nuestro Sello de Garantía.

Cualquier duda, consulta o problema, pueden dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.