Tutorial para crear un formulario de Contacto en PHP

INSTITUTO PROFESIONAL AIEP
DISEÑO GRAFICO PROFESIONAL
COMPUTACIÓN GRÁFICA PARA LA WEB

Tutorial para Desarrollar un
Formulario de Contacto

Profesor: Rubén Meléndez Montes de Oca
Computación Gráfica para la Web
Diseño Gráfico Profesional
Instituto AIEP - Sede Rancagua

Rubén Meléndez M. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com
Mayo 2007


Notas Preliminares.

• Adjunto al tutorial vienen 2 archivos de texto con líneas de código, estas se deben copiar y pegar de acuerdo a las
instrucciones expuestas a continuación.
• Los códigos adjuntos no requieren del uso ni la creación de una Base de Datos. Se requiere nada más que el enlace
a una cuenta de correo electrónica existente y un servidor web apache.
• Para que Dreamweaver “lea” el código se debe tener instalado localmente la aplicación APPSERV.
• Para su funcionamiento en la red se debe disponer de un hosting con un servidor Apache.
• La raíz del sitio deberá estar la carpeta www contenida en la siguiente ruta c:/appserv/www [esta se encuentra
creada por defecto una vez instalado el appserv].

…..manos al Código

Mayo 2007


1. Instalación de AppServ [Apache, PHP, MySQL]

AppServ es un software que nos permite instalar sobre el SO. Windows los software Apache, PHP, MySQL de forma conjunta.
Antiguamente la instalación se hacia por separado y programa a programa, siendo el principal inconveniente que la configuración se hacia
directamente modificando líneas de código bastante específicas, con la consecuente dificultad para los que no somos programadores
profesionales.

Esta es una aplicación bastante útil para empezar a familiarizarse con bases de datos, gestores de contenido, foros, blogs, por nombrar
algunas de tantas otras aplicaciones, ya que al convertir nuestro pc en un servidor nos permite realizar pruebas sobre el y luego publicarlas en
la red.

• Descargar el software del siguiente sitio: http://www.appservnetwork.com/
• Descargado el ejecutable, ejecutar la instalación, tras recibir el saludo de bienvenida y hacemos Click en Siguiente.
• Directorio de Instalación: en esta pantalla nos solicita el directorio en el que queremos instalar la aplicación, por defecto nos marca
“c:/appserv”, pulsar Siguiente. [No cambien el Directorio].
• Tipo de Instalación: Elegimos Typical.
• Server Information: La casilla Server Name la dejamos por defecto con “Localhost” y en la casilla Administrator E-mail Address
agreguen su cuenta de correo (si lo dejan por defecto no ocurre nada, se puede editar mas tarde). El campo “HTTP Port” lo dejamos
como viene (80), salvo que queramos atender las peticiones en otro puerto ¿no?. Pulsamos Siguiente.
• MySql Information: En la casilla Username coloquen su nombre (administrador de la base de datos) y en la casilla Password una
contraseña. El apartado Charset lo dejamos tal cual como viene. Pulsamos en Siguiente.
• Progreso de la instalación: Aparece una pantalla que nos avisa de que ha finalizado la misma, debiendo dejar marcadas las opciones
que vienen por defecto. Finalmente pulsamos en Close o Cerrar.

Mayo 2007


• Comprobar la instalación: Abrir el navegador (Explorer, firefox, etc) y tipear http://localhost debe aparecer en la pantalla siguiente la
siguiente información.

Si aparece esta pantalla felicitaciones!!!!!!. tú computador ahora tiene instalado un servidor apache, php y MySQL.

Ahora, si la pantalla no aparece puede que Apache o MySQL no están funcionado bien, y deban volver a instalarlo.

En su defecto también puede que tengan instalado en su PC el IIS [Internet Information Server] el cual debe ser desactivado en PANEL DE
CONTROL – AGREGAR O QUITAR PROGRAMAS – AGREGAR O QUITAR COMPONENTES DE WINDOWS – DESACTIVAR LA CASILLA
DEL I.I.S. como se indica a continuación.

