Cómo implementar un sistema de formularios en tu sitio Joomla 1.5 - crea los campos del formulario

Tags: CMS | gestor de contenidos | Joomla

Si has seguido nuestros anteriores artículos dedicados a la extensión CK Forms tienes instalada la extensión y has creado tu primer formulario. En realidad sólo has configurado el esqueleto del formulario, una especie de cajón contenedor que incluirá los diferentes campos en los que el usuario tendrá que introducir los datos solicitados. Aún faltan los datos del formulario, aquellos que el usuario tiene que escribir, seleccionar, introducir en el formulario.

Continuando con la serie de artículos dedicados al componente CK Forms llega ahora el momento de añadir todos estos contenidos en el formulario. Te mostramos algunos ejemplos concretos que podrás adaptar según necesites y según los objetivos que persigas en el formulario que muestres en el sitio.

Los campos del formulario

En un formulario se mostrarán botones y cuadros de texto, también denominados campos de formulario, para que el usuario introduzca, seleccione o escriba los datos solicitados. Pueden ser desde escribir su nombre y apellidos, su edad, su correo electrónico, la contraseña de acceso al servicio, su dirección postal, la ciudad y/o país de residencia... hasta campos de texto más abiertos en los que el usuario escribe sus comentarios, opiniones, sugerencias, consultas, etc.

  

CK Forms te permite crear una gran variedad de campos en el formulario, de texto para que el usuario escriba cualquier texto que se le haya solicitado, botones de selección para que el usuario escoja una opción de entre las distintas opciones relacionadas que se le presentan, botones de envío para enviar los datos introducidos por el usuario, botones que permiten adjuntar archivos para subirlos al servidor, casillas de verificación que permiten al usuario seleccionar y deseleccionar opciones individualmente, áreas de texto para escribir textos más largos y párrafos diversos, incluso campos ocultos que se emplean para añadir información oculta en el formulario, etc. Y con pocos conocimientos por tu parte sobre el establecimiento de estos campos del formulario, CK Forms se encargará casi automáticamente de todo ya que incluso te mostrará ayuda diversa para que los configures adecuadamente.

Crear nuevos campos del formulario

Para añadir campos en los formularios de CK Forms debes pulsar en el botón Campos de la barra de herramientas en la pantalla de creación y edición del formulario:

y en la nueva página que aparece podrás ver los campos del formulario creados y editados hasta el momento (ninguno, por ahora)

Haz clic en el botón Nuevo para crear el primer campo del formulario.

Observa que la página de creación y edición de nuevos campos para el formulario incluye cuatro pestañas diferentes: General, Diseño, Avanzado y Ayuda.

En este artículo crearemos diferentes campos para que practiques con sus diversas posibilidades. Adapta estos tutoriales a tus necesidades concretas.

Crea un campo de texto para que el usuario escriba información solicitada – el campo Nombre

Este tipo de campo de texto permite que el usuario introduzca en el formulario la información que le pidas. Por ejemplo, su nombre, sus apellidos, su dirección postal, la ciudad en la que vive, el país, su edad, una contraseña de acceso, su teléfono, móvil, su empresa de trabajo, etc. Como ves el usuario puede escribir todo tipo de caracteres alfanuméricos.

Comencemos:

Acude al menú Componentes – CK Forms. Selecciona, haciendo clic en su nombre, el formulario al que vas a añadir el campo del formulario, en este caso el recién creado Sugerencias. Una vez en la pantalla de edición del formulario haz clic en el botón Campos y, en la nueva página que aparece en pantalla, en el botón Nuevo.

Pestaña General

Las opciones de esta pestaña te permiten configurar el campo del formulario. Escribe en el campo de texto Nombre, Nombre (queremos que el usuario escriba su nombre de pila en este campo de texto).

Como Etiqueta, escribe igualmente Nombre: Este campo se corresponde con el título de la etiqueta que se mostrará al usuario en el formulario y también con su nombre en el listado de campos del formulario. Otras posibilidades similares pueden ser: Su nombre completo, ¿Cómo se llama?, etc.

Publicado: Sí, o el campo de texto no será visible en el formulario.

Tipo: Selecciona en el menú desplegable la opción Texto. Observa que CK Forms amplía la ventana para mostrarte las opciones de configuración del texto a introducir en el campo del formulario.

