Navegando por la web, encontre un excelente tutorial de como crear formularios para Joomla!, con el componente Facile Forms.

Muchas veces nos encontramos con la necesidad de programar formularios para nuestro sitio web, o por ejemplo de cambiar el formulario de contactos, o agregarle lineas. Joomla! tiene varios componentes para esto, como el Fabrik, Facile Forms, y otros.

Estos componente no son muy simples de usar y existen pocos tutoriales o manuales en español que nos expliquen como utilizar estos magnificos componentes que nos dan grandes posibilidades para crear en nuestra Web.

Navegando por distintos sitios buscando nuevas cosas para Joomla!, encontre este tutorial muy bien explicado sobre el componente Facile Forms.

 

Este tutorial fue tomado de la web de Ramon Castro http://ramoncastro.es

 

 

Facile Forms facilita enormemente la creación de formularios en Joomla, lo que ayuda a personalizar el sitio web adaptándolo de esta manera a nuestras necesidades. A continuación explicaremos brevemente cómo usar esta solución en nuestro portal Joomla.

INSTALANDO FACILE FORMS

Descargaremos del sitio http://www.facileforms.biz/ el componente, el módulo, el mambot y la traducción al castellano. Todo está disponible en la sección Downloads

Una vez descargados los paquetes (formato .zip), procederemos a su instalación desde el backend usando el menú Instaladores. En las figuras 1 y 2 se pueden visualizar las instalaciones y los mensajes recibidos.

Figura 1

Figura 2

El siguiente paso es publicar el módulo y el mambot. Nos dirigimos a los menús “Módulos –> Módulos del sitio” y “Mambots –> Administrador de Mambots”. Buscamos la referencia a Facile Forms y encontraremos que tanto el módulo como el mambot están desactivados. Publicaremos con un clic de ratón (Figura 3: Activando módulo y mambot).

Figura 3

Pulsamos las pestañas “Componentes –> Facile Forms –> Configuration” y accedemos al siguiente formulario:

Figura 5

Activamos la opción de “Nueva instalación”. Si deseáramos contar con datos de ejemplo o mantener la compatibilidad con formularios de versiones anteriores, marcaríamos las dos últimas opciones.

Salvamos, pulsamos siguiente en el mensaje que aparece y accedemos a la siguiente pantalla:

Figura 6

La primera opción está marcada en “NO”. De esta manera se usará el direccionamiento relativoLa segunda opción permite previsualizaciones

La tercera opción se refiere al aspecto de la parrilla donde realizaremos el formularioLas siguientes opciones (tres) vienen optimizadas por defectoLas opciones 7 y 8 configuran el aspecto por defecto de las áreas de texto (pequeñas, medianas y grandes)Por último, introduciremos nuestro email (para notificaciones) y las rutas de subida de imágenes y archivos

Salvamos, volviendo de esta forma al backend.

CREANDO UN FORMULARIO NUEVO

Nos dirigimos a la pestaña “Componentes –> Facile Forms –> Manage Forms” Pulsamos “Nuevo” para crear un formulario Accedemos a un formulario con pestañas. De momento completamos algunos

campos (Figura 7) como el Título, el nombre por el que lo identificará el sistema, altura, anchura, etcétera

Figura 7

