Chronoforms v5, guida in italiano 01 5/5 (1)

Vogliamo aiutarti a capire come utilizzare Chronoforms, un  componente molto potente e, anche senza conoscere i linguaggi di programmazione, ti permetterà di creare form di inserimento dati nel database e pagine di visualizzazione dei dati inseriti.

Potrai utilizzare alcuni elementi di Chronoforms per inviare in automatico e-mail dopo l’avvenuto inserimento dei dati, potrai fare l’upload di file, e molto altro ancora.

Con  questo articolo vogliamo realizzare una guida di base all’utilizzo di

Chronoforms

versione 5

(in seguito CFv5). Tutti gli esempio hanno una versione demo di quanto descritto così è possibile verificare on line quanto realizzato nell’esempio.

Non ha importanza se il CFv5 è stato installato su Joomla o su WordPress, qualora ci fossero differenze saranno indicate di volta in volta.

Primo esempio che utilizza i seguenti elementi

  • Text Box
  • Text area Box
  • Radio Box
  • Submit
  • Creazione tabella
  • Modifica tabella
  • Data management – DB Save

Esempio 01

Innanzitutto apriamo Chronoforms e facciamo click sul pulsante New per iniziare la procedura di creazione del nostro nuovo form.

Chronoforrms Nuova form
Chronoforms Nuova form

Si apre il wizard che ci permette di inserire il nome e la descrizione, per ora lasciamo inalterati gli altri campi e salviamo la form e solo dopo passiamo alle ulteriori modifiche.

Inserire nome e descrizione form
Inserire nome e descrizione form

Published: se lasciamo SI ci permette di pubblicare ad ogni salvataggio la form creata, se invece selezioniamo NO allora verrà salvata in bozza ma non pubblicata.

Setup Mode: abbiamo due scelte, Advanced ci permette di utilizzare tutti gli  elementi nel setup mode, anche quelli avanzati, se invece scegliamo Simple allora vedremo solo quelli di base.

Form app: ci permette di associare la form ad una categoria in modo tale da poterle raggruppare in una eventuale ricerca.

Spostiamoci nel tab di progettazione Designer e trasciniamo gli elementi che ci interessano, in questo esempio prendiamo Text Box, Text-area Box, Radio Box e Submit Button.

Designer inserimento elementi
Designer inserimento elementi

Ora vediamo come configurare i singoli elementi del form creato e ricordiamoci che finchè non inseriamo l’elemento HTML in Setup, il form non è visibile, per cui ora procediamo con la configurazione e poi vedremo l’ulteriore passaggio:

Text Box

Sull’elemento Text Box facciamo click su Edit ed appare la form di configurazione della parte General e poi vedremo la parte relativa alla Validation.

Nel tab General possiamo inserire il Field Name che è il campo più importante perché sarà lo stesso nome campo utilizzato nella tabella che successivamente andremo a creare nel nostro Data Base. Attenzione a non utilizzare spazi o caratteri speciali. Inoltre ricordati che il DB è Case Sensitive quindi, se inserisci caratteri maiuscoli nei nomi campi, ricordati che dovrai utilizzare sempre gli stessi caratteri maiuscoli e minuscoli.

Text Box configurazione
Text Box configurazione

Il Field ID viene utilizzato per essere richiamato da funzioni che vedremo in seguito, per ora mettiamo lo stesso valore del Field Name.

Il Field Value non è altro che il valore di default proposto dal form.

Label è l’etichetta del campo che appare accanto al punto di compilazione, possiamo anche scegliere di posizionarla di lato o sotto usando il parametro Label position (Left oppure Top).

Possiamo anche dare indicazioni di compilazione inserendo nel Sub Label il testo visibile sotto il campo da compilare.

Text Box dati configurazione
Text Box dati configurazione

Per ora non configuriamo gli altri parametri, li vedremo nei prossimi esempi.

Riportiamo in tabella l’elenco di tutti i parametri configurabili per questo elemento, per alcuni daremo solo una definizione mentre con gli altri esempi che seguiranno vedremo i dettagli.

Field Name Nome del campo che verrà usato per dare il nome al campo della tabella
Field ID Nome ID utilizzato da funzioni più complesse
Field Value Valore di default del campo
Label Etichetta, testo che viene visualizzato nel form accanto al campo
Label Position Posizionamento dell’etichetta, a sinistra o sotto il campo
Sub Label Testo che può essere visualizzato sotto il campo
Placeholder All’interno del campo si può visualizzare questo testo ma non viene inserito nel DB, come ad esempio il valore di default Field Value
Max Length Lunghezza massima del campo, si esprime in numero di caratteri
Size
Class
Title
Style
Mask
Extra params
Load state E’ lo stato dell’elemento, può essere visibile e attivo, nascosto.
Tooltip Testo che viene visualizzato solo se si passa con il puntatore del mouse sopra il punto esclamativo su sfondo blu che appare accanto al campo.

 

Text area Box

In questo caso la configurazione e i parametri sono simili al Text Box e quindi ci soffermeremo solo sulle differenze.

Rows Numero di righe dell’area di scrittura della Text area Box
Columns Numero di colonne dell’area di scrittura della Text area Box
WYSIWYG editor (Si oppure NO) Abilita l’utilizzo dell’editor Html in modalità visuale.

 

Possiamo specificare le dimensioni in righe e colonne (Rows e Columns) dell’area dove poter inserire il testo su più righe.

Text area Box configurazione
Text area Box configurazione

Il Tooltip permette di visualizzare il testo inserito al passaggio del mouse sopra il simbolo del punto esclamativo su sfondo blu. Questo puoi utilizzarlo per un piccolo Help in linea che risulta essere molto utile.