Mayo 2007


.

Mayo 2007


2. El Directorio Raiz del Sitio

Una vez instalado el appserv nuestro pc esta operando con un servidor de prueba local, es sumamente importante entonces que tengamos la
siguiente consideración:

Crear todos nuestros archivos php o html dentro de la carpeta www la cual ya existe en el C: del computador

Mayo 2007


3. Formulario de Contacto y los Códigos.

Adjunto a este documento vienen dos archivos de texto que incluyen los siguientes códigos de fuente:

a. Archivo process.php

Este código es el encargado de validar cada uno de los items o campos en blanco que incluye el formulario de contacto, como por ejemplo el
correo al cual se direcciona el mensaje, el asunto, los datos del emisor, mensajes de error, como lo es el llenado de campos, la invalidez del correo
electrónico (este se valida por medio del arroba, de echo escriban cualquier correo con una @ incluida y aun así lo validara, para estos casos se
suele ocupar un script, el cual valida realmente las direcciones).

<?php else{ $message =quot;nombre: quot;.$nombre.quot;<br>quot;;
$recipiente = quot;contacto.baudio@gmail.comquot;; $message .=quot;telf: quot;.$telf.quot;<br>quot;;
$asunto = quot;contactoquot;; $message .=quot;email: quot;.$email.quot;<br>quot;;
$error = 0; $message .=quot;direccion: quot;.$direccion.quot;<br>quot;;
$nombre = $_POST['nombre']; $message .=quot;cp: quot;.$cp.quot;<br>quot;;
$telf = $_POST['telf']; $message .=quot;localidad: quot;.$localidad.quot;<br>quot;;
$email = $_POST['email']; $message .=quot;comentario: quot;.$comentario.quot;<br>quot;;
$direccion = $_POST['direccion']; $message = stripslashes($message);
$cp = $_POST['cp']; $headers = quot;MIME-Version: 1.0rnquot;;
$localidad = $_POST['localidad']; $headers .= quot;Content-type:text/html; charset=iso-8859-1rnquot;;
$comentario = $_POST['comentario']; $headers .= quot;From: $emailrnquot;;
if($nombre == quot;quot; || $telf == quot;quot; || $email == quot;quot; || $comentario == quot;quot;){ $error=1; $headers .= quot;Repaly-to: $emailrnquot;;
} $headers .= quot;Cc: $emailrnquot;;
elseif(!eregi(quot;^[a-z0-9]+([_.-][a-z0-9]+)*quot; .quot;@quot;.quot;([a-z0-9]+([.-][a-z0-9]+)*)+quot;.quot;.[a- mail($recipiente,$asunto,$message,$headers);
z]{2,}quot;.quot;$quot;,$email)){ echo quot;Tú mensaje ha sido enviadoquot;;!<BR>
$error=2; echo quot;Gracias por tú mensage.<BR>Te respondere lo antes posible.
} <BR>quot;;
if($error==1){ }
echo quot;El siguiente error ha ocurrido!<BR>quot;; ?>
echo quot;No ha rellenado todos los campos obligatorios.<BR> Por favor <link href=quot;/estilo.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; />
vuelva <A HREF=quot;javascript:history.back()quot;>atras</A>.<BR>quot;; <body bgcolor=quot;#666666quot;>
} <link href=quot;/estilo.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; />
elseif($error==2){ <a href=quot;../index.phpquot; class=quot;arial_verde2quot;>volver</a>
echo quot;El siguiente error ha ocurrido!<BR>quot;;
echo quot;El correo electronico es invalido!<BR> Por favor vuelva <A
HREF=quot;javascript:history.back()quot;>atras</A>.<BR>quot;;
}

Mayo 2007


En el directorio raiz del sitio creen una carpeta con el nombre
contacto (puede ser otro, pero RECUERDEN que se debe realizar
el cambio de nombre en el archivo contacto.html) y graben el archivo
process con la extensión php.