Una vez hemos terminado, salvamos. Nos aparece ahora un enlace para acceder al nuevo formulario. Lo pulsamos y podremos visualizar la parrilla vacía (Figura

Figura 8

Vamos a insertar en la parrilla un cuadro “input” de texto con su correspondiente etiqueta. Primero, crearemos el input y lo colocaremos en la parrilla; después, la etiqueta

Figura 9: Seleccionamos el tipo de input: texto

Figura 10

Datos a cumplimentar:

- Nombre por el que identificaremos el elemento en el backend (es útil utilizar un nombre preparado para presentar en algún informe (por ejemplo, valdría “Nombre de empresa” y no “empr_nom”) ya que al final de este post lo usaremos para presentar un resumen)- Nombre (html) del input (como es un elemento de texto lo nombraré con el prefijo txt_ )- Ojo con la anchura (width) y con el máximo de caracteres permitidos (max. length)- Si quisiéramos que este elemento tuviera algún valor predeterminado, lo indicaríamos en Value

Una vez terminado, salvamos.

Para la etiqueta (texto que precederá al input en el formulario), haremos lo mismo: Pulsamos “Nuevo”, seleccionamos “Static/Text HTML”

Figura 11

- Insertamos el nombre para identificar este elemento en el backend- Insertamos el nombre html de este elemento- Insertamos su valor (el texto que aparecerá en el formulario)- Salvamos

Siempre que salvemos, volveremos a la parrilla. Los elementos aparecen (si no lo hemos especificado antes) superpuestos unos sobre otros. Los seleccionaremos de la lista y usando los cursores los colocaremos en la posición deseada (podemos cambiar la amplitud del desplazamiento modificando el valor del cuadro “Move-Pixels”) y finalmente guardaremos, pulsando “Save”

La figura 12 muestra la parrilla terminada con el formulario completo (NOTA: Siempre podremos modificar el tamaño de la parrilla pulsando en “Edit Form” volviendo de esta manera al formulario de la Figura 7)

Presentamos en la figura 12 una parrilla con:

- Varios cuadros de texto (input tipo text)- Una lista de selección (input tipo select)- Un área de texto (input tipo text area)- Un botón de envío (input tipo submit)

Figura 12

A continuación, pasamos a configurar el comportamiento del formulario

- Campo Email: Pretendemos que el usuario introduzca un email válido

Seleccionamos el campo Email y activamos la pestaña “Scripts”. Ahora, activamos “Library” en la sección “Validation Scripts” y en el desplegable escogemos la opción ff_validemail, introduciendo el mensaje que queremos visualice el usuario si comete un error. Salimos guardando. La figura 13 recoge lo anterior.

Figura 13

- Campos Empresa, teléfono y descripción: Queremos evitar que el usuario los deje en blanco. Para ellos, seleccionamos cada uno de ellos de la lista, activamos la pestaña “Scripts”, “Library”, “Validation Scripts” y en el desplegable seleccionamos la opción “ff_valuenotempty”. En el espacio reservado para los mensajes de error, pondremos “Debe escribir un nombre de empresa” o “Debe escribir un teléfono” o “Por favor, introduzca una descripción de su oferta”.

- Campo Tipo de contrato: Obligaremos al usuario a elegir una opción válida. Haremos lo mismo que en el resto de campos.

- Botón de envío del formulario: Seleccionamos el elemento, activamos la pestaña “Script” y elegimos la opción “Library” en “Action Scripts”. En el desplegable escogeremos la opción “ff_validate_submit” (validar y, si todo está correcto, enviar). Salimos salvando. La figura 14 muestra esto:

Figura 14

- Confirmación del envío: Una vez que el usuario ha enviado el formulario, éste recibirá una confirmación. Para ello, editamos el formulario (botón “Edit Form”) volviendo a la Figura 7. Activamos la pestaña “Scripts” y seleccionamos “Library” en “Submitted Scripts”. Escogemos de la lista la opción “ff_showsubmitted”. Salimos salvando.

Podemos probar el formulario pulsando el botón de envío con algún campo vacío. Si algo falla, deberemos repasar lo visto hasta ahora.

ACCEDIENDO AL FORMULARIO DESDE EL FRONTEND (DESDE EL SITIO WEB)

Queremos que el formulario que acabamos de crear sea accesible desde nuestro sitio. Crearemos ahora, en el menú principal, un botón que nos llevará hasta él.

Desde el backend, pulsaremos las opciones: “Menús –> mainmenu” y haremos clic en “Nuevo”. En la pantalla siguiente, seleccionaremos la opción “Componente”.

En el formulario que aparece, insertaremos el nombre que aparecerá en el Menú Principal de nuestra web (en el ejemplo: Empresas). Seleccionaremos “Facile Forms” en el área de texto y pulsaremos el botón “Aplicar”. Tras esto, aparecerá en el lado derecho de la página un formulario para completar el proceso. La figura 15 lo muestra:

Figura 15

NOTA: El nombre del formulario será el que asignamos cuando lo creamos (Figura 7, campo “Name”). Podemos definir el estilo del formulario (borde, etcétera), pero lo dejaremos con sus opciones por defecto.

Pulsamos “Guardar” y ya está.

Desde el frontend, nuestros visitantes ya podrán cumplimentar el formulario.

GESTIONANDO LOS DATOS GRABADOS POR LOS USUARIOS

Grabaremos una entrada ficticia desde el backend para aprender a manejar los registros futuros. Desde la parrilla cumplimentamos el formulario y lo enviamos. Si todo va bien, recibiremos confirmación del envío.

Seleccionamos la opción “Manage Records” y entraremos en el listado de entradas, el cual dispone de opciones de filtrado. Hacemos clic en nuestra entrada y observaremos lo siguiente (figura 16):

Figura 16

Pulsando la opción “Salvar” la entrada quedará como “Revisada”.

Facile Forms permite, entre otros, que puedas programar tus scripst php (PIECES) para que lo usen los formularios que diseñes. Desde el punto de vista del administrador “aficionado” que no tiene muchas nociones de PHP, esto implica conocer algo de la estructura de Joomla, por lo que aquí vamos a hacerlo un poco más sencillo:

Crearemos un script php que nos permitirá acceder a los registros grabados desde el formulario

Crearemos una página de contenido estático que hará referencia a este script Esta página de contenido estático podrá ser accesible desde el menú bien de

manera privada (usuarios registrados) bien pública (todos los visitantes)

PROCEDIMIENTO

Los datos grabados por el formulario se almacenan en dos tablas:

- “jos_facileforms_records”: donde encontramos el número Id de cada registro asociado a cada formulario (ver figura 17)

Figura 17

- “jos_facileforms_subrecords”: donde se encuentran los valores grabados (ver figura 18). Los Id de la anterior tabla están en el campo “record” de esta tabla.

Figura 18

- Como queremos extraer los registros del formulario llamado “panel_empresas”, extraeremos los “id” asociados y para cada uno de éstos (record en la 2ª tabla), consultaremos los títulos y valores grabados.

NOTA: Como puede observarse en la figura 18, los títulos son los nombres de los inputs del formulario

- Los resultados los mostraremos en una tabla junto con la fecha en la que se grabó el formulario.

PASOS PREVIOS (solamente es necesario darlos la primera vez):

a) Descarga el mambot mosaddphp.php aquí (botón derecho: guardar enlace como)b) Sube el mambot descargado a la carpeta mambots/ de tu directorio joomlac) En el directorio de joomla crea la carpeta mosaddphp/d) Desde el backend, menú “Mambots –> Administrador de Mambots” PUBLICA el Legacy Mambot Includer

