Como crear un formulario de contacto en Dreamweaver html

Incorporar un formulario de contacto en nuestro sitio web es de suma importancia si queremos darle a los usuarios la posibilidad de que nos envíen consultas, comentarios, pedidos online o que simplemente nos dejen su email para suscribirse a un Newsletter y recibir nuestras ofertas y novedades.Dreamweaver nos da la posibilidad de crear un formulario de contacto sencillo y fácil de programar son tener demasiados conocimientos de html y php; a continuación te cuento paso a paso cómo armar el formulario en html y cómo preparar el archivo php correspondiente para el envío de las consultas.

En un nuevo archivo html que llamaremos “contacto.html” debemos crear el área del formulario antes que nada, esto es muy importante ya que si nos olvidamos de hacer esto al principio cada parte del formulario que agreguemos tendrá asignada un área de formulario distinta (el dreamweaver lo hará automáticamente si no detecta un área que hayamos insertado nosotros),  y en consecuencia será como tener varios formularios dentro del mismo html, con lo cual simplemente no funcionará.

Para insertar el área de formulario debemos dirigirnos a la barra de solapas superior y clickear en la de “Formularios”.
En esta imagen te muestro los nombres  y descripción de las opciones dentro de la barra de iconos de “Formularios”:

herramientas del formulario html en dramweaver

1) FORMULARIO: Sirve para definir el area que va a ocupar el formulario dentro del html. Primero debemos posicionarnos dentro del html donde queremos insertar el formulario y luego hacer click en este icono. Dentro de esas “lineas rojas” vamos a colocar los elementos de nuestro formulario. Una vez insertada el área de formulario debería verse más o menos así:

insertar area de formulario en html con dreamweaver

2) CAMPO DE TEXTO: Define un campo de datos para que el usuario ingrese información, por ejemplo: Nombre y Apellido. Al hacer clic en el icono se abrira la siguiente ventana:
campo de texto formulario dreamweaver html

ID: es el nombre que le podremos a este campo de datos. Este nombre no sera visible para el usuario, solo sera visible en el modo de visualizacion de codigo y como etiqueta. Debemos ingresar el ID (identificacion) del campo con letras minúsculas, sin espacios ni caracteres espaciales; esto luego nos sera útil para definir el codigo de validacion del formulario.
Etiqueta: el nombre del campo que sera visible para el usuario, por ejemplo: Nombre y Apellido
Posición: debemos elegir si deseamos que el nombre del campo (el que es visible para el usuario) queremos que esté antes del cuadro de texto o detrás.
Las demás opciones la dejaremos tal cual están por el momento.
Una vez completemos el ID y la ETIQUETA el campo de texto insertado se verá así:

campo de texto formulario dreamweaver html
Si por algún motivo deseamos cambiar los atributos del campo de texto lo podremos hacer desde la barra de propiedades, ubicada en la parte inferior de nuestra pantalla.

3) AREA DE TEXTO: Sirve para insertar un area de texto mayor al “campo de texto”. Generalmente se usa para definir el lugar donde el usuario puede dejar un mensaje o comentario. Esta area de texto puede tener varias líneas (renglones) y usar una barra de scroll:


Al insertar un AREA DE TEXTO la barra de propiedades se modificará. A continuación veremos las propiedades que necesitamos modificar según la necesidad del formulario:
Propiedades del área de texto en un formulario html realizado con dreamweaver
“Ancho car”: Ancho caracteres, los caracteres son letras, numeros, comas,etc. En este cuadro pondremos la cantidad de caracteres de ancho que deseamos que tenga el area de texto. Si quiero que en un línea de texto entren hasta 20 caracteres, entonces introduciremos ese valor ahí.
“Líneas num”: Cantidad de líneas que deseamos que el usuario pueda tipear. Si dejamos ese valor vacío el usuario será capaz de escribir sin restricciones.
Lo siguiente que nos importará modificar en esta instancia es alguna de las opciones de “Tipo”, tenemos 3 opciones Una línea, Varias líneas y Contraseña. Si estamos creando un ´rea de texto para un mensaje on convendrá seleccionar la opción “Varias líneas”. La opción “contraseña” pueder ser usada para cuando nuestro sitio tiene la posibilidad de dar al usuario un nombre de usuario y contraseña.

4) CASILLA DE VERIFICACION:  Son típicamente usadas para darle al usuario a elegir entre una  o varias opciones preestablecidas, como por ejemplo cuales son sus intereses (turismo, gastronomía, deportes, etc.) o simplemente si desea suscribirse al newsletter.
Al insertar una casilla de verificación también se debe establecer un ID y una etiqueta, como el resto de los elementos dentro del formulario.