Mayo 2007


b. Archivo contacto.html

Este código es el que nos permite crear las tablas y los campos en blanco para ser rellenados, además de los campos “dinámicos” que serán
“interpretados y ejecutados” por el archivo process.php.[La figura / es la que nos indica que el archivo se encuentra en una subcarpeta].

<form action=quot;contacto/process.phpquot; method=quot;postquot;>
<table width=quot;393quot; border=quot;0pxquot;>
<tr>
<td class=quot;arial_amarilloquot; colspan=quot;2quot;>Por favor rellena todos los campos marcados con <span class=quot;centradosquot;>[*] </span>y me pondre en contacto contigo.</td>
</tr>
<tr>
<td colspan=quot;2quot;></td>
</tr>
<tr>
<td width=quot;138quot; class=quot;editorialquot;>Nombre:</td> <td width=quot;*quot;><input type=text name='nombre' size=quot;25quot;> *</td>
</tr>
<tr>
<td width=quot;138quot; class=quot;editorialquot;>Telefono:</td> <td width=quot;*quot;><input type=text name='telf' size=quot;25quot;> *</td>
</tr>
<tr>
<td width=quot;138quot; class=quot;editorialquot;>Email:</td> <td width=quot;*quot;><input type=text name='email' size=quot;25quot;> *</td>
</tr>
<tr>
<td width=quot;138quot; class=quot;editorialquot;>Direccion:</td> <td width=quot;*quot;><input type=text name='direccion' size=quot;25quot;></td>
</tr>
<tr>
<td width=quot;138quot; class=quot;editorialquot;>Pais:</td> <td width=quot;*quot;><input type=text name='cp' size=quot;25quot;></td>
</tr>
<tr>
<td width=quot;138quot; class=quot;editorialquot;>Asunto:</td> <td width=quot;*quot;><input type=text name='localidad' size=quot;25quot;></td>
</tr>
<tr>
<td width=quot;138quot; height=quot;70quot; valign=quot;topquot; class=quot;editorialquot;>Comentario:</td><td width=quot;*quot;><textarea name='comentario' rows=quot;4quot; cols=quot;40quot;></textarea></td>
</tr>
<tr>
<td colspan=quot;2quot; height=quot;40quot; align=quot;centerquot; valign=quot;bottomquot;><input type=reset value='Borrar todo'>          <input
type=submit value='Enviar Datos'></td>
</tr>
</table>
</form>

Mayo 2007


Para este creen un archivo html en blanco dentro de dreamweaver llamado contacto.html, copien el código en la vista programador.
Debería verse algo así en la vista programador y diseño.

Mayo 2007


Seleccionen previsualizar (F12), este debería ser el resultado en el navegador. Los atributos del texto (color, tamaño) y color de fondo los manejan ustedes
de acuerdo a vuestro criterio de diseñadores. Hasta aquí el tutorial.

Nota: En el caso particular de esta web hay de por medio atributos generados por medio de CSS, que nada tienen que ver con la programación del formulario de contacto.

Este es el resultado final, trabajado con hojas
de estilo y la sentencia “requerir”.
Si se fijan el archivo contacto.html aparece
dentro de otra hoja llamada contacto.php con
imágenes, color y texto.

Mayo 2007


4. Bibliografía

Web del Proyecto Appserv
http://www.appservnetwork.com/modules.php?name=Content&pa=showpage&pid=21

Tutorial de Instalación
http://www.thestromboliproject.com/tutoriales/extras/appserv-apache-+-mysql-2.htm

Curso de Diseño en PHP y MySQL
Training Center Informatico. Santiago 2005.

Apuntes Personales de Programación

Mayo 2007

Tutorial para crear un formulario de Contacto en PHP

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Tutorial para crear un formulario de Contacto en PHP

Similar to Tutorial para crear un formulario de Contacto en PHP (20)

Recently uploaded

Recently uploaded (10)

Tutorial para crear un formulario de Contacto en PHP