MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007

Tamaño: px

Comenzar la demostración a partir de la página:

Download "MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007"

José Álvarez Giménez
hace 8 años
Vistas:

1 MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007 Servicio de Informática y Comunicaciones

2 Para poder diseñar un formulario y que éste nos envíe los resultados a nuestro correo electrónico, necesitamos crear 3 páginas con nuestro programa editor de webs. Para este ejemplo vamos a utilizar Microsoft Office FrontPage PÁGINA 1: EL FORMULARIO Después de iniciar el FrontPage abrimos nuestro sitio web; posteriormente vamos a archivo y seleccionamos la opción «nuevo». Después elegimos «página en blanco» tal como se muestra: 2

Para este ejemplo vamos a utilizar Microsoft Office FrontPage 2003.

3 Como resultado de esta acción nos mostrará una pantalla parecida a esta: Si observa atentamente la parte inferior de la imagen anterior observará esto: Esto significa que usted va a ver, por un lado el código fuente de la página: 3

de la imagen anterior observará esto: Esto significa que

4 Y por otro verá la vista de diseño: Ahora pulsamos con el botón izquierdo del ratón en medio de la zona correspondiente a la vista de diseño para indicarle al programa que queremos trabajar en esta zona y no en el código. Acto seguido en el menú superior vamos Insertar > Formulario > Formulario: 4

indicarle al programa que queremos trabajar en esta zona y no en el código.

5 Y nos resulta algo así: Hemos creado el campo del formulario. Ahora lo que debemos hacer es insertar dentro de éste los campos que queramos utilizar en nuestro formulario. Para ello situamos el cursor dentro del formulario (es decir, dentro de la zona punteada) y volvemos a ir a Insertar > Formulario > y ahí seleccionamos el elemento que queramos introducir. En nuestro ejemplo vamos a desarrollar un formulario de contacto simple, para que se vea con claridad el proceso. Para ello seleccionamos cuadro de texto. 5

Para ello situamos el cursor dentro del formulario (es decir, dentro de la zona punteada) y volvemos a ir a Insertar > Formulario

6 En la vista de diseño obtendremos esto: Ahora, con las flechas del teclado, nos vamos al punto justo antes del cuadro de texto que hemos insertado para escribir ahí el texto con las instrucciones para las personas que tengan que rellenar el formulario. Nuestro campo corresponderá con el apellido de la persona, con lo que escribiremos Apellidos : Visualmente ya sabemos que ese campo de texto corresponde con los apellidos. No obstante necesitamos en este momento asignar un valor interno a ese campo. Para señalar ese valor pulsamos sobre el campo de texto con el botón derecho del ratón. Nos aparece un menú contextual. En él escogemos propiedades de campo de formulario : Al seleccionarlo nos abre una ventana con las opciones de nuestro campo de formulario. Es muy importante que NO UTILICEMOS TILDES, NI MAYÚSCULAS, NI mucho menos- ESPACIOS EN BLANCO ya que podríamos causar que nuestra pequeña aplicación no funcionara: 6

Nuestro campo corresponderá con el apellido de la persona, con lo que escribiremos Apellidos : Visualmente ya sabemos que ese campo de texto corresponde con los apellidos.

7 Aceptamos y ya habremos configurado el cuadro de texto de modo correcto. Ahora insertamos todos los campos que queramos y los configuramos de modo similar al que hemos hecho, indicándole las propiedades que correspondan en cada caso. Ahora fijamos nuestra atención en la vista del código. Buscamos dónde empieza la etiqueta del formulario (todo el contenido del formulario está entre las etiquetas <form> y </form>). Localizamos <form> y dentro de las propiedades de ésta observamos lo siguiente: Dejamos tal cual la parte que dice «method="post"» y en donde indica «action="--webbot-self--">» lo cambiamos por «action="enviar.php"». Con esto conseguiremos que los datos que los usuarios introduzcan en el formulario sean procesados por la página enviar.php que es la que se encarga de enviar todos los datos por correo electrónico, tal como veremos más adelante. A su vez suprimimos la línea que está justo debajo y que dice: . 7

Ahora fijamos nuestra atención en la vista del código. Buscamos dónde empieza la etiqueta del formulario (todo el contenido del formulario está entre las etiquetas <form> y </form>).

8 Por tanto, una vez realizados estos cambios nuestro código queda así: Una vez terminemos de modificar guardamos el archivo html con el que hemos estado trabajando con el nombre que queramos, evitando siempre mayúsculas, tildes y espacios en blanco: 8

archivo html con el que hemos estado trabajando con el nombre

9 PÁGINA 2: PÁGINA PHP QUE NOS ENVÍA EL CORREO ELECTRÓNICO CON LOS DATOS Abrimos una nueva página tal como hicimos en «PÁGINA 1». Nos vamos a la vista de código. Una vez hayamos pinchado en esa vista, nos vamos al menú edición > seleccionar todo y acto seguido volvemos a ir edición > eliminar : Con esto dejamos absolutamente vacío el código html: 9

Una vez hayamos pinchado en esa vista, nos vamos al menú edición > seleccionar todo y

10 Y guardamos el documento con el nombre «enviar.php»: Observará que, a partir de este momento, desaparecerá la opción de ver la vista de diseño. No se preocupe ya que en esta página sólo escribiremos unas líneas código. Escriba a partir de la línea 1 exactamente del mismo modo que aparece aquí: 10

