Formularios en Joomla con Chrono Forms

Formularios Joomla

Formularios Joomla

Joomla en uno de los CMS libres más flexibles que existen en el mercado, sin embargo una de sus debilidades es la creación de formularios. Para solucionar ese problema existen varios componentes para crear y añadir formularios a nuestros sitios Joomla. Los más populares son Joomla ArtForms, FacileForms y Chrono Forms que es el que vamos a explicar a continuación.¿Qué es Chrono Forms?
Es un componente que ayuda a usuarios de Joomla a crear y publicar potentes formularios web en minutos. Algunas de las características más importantes de Chrono Forms son las siguientes:

  • Capacidad de usar Javascript y estilos CSS en forma de código.
  • Capacidad para configurar una respuesta automática.
  • Añadir Captcha imageverification a su forma de protegerle de spam.
  • Incluir campos de carga de archivos.
  • Permite código PHP.
  • Conectividad con otros componentes.

Tutorial de Instalacion y creación de formularios con Chrono Forms

Descargar Chrono Forms

En primer lugar tenemos que descargar ChronoForms desde su página web oficial http://www.chronoengine.com/

Instalar Chrono Forms

Chrono Forms es un componente, por ello se instala como cualquier componente Joomla. Para ello hacer clic en Extensiones-Instalar/Desinstalar

formulario1
Seguidamente  Seleccionar el paquete de instalación que se encuentra en nuestro pc, para ello presionar Examinar.

examinaar
Luego seleccionamos el paquete de instalación comprimido y presionamos en Abrir.

abrir
Posteriormente hacemos clic en el botón Subir Archivo & Instalar y esperamos a Joomla se encargue de instalar el componente Chrono Forms. Si todo se hizo correctamente debe aparecer el mensaje de éxito de la instalación.

exitoPrimer Formulario desde Chrono Forms
Para crear un formulario en Chrono Forms, ir a Componentes — Chrono Forms — Form Wizard.

formulario1
Al presionar Form Wizard aparece la siguiente pantalla.

formulario2
Desde aquí vamos a diseñar el formulario, agregar los correos a donde enviara y el formato de presentación que tendrá el texto que se envíe a través del formulario.

Diseñar Formulario
Para darle formato al formulario arrastramos las opciones que se añadiran desde la caja de herramientas ( Toolbox).

formulario3
Las opciones que ofrece este asistente de creación de formularios son las siguientes:
Text, Heading, TextBox, PasswordBox, TextArea, DropDown, CheckBox, RadioButton, DateTimePicker, FileUpload, HiddenField, Captcha, Button. Cada una de esas opciones tiene sus propiedades.

El Formulario que vamos a crear tiene los siguientes campos:
Titulo, Nombre, Correo, Mensaje, Enviar

Titulo del Formulario
Para ello arrastrar un Heading con las siguientes propiedades:
Text: Formulario de Prueba

Size: H1
Nombre
Para ello arrastrar un TextBox con las siguientes propiedades
Label: Nombre
Validation: Required.
Validation Message: Introduzca su Nombre Completo.
Tooltip: Introduzca su Nombre Completo.
Field Name: text_1

Correo
Para ello arrastrar un TextBox con las siguientes propiedades

Label: Correo
Validation: Required, Email.
Validation Message: Introduzca una dirección de Correo valida. Ejemplo: correo@ejemplo.com
Tooltip:
Introduzca una dirección de Correo valida. Ejemplo: correo@ejemplo.com
Field Name: text_2

Mensaje
Para ello arrastrar un TextArea con las siguientes propiedades

Label: Mensaje
Validation: Required.
Validation Message: Escribe tu Comentario
Tooltip: Escribe tu Comentario.
Field Name: text_3

Enviar
Para ello arrastrar un Button con las siguientes propiedades
Label: Enviar

Al realizar estos pasos el diseño del formulario está listo, ahora hay que añadirle las direcciones de correo a donde se enviaran los datos del formulario. Para ello presionamos en el paso 2 del asistente de creación de formularios del componente Chrono Forms.

Hacer clic en el icono New Email get_msgs_f2 y arrastrar desde la caja de herramientas las siguientes opciones:

To:
Subject:
Dynamic From Name:
Dynamic From Email
:

En todas las opciones tienen que estar disponibles, para ellos marcar Yes en la propiedad Enabled? :

Luego de habilitar la dirección de correo de destino, presionar sobre Paso 3 y editar el formato de salida del formulario creado, darle el formato deseado y guardar los cambios.

paso3
Para activar un mensaje de confirmación del envío del formulario, debemos ir al paso 4 y se escribe un mensaje confirmación. Por ejemplo Mensaje enviado Correctamente.

paso4
Para activar el formulario creado debemos guardar los cambios, luego en la pantalla principal de Chrono Forms, hacer clic en el nombre del formulario o marcar la casilla del formulario y hacer clic en el botón editar.

paso5 paso7
Luego en las opciones generales colocar Yes en Email the results ?, guardar y habilitar el formulario en la pagina principal de Chrono Forms.

paso6

Publicar Formulario.

Para publicar el formulario en nuestro sitio web joomla, creamos un Ítem de Menú apuntando a Chrono Forms, le colocamos el nombre deseado por ejemplo Contacto y en el campo Form name el nombre del formulario en nuestro caso escribimos formulario.