5) GRUPO DE CASILLAS DE VERIFICACIÓN: Esta opción nos permite insertar u grupo de opciones en lugar de una sola e individual. Se debe proporcionar un nombre al grupo de opciones y establecer una Etiqueta (label) y un Valor (value) para cada una de las opciones:
Grupo de casillas de verificación para un formulario html realizado en dreamweaver
El “Label” será la palabra que verá el usuario, sobre la cual hará su elección y el “Value” será el equivalente de cada Label para el código html e indicará la opción seleccionada por el usuario. Los “values” deben estar escritos con minúsculas, sin caracteres espaciales ni espacios, en cambio los “labels” al ser texto común pueden usar cualquier tipo de caracteres.

6) BOTÓN DE OPCIÓN: cumple la misma función de una casilla de verificación, pero el formato del área donde el usuario puede clickear es circular en lugar de un cuadrado.

7) GRUPO DE OPCIÓN: a diferencia de las 2 anteriores herramientas, el grupo de opción me permite ingresar varias opciones de una sola vez, usando un sólo cuadro de diálogo para establecer los valores o nombres de esas opciones. Por ejemplo puede ser usado para definir si el usuario es Masculino o Femenino.
En la columna introduciremos los nombre que le queremos dar a las opciones. El usuario sólo será capaz de seleccionar una sola opción.

8) LISTA/MENÚ: con esta herramientas podremos crear una lista desplagable para que el usuario selecciones una opción, por ejemplo para indicar el país de residencia.
Al hacer clic en la herramienta deberemos, al igual que en las herramientas anteriores, definir un ID y un nombre visible para el usuario. Al hacer clic en Aceptar veremos que se ha insertado un cuadro blanco con una flecha de menu de opción, sin valores. Si seleccionamos esto podemos ver que la barra de propiedades nos deja introducir los valores que deseemos estén disponibles para el usuario.
Si hacemos clic en el botón “Valores de lista” se nos abrirá una nueva ventana de diálogo. Bajo la columna “Etiqueta de elemento” introduciremos los valores mencionados.
Podemos introducir tantos valores como queramos. Para añadir nuevos valores simplemente haremos clic en el botón con el signo “suma”, y si deseamos borrar una de las opciones deberemos seleccionarla y hacer clic en el botón con el signo “restar”. Esta lista de opciones por lo general está ordenada alfabéticamente, por lo cual tenemos la posiblidad de alterar el orden de los mismos haciendo clic en las flechas hacia arriba y abajo que aparecen cerca del boton “Aceptar”.
El resultado será el siguiente:
Lista menu

9) MENÚ DE SALTO: este tipo de menú desplegable de opciones es muy similar al anterior, con la diferencia que el usuario, al hacer clic cobre una de las opciones seré re-direccionado a otro html dentro del sitio, o bien a un URL externo (otro sitio web).
Aquí también podremos definir los valores de la lista, ponerles nombre, agregar o restar valores, y re-ordenarlos según onveniencia.
Donde dice “Al seleccionarse, ir a URL:” podremos ingresar el link a donde deseamos que esa opción lleve al usuario.
El aspecto final de esta lista de opciones será el mismo que “LISTA/MENU”.

10) CAMPO DE IMAGEN: nos servirá para incrustar una imagen en nuestro formulario.

11) CAMPO DE ARCHIVO: con esta herramienta podremos insertar un botón tipo “Examinar”, donde, al hacer clic, el usuario podrá adjuntar un archivo de cualquier tipo. Tal y como lo hacemos al adjuntar un archivo al enviar un email.

12) BOTÓN: con esta herramienta podremos insertar un botón en nuestro formulario. Este botón puede servir para enviar el contenido del formulario o para borrar lo que se ha escrito en el mismo, o sea, para re-establecer el formulario y que quede en blanco otra vez.
Una vez que le dimos el nombre al botón y hacemos clic en Aceptar, la barra de propiedades se verá así:
insertar un boton en un formulario en html realizado en dreamweaver cs5
Donde dice “Valor” va el texto que queremos sobre el botón, por ejemplo “Enviar”.
También tenemos 3 opciones correspondientes a la acción que deseamos que el botón cumpla, simplemente debemos hacer clic en la opción deseada.

Deja un comentario

Disculpa, debes iniciar sesión para escribir un comentario.