11 Como usted ya ha visto, en la línea 3 del código, donde dice «SU » cámbielo por su o el de la persona a la que el formulario le será enviado; en la línea 4 donde dice «Consulta enviada desde SUWEB» cámbielo por el texto que desee; recuerde que ese texto es el que le aparecerá en el campo Asunto del mensaje de correo electrónico que le llegará a su buzón por lo que sugerimos que escriba un texto mediante el que usted identifique fácilmente el correo recibido como formulario enviado desde su sitio web. Una vez usted introduzca esos datos, el código quedaría tal que así: En las líneas 3,4,5 y 6 aparece como primer elemento el carácter $. Al poner delante de una palabra (o letra) ese símbolo (por ejemplo: $para) estamos creando una variable con un determinado valor. Así le indicamos que, en este caso, $para tiene como valor paz.padilla@uhu.es, $asunto tiene como valor Consulta enviada desde uhu.es/paz.padilla. Entendemos, por tanto, que una variable es una estructura de datos que puede cambiar de contenido a lo largo de la ejecución del proceso. Puede observar que $remitente tiene como valor otra variable, en concreto $correo. Si usted recuerda cuando hizo la primera página del formulario, al campo de texto donde los usuarios escriben su dirección de correo electrónico se le puso como valor, dentro de sus propiedades, correo. Al procesar la página enviar.php los datos que le llegan desde formulario.htm recoge la variable $correo que el usuario introdujo. Por lo tanto si le damos la instrucción de que la variable $remitente = $correo siempre nos devolverá lo que previamente la persona que ha rellenado el formulario ha escrito. Finalmente en la línea 6 aparece $mensaje =. Como usted puede comprobar hay un gran espacio que va desde la línea 7 hasta la 17, que cierra con una comilla y un punto y coma. Esto significa que el valor de la variable $mensaje es todo lo que se escriba desde la línea 7 hasta la línea 16. Por tanto escribimos en ese espacio el resto de elementos que nos faltan; si en el campo de texto donde la persona escribe sus apellidos tiene como valor apellidos, la variable que nos devuelve lo que ha escrito el usuario es $apellidos. Así quedarían las líneas que nos faltan: Apellido del usuario: $apellidos Nombre del usuario: $nombre Correo Electrónico del usuario: $correo Comentario del usuario: $comentario 11

escriba un texto mediante el que usted identifique fácilmente el correo recibido como formulario enviado desde su sitio web.

12 Dentro del código queda así la visualización: Guardamos todos los cambios. Como ha notado, las variables de nuestra página enviar.php tienen el nombre de los campos del formulario y como valor lo que el usuario escribe en éste. 12

13 PÁGINA 3: PÁGINA QUE NOS CONFIRMA EL ENVÍO Ahora creamos un nuevo documento en blanco tal como vimos en la página 1. El documento que creamos se llamará enviado.htm y tendrá como función confirmar el envío del formulario. Cuando la página enviar.php recoge los datos del formulario los envía a la dirección de correo que ha introducido e inmediatamente después de hacerlo carga la página de confirmación que vamos a crear. Insertamos el texto predefinido que saldrá, por ejemplo: Muchas gracias por realizar su consulta. En breve le responderemos en la dirección que nos ha indicado en el formulario. Y le damos a guardar. Ya tenemos nuestro formulario en php correctamente diseñado. Ahora súbalo al servidor y realice las pruebas que necesite enviándose a sí mismo algunos formularios de contacto. Una vez que verifique que todo funciona correctamente ya lo puede colgar definitivamente para que sea utilizado. 13

php recoge los datos del formulario los envía a la dirección de correo que ha introducido e inmediatamente después de hacerlo carga la página de confirmación que vamos a crear.

14 ACLARACIONES - Para poder enviar un formulario necesita estos tres archivos sobre los que hemos estado hablando. Es necesario que éstos se encuentren, dentro de su sitio web, en la misma carpeta ya que podrían dar errores si se sitúan incorrectamente en otras ubicaciones. - Si usted desea tener más de un formulario deberá crear tantos archivos como formularios: si tiene 4 formularios deberá tener 4 páginas formulario, 4 páginas de proceso de envío (enviar.php) y 4 páginas de confirmación, todas ellas con nombres distintos. Recuerde que cada página formulario debe enviarse a la página de envío que le corresponda para que lea las variables necesarias y las procese correctamente al correo. Si usted no desea personalizar las páginas de confirmación y dejar siempre la misma puede hacerlo, de modo que tenga, por ejemplo, 4 páginas formulario, 4 páginas de proceso de envío y 1 página de confirmación. 14

- Si usted desea tener más de un formulario deberá crear tantos archivos como formularios: si tiene 4 formularios deberá tener 4 páginas formulario, 4 páginas de proceso de envío (enviar.

Documentos relacionados

MANUAL PARA GESTIÓN DE INCIDENCIAS INFORMÁTICAS

MANUAL PARA GESTIÓN DE INCIDENCIAS INFORMÁTICAS En este manual aprenderemos a introducir un Ticket de Soporte (Incidencia Informática) y ver todo el proceso hasta que se resuelve. Para poder escribir Tickets