Seguimos:

1. Creamos el script php. Puedes descargar el ejemplo aquí (botón derecho: guardar enlace como)

2. Creamos el contenido estático desde el menú del backend: “Contenido –> Administrador de contenido estático” pulsando la opción “Nuevo”

3. Usamos un título y escribimos un encabezamiento (por ejemplo, “OFERTAS DE EMPRESAS RECIBIDAS”). Punto y aparte y escribimos: {mosaddphp:nombre_del_archivo_php} (en el ejemplo: {mosaddphp:ofertas.php}). La figura 19 lo muestra:

Figura 19

4. Activamos la opción “Publicado” y guardamos (ya está)

5. Ahora enlazaremos el documento creado desde el menú principal. Acudimos al menú: “Menús –> mainmenu” y pulsamos el botón “Nuevo”. Seleccionamos la opción “Enlace-Contenido estático”. En el formulario que aparece, insertamos un nombre (que llevará el botón del menú) por ejemplo, “Ofertas” y pulsamos “Guardar”.

6. Abrimos el frontend (web) y observamos cómo ha aparecido un nuevo botón en el menú principal llamado “Ofertas”. Lo pulsamos y … aparecerá la información de los formularios enviados, tal y como vemos en la figura 20

Figura 20

6. Aquí hemos creado un enlace público. Si se desea crearlo para usuarios registrados, solamente hay que restringir el acceso en el contenido estático y crear el enlace en el menú de usuarios registrados.