Ratio: 5 / 5

Inicio activadoInicio activadoInicio activadoInicio activadoInicio activado
 

Pasos para configurar un formulario con el componente ChronoForms de Joomla!

Para acceder al administrador de Joomla! debes ingresar el link de la página seguido de un "/" y la palabra "administrator". Ejemplo: www.miestiloweb.com/administrator

A continuación, encontraras la visual de inicio de sesión, donde tendrás que ingresar con tu usario, contraseña y puedes elegir el idioma que desees. Artículo completo www.miestiloweb.com/joomla/35-como-ingresar-con-tu-usuario-administrador-a-joomla

administradorjoomla


1. En el menú principal de Joomla! seleccionamos la opción componentes y en el desplegable vamos al componente ChronoForms 5.

chronoforms1

2. Dentro del menú se encuentran los formularios ya creados y a la derecha se puede ver el menú de opciones de ChronoForms.

chronoforms2

3. Seleccionamos la opción "New" para crear el nuevo formulario.

4. Al ingresar estamos posicionados en la pestaña "General", en esta se deben completar los campos: Nombre del formulario y la descripción.

chronoforms3

5. En la siguiente pestaña "Designer", se agregan los campos requeridos y se le da diseño a nuestro formulario.

chronoforms4

6. En la columna izquierda observamos tres Categorías: Básico, Avanzado y Widgets, de las cuales se pueden arrastrar diferentes tipos de campos para agregarlos al formulario.

7. Al agregar un campo al formulario observamos:

7.1 Nombre y posición

7.2 Herramientas de edición (Copiar, Editar, Arrastrar y Borrar )

7.3 Previsualización del campo.

chronoforms5

8. Creamos un campo "Dropdown" para realizar una lista desplegable y presionamos el botón azul "Editar" para configurarlo.

chronoforms6

9. Al ingresar se deben llenar los campos "Field Name" (nombre del campo en la base de datos), "Field ID" (identificador del campo en la base de datos), "Label" (Texto que acompaña el campo que ve el usuario final Ej: "Indique su empresa") y en el espacio "Options" se completan las opciones que aparecerán en el desplegable (ejemplo Noel, Crich, Nutresa, etc.), en esta tercera opción el campo se construye Noel=Noel. En este caso el nombre que va antes del igual es el que va a la base de datos y el segundo, luego del igual, es el que verá el usuario.

10. En la pestaña siguiente "Validation" se puede configurar si el campo seleccionado va a ser obligatorio o no desde la opción "Required": "Yes/No"

chronoforms7

11. Creamos un campo "Text box" para obtener información alfanumérica en un campo sencillo. Para cambiar la información del campo ingresamos a Editar en la pestaña "General".

chronoforms8

12. Si se quiere que el campo verifique si la información ingresada es un correo, o sólo números o sólo letras, ingresamos a "Editar", en la pestaña de "Validación" y elegimos la o las opciones deseadas.

chronoforms9

13. Creamos un campo tipo "Radio Box" para un campo que tenga un checkbox en donde se active o no. Se ingresa a "Editar" para configurar opciones de Campo y Label. Al igual que el campo Dropdown se tiene la sección Options en donde se agregan los valores de la misma manera, primero para la base de datos y segundo para la visual del usuario Ej:. 0=No, en la pestaña validación se puede seleccionar si es obligatorio o no con la opción Required.

chronoforms10

14. Creamos el campo tipo "Datepicker Box" para agregar fechas. En la edición se completa el Nombre del campo, id y Label, adicionalmente en la sección "Format" Se indica el Formato de la fecha que va a ingresar el usuario. Igualmente en la pestaña "Validation" se puede indicar si es obligatorio o no.

chronoforms11

15. Campo tipo Textarea Box: Este campo le permite al usuario insertar una cantidad de texto mucho mas grande, como un comentario de varias líneas.

chronoforms12