Radio Box

Questo elemento permette di fare scelte obbligate che si escludono a vicenda, non si possono scegliere più di una opzione, in altri esempi vedremo come si possono fare scelte multiple.

Il campo Options permette di inserire le scelte possibili, nella forma valore=titolo, ovvero il valore è ciò che viene inserito nel Data Base che corrisponde alla scelta visibile sul form con il titolo. Molto utile quando la scelta non può essere descritta con singole e allora usiamo più parole nel titolo mentre nel DB inseriamo un solo termine univoco.

Radio Box configurazione
Radio Box configurazione

Vediamo le definizioni dei campi in più rispetto agli elementi visti finora.

Options Elenco delle scelte possibili
Checked value
Layout  (Vertical oppure Horizontal Posizionamento verticale o orizzontale delle voci da scegliere
Enable ghost (Si oppure No) Se abilitato permette di passare sempre e comunque un valore, anche se non lo inseriamo nel form
Ghost value Valore che viene salvato nel DB nel caso in cui non si valorizzi il campo

 

Submit

Questo elemento, pur essendo il più importante in quanto permette di eseguire un’azione ovvero salvare i dati, non richiede una particolare configurazione.

Possiamo cambiare il testo che appare sul bottone e invece di Submit possiamo scrivere Salva o Invia.

Elementi di testo: parametri Validation

Per gli elementi di testo abbiamo trascurato il tab Validation che ci permette di definire alcuni criteri per l’inserimento dati. Possono essere combinati tra loro, ad esempio possono rendere un campo obbligatorio attivando con SI il campo Required. Nella form apparirà un asterisco rosso per indicare che quel campo è obbligatorio. Allo stesso modo se il campo deve contenere una e-mail, andremo ad impostare il valore Email, se invece è l’indirizzo di un sito web allora impostiamo il parametro Url.

Per ora non ci soffermiamo sui parametri riportati in tabella in quanto saranno approfonditi in seguito.

Confirm Fild ID del campo con cui vogliamo fare il controllo
Custom function Funzione personalizzata

 

Visualizzazione del form

Passiamo fare tutte configurazioni in modo corretto, ma se non diciamo a CFv5 di caricare il codice allora non visualizziamo nulla.

Per farlo ci spostiamo in Setup e poi trasciniamo l’elemento HTML (Render Form) nell’area On Load e salviamo.

Setup carica codice Html
Setup carica codice Html

Al caricamento della pagina, CFv5 propone anche il codice del form. Possiamo fare un test della pagina facendo click su Test form e otteniamo

Form visualizzazione
Form visualizzazione

In particolare se con il puntatore del mouse ci posizioniamo sul punto esclamativo con sfondo blu, vediamo il testo inserito nel Tooltip.

Visualizzazione tool tip
Visualizzazione tool tip

Creazione della tabella

Lo scopo principale di un form è quello di salvare dei dati in un Data Base (DB) e quindi prima di poterlo fare dobbiamo creare la tabella con i giusti campi.

Possiamo farlo in manuale oppure sfruttare una funzione di CFv5 che con pochi click ci permette di creare la giusta tabella.

Salviamo il form e arriviamo in Form Manager dove sono riportate tutte le form fin qui create. Selezioniamo quella che ci interessa e in altro facciamo click su Create table.

Creare la tabella nel DB
Creare la tabella nel DB

Appare una maschera di riepilogo con l’elenco dei campi che verranno creati nella tabella. Ti consigliamo di cambiare subito il nome della tabella e non utilizzare il nome proposto da CFv5. Poi togli il check al campo button perché il pulsante Submit non deve avere un campo corrrispondente per salvare i dati.

Crea tabella dettagli struttura
Crea tabella dettagli struttura

Da qui è possibile anche modificare la tipologia dei campi (INT intero, VARCHAR testo a lunghezza prefissata, etc.) ma vedremo i dettagli nei prossimi esempi.

Per creare la tabella devi cliccare su Save in alto a destra e, se tutto è andato bene, ti appare il messaggio con sfondo verde “The table has been created succesfully”.

Salvare i dati nella tabella del Data Base

Dopo aver creato la tabella dobbiamo specificare che alla pressione del tasto Submit (Salva o Invia) si deve compiere l’azione di salvataggio dei dati nel DB e nella tabella specificati.

Apriamo il form e ci spostiamo nel tab Setup e trasciniamo l’elemento DB Save che troviamo nel gruppo Data Management e lo mettiamo nell’area On submit.

Ora apriamo l’elemento appena trascinato e scegliamo la tabella in cui salvare i dati, ovvero la tabella appena creata.

Salvare i dati nella tabella
Salvare i dati nella tabella

Per selezionarla basta far scorrere l’elenco e la troviamo. Possiamo anche dare un nome alla nostra azione andando a valorizzare Action Label. Per ora non tocchiamo altro, salviamo e il gioco è fatto.

Se vuoi vedere la demo della form appena realizzata fai click qui Demo 01


Se l’articolo ti è stato utile, condividilo sui social; in questo modo ci aiuterai a crescere e potremo offrirti altri contenuti utili oppure lasciaci un commento.

Nel prossimo articolo proporremo un secondo esempio, se vuoi essere avvisato della prossima pubblicazione iscriviti alla nostra news letter facendo click qui (Iscrizione)

Secondo esempio che utilizza:

  • Datepicker Box
  • Drop down
  • Drop down con selezione da tabella
  • Checkbox
  • Checkbox Group
  • Come evitare la modifica della data dopo aver selezionata con datepicker
    • Esempio 02
    • Demo 02

 

 

Please rate this