A continuación un video que resume todos estos pasos. Cualquier sugerencia o duda no duden en escribir.

15 comentarios

  1. Hola quiero agradecer a emir y al que hizo el video, necesitaba poder configurarlo y gracias a ustedes tuve exito, saludos a toda Venezuela desde Buenos Aires

  2. Saludos que bueno que te sirvió el tutorial y el video, espero realizar otros tutoriales y videos de Joomla. Muy buena tu pagina. Gracias por comentar.

  3. de nada y mucha suerte ;)

  4. gracias por el video tutorial, estubo re bueno, ud si contribuye con el conocimiento, mil gracias otra vez y saludos a toda venezuela desde el peru

  5. Hola! Tengo problemas con la recepción del mail, he seguido todos los pasos, pero no me llega el mail con la info del formulario, alguna idea???

  6. Hola¡¡¡ pasaba a dar un saludin y depaso agradecer por el video tutorial me soluciono la vida, mil gracias.

  7. hola, cada vez que quiero instalar el Chronos para el joomla 1.5 me sale este error: Fatal error: Maximum execution time of 30 seconds exceeded in C:\wamp\www\MENTES_CREATIVAS\libraries\joomla\filesystem\folder.php on line 392

    Ya no se qué hacer, por favor alguien ayúdeme… Saludos desde México

  8. Gracias hermanos Venezolanos hanfacilitado mi labor. ¿Han hecho alguna explicación de cómo insertar, desde estos formularios, datos en tablas? o saben dóde se puede hallar algo de eso. Nuevamente gracias

  9. Emir, instale el chronoforms, pero me pide una validacion…

  10. Que tal, yo tengo una pregunte existe algo que pueda guardarme el contenido enviado dentro de alguna tabla de mi base de datos y que se vaya alojando ahi los datos ingresados en lugar de mandarlos por correo ya que esto es lo que yo necesito. Gracias y muy buen tutorial me sirvio mucho!!

  11. Hola como les va a todos, pero Jorge tiene razón, si necesito enviar eso a una base de datos de mysql como se puede hacer, porque me parece que he escuchado por ahi, que hay alguno de los componentes pero no sé cual de los tres mas famosos será: facileforms, chronoforms, o no se cual otro mas, que HASTA permite creer las tablas y hasta los campos basados en los nombres de los objetos del formulario a guardar. Cuál será, o será este?

  12. Hola saludos a todos gracias por escribir y estar pendiente de este post, eso demuestra de que el pequeño tutorial les fue util, en cuanto a las preguntas que han realizado sobre Chrono Forms no he preparado ningun tutorial pero si efectivamente este componente permite comunicarse con bases de datos, tambien se conecta con otros componentes como el community builder. Disculpen la demora pero estuve ocupado en otras cosas y abandone el blog. Aprovecho para informarles que tengo dominio propio ahora el contenido de este blog lo pueden disfrutar en http://www.emirblog.com. Saludos en las proximas horas comienzo a escribir con frecuencia en el blog. gracias a todos por estar pendiente del blog.

  13. Hola Emir, fijate que estoy haciendo una pagina en joomla y utilizo el componente para hacer formularios el de Chrono Forms, me hubiera encantado haber visto tu blog antes, ya que me hubiera ahorrado mucho trabajo para configurar y hacer mis formularios.

    MUCHAS GRACIAS, ESTA EXCELENTE TU EXPLICACIÓN.

    En fin me encuentro con un problema ahora, quiero que mis clientes puedan adjuntar archivos y me los envíen, asi que cree un formulario y le puse el campo para adjuntar y asi: el problema es que…

    Aparece así

    Adjuntar archivo:_____________browse

    y ya no hay nada que diga subir o algo

    Y luego si le das enviar dice ademas que el archivo es muy pesado.
    Y cuando me llegan los datos a mi mail solo dice, en ese campo el nombre de la imagen que se adjunto pero sin ningun archivo.

    No se si pudieras ayudarme, si sabes como hacer esto, de verdad te lo agradecería mucho….

    Gracias

    Atte Alejandra.

  14. Muy buen blog felicidades. Lo voy a usar para mi componente. Gracias.

  15. Hola Emir:

    Fijate que estoy haciendo una pagina en joomla y utilizo el componente para hacer formularios el de Chrono Forms, me hubiera encantado haber visto tu blog antes, ya que me hubiera ahorrado mucho trabajo para configurar y hacer mis formularios.

    MUCHAS GRACIAS, ESTA EXCELENTE TU EXPLICACIÓN.

    En fin me encuentro con un problema ahora, quiero que mis clientes puedan adjuntar archivos y me los envíen, asi que cree un formulario y le puse el campo para adjuntar y asi: el problema es que…

    Aparece así

    Adjuntar archivo:_____________browse

    y ya no hay nada que diga subir o algo

    Y luego si le das enviar dice ademas que el archivo es muy pesado.
    Y cuando me llegan los datos a mi mail solo dice, en ese campo el nombre de la imagen que se adjunto pero sin ningun archivo.

    No se si pudieras ayudarme, si sabes como hacer esto, de verdad te lo agradecería mucho….

    Gracias

    Atte Alejandra.

Escribe un comentario