CURSO COMPLETO DE DREAMWEAVER 8

--MEDIOS--



04 - FORMULARIO DE CONTACTO

FORMULARIO SIMPLE - FORMULARIO DE CONTACTO

Un formulario, permite interactuar con los usuarios que visitan nuestro sitio.

Un formulario consta de tres partes:

-El código HTML, con la etiqueta form, abarcando todo el formulario.

-Secuencias de comandos CGI (Common Gateway Interface), una aplicación que se ejecuta en el servidor y que procesa la información enviada por el usuario.

-Elementos del formulario, así como campos de texto, casillas de verificación, listas, etc...

En este tutorial vamos a hacer un formulario simple de contacto.

Lo haremos a través de la barra de Insertar > Formulario



Lo primero que debemos hacer es abrir nuestro formulario, para ello, damos click en el botón de formulario



Vamos a configurar, la forma en que procesará los datos nuestro formulario, esto lo hacemos seleccionando nuestro formulario y en la paleta de propiedades configuramos a nuestro gusto:



Nombre del formulario: Daremos un nombre que distinga nuestro formulario.

Acción: Especificaremos la ruta de una secuencia de comandos de cgi, por ej: http://www.misitioweb.es/cgi-bin/porcess.cgi o bien podemos especificar una dirección de correo electronico para recibir directamente los datos, sin necesidad de utilizar una secuencia de comandos. En nuestro caso esto es lo que vamos a hacer, ya que para usar el CGI debemos solicitarlo en nuestro hosting.

Metodo: Podemos elegir entre tres métodos:
- POST: Para enviar los datos de nuestro formulario en el cuerpo del mensaje, este es el más recomendado y el que vamos a usar en este caso.
- GET: Para adjuntar los valores del formulario al URL y enviar la información al servidor, no está recomendado para formularios largos, ya que tiene las URLS estan limitadas a 8.192 caracteres.
- PREDETERMINADO: Para enviar el formulario con la opción predeterminada del navegador, que suele ser Get.

Para empezar a trabajar en nuestro formulario, situaremos el cursor, dentro del mismo:



Vamos a crear un campo de texto, para que los usuarios ponga su nombre y apellidos, damos click en el botón de campo de texto:



Y se nos abrirá esta ventana:



En etiqueta pondremos el título que le vayamos a dar a nuestro campo de texto, yo pongo Nombre y apellidos, pero puedes poner lo que necesites. Y modificamos si creemos conveniente, la posición que tendrá nuestro título, es decir o delante o detrás del campo de texto. Aceptamos.

Ahora seleccionamos el campo de texto que acabamos de crear y nos vamos a propiedades:



Cambiaremos textfield por algo identificativo, yo por ej. puse nombre.

Ancho car: Indica el tamaño del ancho del texto en carácteres.

Car max: Si especificamos un numero, ese será el máximo de carácteres permitidos para el usuario, al rellenar el área de texto.

Tipo: Puede ser de una sola línea, varias líneas, o una contraseña, en este ultimo caso, se mostraria como asteriscos.

Val inicial: Define un valor inicial a nuestro campo de texto, que sirbe como referencia al usuario, por ej, en nuestro caso, podriamos poner Nombre, Apellidos aunque yo en mi caso lo voy a dejar en blanco.

Del mismo modo vamos a crear los campos: E-mail ,Telefono y Asunto

Creamos un último campo de texto, "Mensaje" Pero este si que lo vamos a hacer, con Varias Lineas, para que nuestros usuarios puedan escribir su texto en él.

Lo configuraremos así:



Ahora vamos a crear el boton de Enviar:



Esta vez no vamos a rellenar el campo de Etiqueta.

Seleccionamos el botón y configuramos así:



Ahora creamos otro botón, que reincializará el formulario a cero, esta vez, le damos los siguientes valores:



Nos falta un último detalle, pero muy importante en el caso de que nuestro formulario funcione via e-mail, es para que podamos visualizarlo en nuestro programa de correo electrónico.

Debemos insertar un código:

enctype="text/plain"


en la etiqueta de form:


Y ya tenemos nuestro formulario de contacto, sencillito ¿verdad? En los próximos tutoriales veremos muchas otras opciones de nuestros formularios.

 

2007©By Almaweb.es

subir

Ir al menú de tutoriales de DREAMWEAVER

Todos los tutoriales son de mi completa autoría,

cualquier parecido con otros, es pura coincidencia.

Queda totalmente prohibida su reproduccion, total o parcial.

Si quieres enlazar mis tutoriales, no hay problema,

solo mandame un e-mail, para comunicarmelo.

Cualquier duda o sugerencia:

Tutoriales registrados

 

Alma Web

Design Sensation by almaweb.es

Foro Design Sensation