16. Campo tipo Checkbox: Este campo permite al usuario crear un campo de selección múltiple, en su edición se completan los datos Generales y en la sección de Opciones se debe llenar de la misma manera que las Opciones de Dropdown Ej: condicionpeligrosa=Condición Peligrosa, al igual que en los otros campos en la pestaña Validación se indica si es obligatorio responder.

chronoforms13

17. Campo tipo File Field o Subida de archivos: Este campo le permite al usuario adjuntar archivos en el envío del formulario, se deben completar los campos requeridos ya mencionados anteriormente y la parametrización se continuará en la pestaña "Setup" del Formulario para poder generar correctamente la subida de archivos.

chronoforms14

18. Submit Button: Todo formulario debe tener un botón que ejecute el envío de la información, en la sección Value/Label se agrega el texto que se mostrará como el nombre del botón Ej:. Enviar.

chronoforms15

19. Una vez modificado la parte del Diseño del Formulario procedemos a parametrizarlo para su funcionamiento en la pestaña "Setup". Esta se encuentra dividida en dos secciones: "On load" (al momento que carga la pagina) y "On Submit" (al momento de presionar el botón y generar el envío).

chronoforms16

20. La primera opción que debemos agregar al Setup en la sección On Load del formulario es HTML (Render Form) esta opción habilita el formulario para que pueda ser visualizado por el usuario, los parámetros se dejan configurados por defecto.

chronoforms17

21. Si nuestro formulario en la parte de Diseño tiene habilitado un campo para subida de archivos debemos entonces en la parte de Setup agregar la opción File upload en la zona del On submit.

chronoforms18

21.1 En la opción de "Files config" debemos agregar el nombre del campo que creamos en el diseño del formulario seguido de dos puntos (:) y a continuación los tipos de extensiones que aceptar al momento de la subida de los archivos Ej.: evidencia:jpg-png-gif-rar-zip-docx

21.2 Opción Upload path se debe agregar la ruta donde se vana subir los archivos del servidor utilizar la ruta siguiente:

/var/www/SYNC/eficacia_repair/multisites/nutresa/images/chronoforms/upload/

21.3 Opción Max file size: esta opción limita el tamaño de subida de archivo Ej.: 2000 equivaldría a 2 megas por archivo

22. Para guardar los datos del formulario en una base de datos debemos guardar cualquier cambio pendiente que haya y regresar a la página principal del componente Chronoforms.

23. Se selecciona el formulario que estamos creando y en el menú superior presionamos la opción "Create table", En esta visual se selecciona el nombre de la tabla y se verifican los campos que van a quedar guardados en nuestra tabla de la base de datos. Finalmente se presiona "Save" en la parte superior para guardar.

chronoforms19

24. De vuelta al formulario creado y en la pestaña de "Setup", agregamos la opción DB Save en la columna derecha en el menú Data Management.

chronoforms20

24.1 Se debe seleccionar el nombre de la tabla de la base de datos en la opción Table Name.

24.2 Si se quiere que el formulario además de ser guardado sea enviado a una dirección de correo electrónico agregamos el campo Mail en la sección On submit

chronoforms21

24.3 Seleccionamos en la opción Enable "Yes" para activar la función de envío al correo e indicamos en la opción "To" la dirección de correo y en "Subject" el asunto del correo.

24.4 También se puede agregar un mensaje para que cuando el usuario envíe el formulario aparezca un texto por ejemplo de agradecimiento, agregando el campo "Display Message".

chronoforms22

24.5 En el campo Message content agregamos el mensaje que verá el usuario al momento de enviar los datos del formulario

25. ara terminar, cuando se quieran ver los datos que se hayan guardado en la base de datos regresamos a la página principal del componente Chronoforms y a la derecha del nombre del formulario se encuentra un botón en la columna "Connected Tables", al dar click seleccionamos la tabla asignada.

chronoforms23

En esta visual se encontrarán los datos que hayan sido recibidos a través del formulario, se puede seleccionar el registro y en la opción superior "Backup Records" puede exportarse un archivo .CSV, si no se quiere descargar puede consultarse en línea al dar click en la fecha de creación.

chronoforms24