Está en la página 1de 7

Cmo hacer un formulario de contacto

Publicado por XabaducerrarAutor: XabaduNombre: Fernando Larraaga


Email: xabadu@gmail.com Sitio: http://www.comolohago.cl Xabadu es: Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extrao para Xabadu. Luego de ser descubierto a los 4 aos en un partido de barrio por los ojeadores del gran Aviacin F.C., sacudi el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungar y una incursin en la 3a divisin del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros ms recordados en la historia pelotera nacional. Una lesin en el colmillo superior derecho lo llev al retiro el ao 2003, pero est de vuelta y sin duda que su jerarqua y experiencia internacional ser un gran aporte.Ver sus tutoriales (175) en PHP el 07 Octubre 2008 | 44 Comentarios

Cuando hacemos nuestra pgina 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 algn bien o servicio que ofrezcamos.

Hay algunos que prefieren otorgar informacin a los usuarios sobre como ponerse en contacto con nosotros (Direccin, telfono, correo electrnico, etc). Sin embargo, el mtodo ms 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 botn. Fcil y bonito eh?. Como siempre, todo el detalle de esto, despus del salto.

Cmo 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 envo de la informacin va correo electrnico, desde la direccin de quien enviaba la informacin hacia la nuestra. Esto era bastante molesto e incmodo para muchos usuarios, ya que al estar vinculado el formulario a un link de tipo mailto, se activaba automticamente el cliente de correo por defecto del usuario (Outlook, Outlook Express, Eudora, etc), el cual muchos usuarios no tenan configurado con una cuenta y por ende se perda la oportunidad de contacto. Con la salida de los lenguajes dinmicos de programacin Web (PHP, JSP, ASP, etc), se empez a implementar un envo de formularios va correo electrnico pero a travs del servidor Web donde estaba alojada la pgina. 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 funcin, al cual le aadiremos una pequea sentencia, la cual se encargar de validar la direccin 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 versin de evaluacin 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). Adems, si nunca han trabajado con formularios, recomendamos leer este tutorial donde cubrimos el proceso de creacin en forma detallada. Con todo eso listo, vamos, manos a la obra:

Procedimiento:
1.- Lo primero que haremos, ser crear en Dreamweaver, una nueva pgina en formato PHP, para esto vamos a Archivo > Nuevo > PHP. Esta pgina 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 Electrnico 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). Adems debemos agregar un botn ms 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 botn de tipo Reset Form para limpiar los datos. Es conveniente adems agregar un pequeo texto sobre el formulario que diga Los campos con * son obligatorios y consecuentemente agregar un asterisco al lado de Nombre, Correo electrnico 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 diseo de nuestro formulario, ahora pasaremos a confeccionar el cdigo que har todo el proceso de envo de la informacin. Para esto, en la vista de diseo de Dreamweaver (en la que hemos estado trabajando hasta ahora) nos situamos antes del formulario y pasamos a la vista de cdigo, donde debemos insertar el siguiente cdigo: <?php if(!$_POST) { ?> Bsicamente lo que le estamos diciendo es Si no se ha enviado informacin desde el formulario, muestre lo siguiente, con lo que mostrar el cdigo que viene a continuacin, o sea el correspondiente al formulario vaco. 4.- Luego del fin del cdigo HTML correspondiente al formulario (luego de la etiqueta </form>), debemos agregar el siguiente cdigo, el cual ir con comentarios entremedio en negrita, cursiva y entre /* y */ para ir entendiendo lo que vamos haciendo: <?php } /* Si no se ejecuto el if de ms arriba, y por ende el formulario, pasara al else que detallamos a continuacin, el cual se encargar de hacer todo el procesamiento */ else { /* Partimos por inicializar 3 variables: $recipiente, $asunto y $error, las cuales contendrn respectivamente el correo al que llegar la informacin (nuestro), el asunto

del correo que nos llegar y una marca para definir los tipos de errores que se puedan dar dentro del proceso. Pueden editar los valores de $recipiente y $asunto segn deseen */ $recipiente = mail@ejemplo.com; $asunto = Contacto Sitio Web; $error = 0; /* A continuacin, recogemos los campos enviados por el formulario en el vector $_POST y los almacenamos en variables */ $nombre = $_POST['nombre']; $email = $_POST['correo']; $sitio = $_POST['sitio']; $comentario = $_POST['mensaje']; /* Luego verificamos si los campos obligatorios han sido llenados, de lo contrario, marcamos un 1 en la variable $error */ if($nombre == || $email == || $comentario == ) { $error=1; } /* Luego validamos si el correo ingresado es valido mediante la siguiente sentencia. Si no es vlido, le asignamos valor 2 a la variable $error */ elseif(!eregi(^[a-z0-9]+([_\\.-][a-z0-9]+)* .@.([a-z0-9]+([\.-][a-z0-9]+)*)+.\\.[a-z] {2,}.$,$email)){ $error=2; } /* A continuacin, definimos nuestros mensajes de error en caso de que se haya cado en alguno de los pasos anteriores, mediante un if y luego mostrando el mensaje correspondiente. Adems proveemos un enlace para que vuelva al formulario mediante la funcion back de Javascript */ if($error==1){ echo El siguiente error ha ocurrido:<br>; echo No ha rellenado todos los campos obligatorios.<br> Por favor vuelva <a href=\javascript:history.back()\>atras</a>.<br>; } elseif($error==2){ echo El siguiente error ha ocurrido:<br>; echo El correo electronico es invalido.<br> Por favor vuelva <a

href=\javascript:history.back()\>atras</a>.<br>; } /* En caso de que no haya incurrido en ningn error, pasamos al else donde definiremos el proceso para enviar el mensaje */ else{ /* Definimos una variable $message , en la cual iremos agregando la informacin recogida en las variables y la iremos concatenando (uniendo) mediante un punto para dejar dentro de una sola variable toda la informacin */ $message =nombre: .$nombre.<br>; $message .=email: .$email.<br>; $message .=sitio web: .$sitio.<br>; $message .=Mensaje: .$comentario.<br>; /* Luego, dentro de la misma variable $message, guardamos el resultado de someterla a la funcin stripslashes pasandole como parametro el mismo mensaje. Lo que har es retirar todas las \ existentes antes de las comillas simples o dobles. */ $message = stripslashes($message); /* A continuacin creamos una variable $headers, en la cual incluiremos todos las cabeceras necesarias para un envo de correo electrnico. El texto a continuacin es por defecto as que es recomendable no modificarlo. */ $headers = MIME-Version: 1.0\r\n; $headers .= Content-type:text/html; charset=iso-8859-1\r\n; $headers .= From: $email\r\n; $headers .= Repaly-to: $email\r\n; $headers .= Cc: $email\r\n; /* Y finalmente realizamos el envo del mensaje mediante la funcin mail de PHP, la cual nos solicita como parametro: el correo de destino ($recipiente), el asunto ($asunto), el mensaje ($message) y las cabeceras ($headers) */ mail($recipiente,$asunto,$message,$headers); /* Si todo ha salido bien, presentamos un mensaje de xito de envo. Pueden personalizarlo segn quieran */ echo El mensaje ha sido enviado.<br>; echo Nos contactaremos con Ud. a la brevedad.<br>; } } ?>

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 pgina permita el envo de correos electrnicos a travs de el. En la mayora de los alojamientos est activada la opcin, pero en caso de que les presente algn problema, deben ponerse en contacto con el administrador de su servicio. 2.- Este formulario es relativamente bsico. Pueden agregar ms campos segn sea su conveniencia, solo asegurandose de hacer el respectivo rescate de datos y la adicin 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 Garanta. Cualquier duda, consulta o problema, pueden dejarnos unas lneas en el rea habilitada a continuacin. Esperamos que este tutorial haya sido de utilidad para Uds. Muchas gracias por leer y ser hasta una prxima oportunidad. Staff Comolohago.cl

Tutoriales relacionados:

Cmo crear un formulario de contacto Versin 2.0 Como hacer una recomendacion a amigos en PHP Cmo hacer un registro de usuarios en PHP Cmo estilizar los formularios de nuestros sitios Web Cmo validar campos de un formulario mediante Javascript