Obligatorio. Valida esta opción si deseas que este campo sea un dato obligatorio que deba introducir el usuario para que el formulario sea enviado correctamente. En este caso concreto, hazlo. En el formulario el usuario advertirá una marca especial en aquellos campos que deba introducir obligatoriamente.

Tamaño máximo – mínimo. Número máximo – mínimo de caracteres que el formulario aceptará cuando el usuario introduzca su nombre. Escribimos 15 y 3, respectivamente.

Tipo de texto. Selecciona Texto, en este caso.

En realidad, aunque aún no hemos terminado de configurar este campo del formulario ya que veremos las otras dos pestañas a continuación, ya no necesitas introducir ningún cambio más en el campo del formulario porque es completamente operativo con esta simple configuración. Haz clic en el botón Guardar para salvar los cambios. Vuelves al listado de campos del formulario y el nuevo campo Nombre se muestra ya en el listado.

Si haces clic en su nombre en la columna Etiqueta puedes continuar con su edición:

Pestaña Diseño

Puedes personalizar los formularios con hojas de estilo CSS, personalizar la etiqueta e incluso el propio campo de texto.

Pestaña La interfaz de pantalla

Puedes escribir un texto personalizado para el campo que estás creando – editando utilizando el editor de textos disponible. En este caso déjalo en blanco ya que el campo del formulario es suficientemente descriptivo por sí mismo.

Cuando finalices salva los cambios pulsando en el botón Guardar de la barra de herramientas.

Utilizando idénticos procedimientos puedes crear otros campos del formulario similares para que los usuarios escriban sus apellidos, dirección, año de nacimiento, código postal, ciudad, etc.

A considerar:

• Para crear un campo de texto en el que el usuario tenga que introducir números selecciona en la pestaña General como tipo de texto número. Por ejemplo, teléfono, edad, código postal... En muchos de estos casos tendrás que limitar el tamaño máximo, por ejemplo el código postal, el número de la Seguridad Social, los números de una tarjeta de crédito, el DNI – NIF y cualquier otro dato con formato predefinido y limitado.
• Para crear un campo de texto E-mail, selecciona en la pestaña General como tipo de texto email. De esta manera obligas al usuario a introducir un correo electrónico del tipo nombre@. En caso de que el usuario no lo haga así el sistema le avisará de que no ha escrito una dirección de correo electrónico válida.

• Para crear un campo de texto Contraseña – Password selecciona en la pestaña General como tipo de texto contraseña. Así a medida que el usuario escriba su contraseña en el campo de texto aparecerán los típicos símbolos (puntos, asteriscos) que ocultan el texto e imposibilitan ver en pantalla los caracteres exactos.

• Si deseas que el usuario introduzca su web – blog personal selecciona en la pestaña General como tipo de texto URL. El sistema obligará al usuario a introducir una dirección del tipo http://www. Indicándoselo mediante un mensaje informativo.

Crea un campo de texto para que el usuario escriba sus comentarios, opiniones, sugerencias... – el campo del formulario Área de texto

Este campo del formulario es muy parecido al visto en el apartado anterior, descontando la posibilidad que tiene el usuario de escribir un texto más largo o constituido por varios párrafos. Utiliza este tipo de campo del formulario para que el usuario escriba un mensaje, comente una información o noticia, envíe sus comentarios o sugerencias sobre el sitio, solicite una consulta al sitio, etc.

Crea un nuevo campo del formulario con el nombre Sugerencias. Escribe como Etiqueta Comentarios y/o sugerencias y selecciona como Tipo en la pestaña General, la opción Área de texto.

Si deseas incluir el editor de texto para que el usuario lo formatee a su gusto valida la opción Editor HTML y establece el número de columnas y filas (rows) que deseas tenga para ajustar su tamaño. El valor columnas representa el número de caracteres que posibilita un salto de línea para continuar escribiendo mientras que el número de filas representa el número de "líneas horizontales" que es posible establecer.

Crea un campo de texto para que el usuario acepte alguna condición específica – el campo del formulario Casilla

En este caso ofreces en el formulario alguna condición concreta que el usuario puede aceptar o no si valida, o no lo hace, la casilla que acompaña al texto. Puedes utilizar este campo del formulario para dar a tus usuarios la posibilidad de suscribirse a un boletín de novedades, contestarle a través de su correo electrónico, aceptar una determina licencia de usuario, confirmar que tiene un número de años determinado (mayoría de edad, por ejemplo), etc. Fíjate en la siguiente captura de pantalla y comprenderás su funcionalidad:

Veamos cómo proceder. Crea un nuevo campo de texto. Escribe como Nombre Suscripcion y como Etiqueta Deseo suscribirme al Boletín de Novedades. Establece como tipo Casilla. Si deseas que la casilla se muestre por defecto validada, marca la opción Checked.

Crea un campo de texto para que el usuario acepte una opción de entre varias posibles – el campo del formulario Botón de opción

Mediante este tipo de campo de formulario permites al usuario seleccionar y deseleccionar opciones que le ofreces. Utiliza este tipo para campos como Sexo, Aficiones, Tipos de lecturas, y similares.

Crea un nuevo campo de formulario. Escribe como Nombre y Etiqueta Sexo. Selecciona como Tipo Botón de Opción.

En Exponer puedes elegir entre que las opciones se muestren en una única línea horizontal (en línea) o una debajo de otra (en forma de lista). Selecciona la primera.

Los campos Value y Etiqueta hacen referencia a las opciones que quieres mostrar en el formulario para que las seleccione el usuario. Escribe Hombre en ambos cuadros de texto y marca la opción Predeterminado, para que aparezca chequeada esta opción por defecto.

Haz clic en el botón Add – añadir para incluir una segunda opción. En este caso escribe Mujer en los campos Value y Etiqueta. Haz clic de nuevo en el botón Add para guardar esta segunda opción.

Observa cómo los valores irán apareciendo en el listado de opciones del campo Lista de casillas.

Nota. Los botones Reset reinician los campos y el botón Del te permite eliminar la opción seleccionada.

De modo similar puedes hacer campos del formulario del tipo Me gusta / No me gusta, intereses y aficiones, servicios que ofrece el inmueble (garaje, trastero, ascensor, jardín, piscina), tipos de vivienda (casa, piso, apartamento 1 habitación, 2 habitaciones), etc.

Crea un campo de texto para que el usuario seleccione una opción de entre varias posibles – el campo del formulario Select

Muchas son las ocasiones en que necesitarás utilizar este tipo de campo del formulario. Puedes solicitar al usuario que seleccione un idioma determinado de entre una lista de idiomas, un país de entre un listado, el nombre de una Comunidad Autónoma de entre la lista de Comunidades españolas, etc.

El formulario de creación de un campo de formulario así es muy similar al que hemos visto en el párrafo anterior, ya que el procedimiento para la creación del listado de opciones es exactamente el mismo.

Veamos. Crea un nuevo campo del formulario. Escribe como Nombre y Etiqueta, la palabra Idioma. Selecciona como tipo la opción Select. Introduce como Value y Etiqueta el texto Español, haz clic en el botón Add y la opción aparecerá en la Lista de casillas. Repite Value y Etiqueta: Inglés, haz clic en el botón Add y así sucesivamente con francés, alemán...

Puedes ofrecer al usuario la posibilidad de que seleccione varias de entre las opciones que le suministras. En este caso valida la casilla Permitir selección múltiple.

El resultado en el formulario será algo similar a esto:

Crea un campo de texto para que el usuario adjunte un archivo al formulario (documento, fotografía, audio) – el campo del formulario Archivo subido

Si deseas que el usuario añada en el formulario un archivo o documento desde su ordenador, CK Forms ofrece la posibilidad de crear un campo del formulario del tipo Archivo subido. Su configuración es muy simple: escribe el nombre, por ejemplo Adjuntafoto, la Etiqueta que se mostrará en el formulario, Incluye tu fotografía, selecciona como tipo Archivo subido y guarda los cambios.

El resultado es que en el formulario ofreces al usuario la posibilidad de localizar el archivo en su equipo para su envío. El archivo enviado se guardará en el directorio que has definido en los parámetros del formulario creado (pestaña Avanzado – ruta de archivos cargados y tamaño máximo de archivos cargados).

Completa el formulario con el botón Enviar

Para finalizar el formulario que estás configurando debes incluir un botón al final del mismo que permita el envío del formulario. Para ello crea un nuevo campo del formulario del tipo Botón. Escribe en Nombre y Etiqueta la palabra Enviar y selecciona Submit.

El resultado es un botón en el formulario que permite al usuario enviar el formulario, tras completarlo adecuadamente, haciendo clic en él.

Descarga el tutorial en formato PDF - 396 kb - Descargar

Mostrar este artículo en su sitio web

< Prev		Próximo >

Joomla - Componentes