Ho provato questo componente insieme a qualche altro perché alla ricerca di qualcosa di semplice da gestire per realizzare dei form personalizzati.Alla fine la scelta è caduta su SmartFormer perché è davvero molto intuitivo, ho pensato allora di scrivere questa piccola guida, utile soprattutto ai neofiti di Joomla! che magari vogliono dare al proprio sito un tocco di professionalità e completezza in più.
È la prima volta che impagino un lavoro di questo tipo… siate buoni con me!
Bando alle ciance ed andiamo sul concreto!
Il componente si scarica gratuitamente dal sito del produttore: www.itoris.com ed è stato scritto per 1.5 nativo.
Si installa come tutti i componenti di Joomla! e la realizzazione di un form è davvero semplice, benché se ne possano impaginare di molto complessi, anche su più pagine.
Come consuetudine in Joomla! selezioniamo il componente dal menù a tendina "Componenti" ed accediamo alla home page di SmartFormer; in essa si trovano due esempi di form già realizzati, che si possono eventualmente personalizzare; facciamo click su “Nuovo” per realizzare il nostro form.
Si apre la finestra nella quale si trovano tutti gli strumenti per realizzare il nostro form; anzitutto in alto a destra troviamo i tre pulsanti che di consueto abbiamo in Joomla!: Salva, Applica, Annulla.
Nella prima riga in alto del componente troviamo il campo nel quale inserire il nome del form, l'opzione per la pubblicazione ed altre opzioni che consentono di attivare/disattivare dei pannelli "galleggianti" e dunque spostabili sullo schermo a seconda delle esigenze di visualizzazione, dei quali il più importante è "Element properties". C’è anche la possibilità di togliere la griglia, ma vi consiglio di lasciarla attivata, in modo che tutti i campi siano ben allineati.
La seconda riga è formata da 10 etichette che consentono di realizzare form anche con 10 pagine.
Gli elementi semplicemente si trascinano sulla griglia, poi nel pannello "Element properties" si inserisce il nome del campo (altamente consigliato, soprattutto se sviluppiamo un form con molti campi) e nel medesimo pannello ci sono vari modi per personalizzare il nostro campo: posizione, dimensioni, font, bordo del campo, colori, se è un campo richiesto, se è un campo da validare, ecc. Il testo che si visualizzerà nel nostro form si inserisce nel campo denominato "Default text".
Ricordarsi, non appena terminato di impostare tutti i parametri, di fare click su “Apply”, in basso a destra del pannello "Element properties" altrimenti il nostro lavoro non si salva!
Per iniziare trasciniamo l’elemento “Static Test” nel punto voluto e clickiamo all’interno di esso in modo che ne sia evidenziato il bordo in rosso. Andiamo sul pannello "Element properties" ed iniziamo a personalizzarlo: inseriamo il nome del campo “TestForm” ed il nome dell’etichetta: “Test Form”. È bene ricordarsi che il nome del campo non deve avere spazi o caratteri speciali.
Successivamente trasciniamo nuovamente l’elemento “Static Test” per inserire il campo “NomeCognome”. Poi trasciniamo l’elemento “Text” per inserire il campo vuoto di immissione di nome e cognome nel nostro form.
Se vogliamo possiamo anche fare in modo che sia strettamente necessario inserire questo dato, flaggando l’apposita opzione “Required” e possiamo anche personalizzare ulteriormente la funzione facendo validare al sistema il contenuto che viene inserito dall’utente; ad esempio vedremo in seguito che possiamo far validare il contenuto come e-mail.
Continuiamo nella impaginazione del nostro form personalizzato e trasciniamo nuovamente l’elemento “Static Test” per scrivere l’etichetta “email” e poi trasciniamo l’elemento “Text” per l’inserimento dell’indirizzo e-mail da parte dell’utente.
Personalizziamo il campo, flaggando “Required” e facendo validare il campo come “email”.
Stiamo per concludere il nostro form, prima di inserire il bottone “Invia” inseriamo il codice di sicurezza “Captcha”, trascinando l’elemento nel punto voluto della griglia e poi affiancandovi un campo per l’inserimento dei caratteri, l’elemento “Text”.
Anche il campo “Captcha” può essere personalizzato in dimensioni, tipo di captcha, colori, ecc.
Adesso possiamo trascinare l’elemento “Button” nella posizione voluta. Prima di impostare tutti i suoi parametri facciamo click in alto su “Page 2” per inserire la pagina di ringraziamento, che l'utente visualizzerà dopo aver concluso il riempimento del form ed aver pigiato sul tasto "Invia".
Le dimensioni del campo nel quale è scritto il messaggio di ringraziamento si possono modificare sia trascinandone i bordi con il mouse (si forma un simbolo con due linee parallele quando il bordo del campo è evidenziato in rosso e poniamo la freccia del mouse al suo interno); oppure inserendo le dimensioni volute negli appositi campi del pannello "Element Properties".
Tornando alla pagina 1 del nostro form andiamo a personalizzare le impostazioni del campo “Button” che sarebbe il nostro bottone “Invia”.
Selezionare dal menù a tendina “On-click” l’opzione “Go to the selected page” poi selezionare la pagina 2.
Nel campo “Email To:” inserire l'indirizzo e-mail (al quale inviare il form e flaggare le opzioni “Save in the database:” e “Email data:”.
A questo punto diamo un nome al nostro form e flagghiamo l’opzione “Published”.
Facendo click su “Edit settings” si apre la pagina nella quale possiamo:
Il suddetto elenco è davvero molto completo, vi si trovano anche i messaggi di errore relativi ad un errato inserimento di numeri di carte di credito, del numero CVV posto sul retro delle carte di credito, ecc.
Dopo avere salvato le impostazioni, torniamo alla home page del componente e facendo click su “Create a menu items” possiamo impostare il collegamento ad un menù per il nostro form.
Adesso siamo pronti per fare un test e verificare se funziona tutto. Facciamo click sul menù del nostro sito dove abbiamo inserito il link al form e ci appare la pagina del form, inseriamo i dati richiesti, facciamo click su “invia”.
Il componente si scarica gratuitamente dal sito del produttore: www.itoris.com ed è stato scritto per 1.5 nativo.
Si installa come tutti i componenti di Joomla! e la realizzazione di un form è davvero semplice, benché se ne possano impaginare di molto complessi, anche su più pagine.
Come consuetudine in Joomla! selezioniamo il componente dal menù a tendina "Componenti" ed accediamo alla home page di SmartFormer; in essa si trovano due esempi di form già realizzati, che si possono eventualmente personalizzare; facciamo click su “Nuovo” per realizzare il nostro form.
Si apre la finestra nella quale si trovano tutti gli strumenti per realizzare il nostro form; anzitutto in alto a destra troviamo i tre pulsanti che di consueto abbiamo in Joomla!: Salva, Applica, Annulla.
Nella prima riga in alto del componente troviamo il campo nel quale inserire il nome del form, l'opzione per la pubblicazione ed altre opzioni che consentono di attivare/disattivare dei pannelli "galleggianti" e dunque spostabili sullo schermo a seconda delle esigenze di visualizzazione, dei quali il più importante è "Element properties". C’è anche la possibilità di togliere la griglia, ma vi consiglio di lasciarla attivata, in modo che tutti i campi siano ben allineati.
La seconda riga è formata da 10 etichette che consentono di realizzare form anche con 10 pagine.
Gli elementi semplicemente si trascinano sulla griglia, poi nel pannello "Element properties" si inserisce il nome del campo (altamente consigliato, soprattutto se sviluppiamo un form con molti campi) e nel medesimo pannello ci sono vari modi per personalizzare il nostro campo: posizione, dimensioni, font, bordo del campo, colori, se è un campo richiesto, se è un campo da validare, ecc. Il testo che si visualizzerà nel nostro form si inserisce nel campo denominato "Default text".
Ricordarsi, non appena terminato di impostare tutti i parametri, di fare click su “Apply”, in basso a destra del pannello "Element properties" altrimenti il nostro lavoro non si salva!
Per iniziare trasciniamo l’elemento “Static Test” nel punto voluto e clickiamo all’interno di esso in modo che ne sia evidenziato il bordo in rosso. Andiamo sul pannello "Element properties" ed iniziamo a personalizzarlo: inseriamo il nome del campo “TestForm” ed il nome dell’etichetta: “Test Form”. È bene ricordarsi che il nome del campo non deve avere spazi o caratteri speciali.
Successivamente trasciniamo nuovamente l’elemento “Static Test” per inserire il campo “NomeCognome”. Poi trasciniamo l’elemento “Text” per inserire il campo vuoto di immissione di nome e cognome nel nostro form.
Se vogliamo possiamo anche fare in modo che sia strettamente necessario inserire questo dato, flaggando l’apposita opzione “Required” e possiamo anche personalizzare ulteriormente la funzione facendo validare al sistema il contenuto che viene inserito dall’utente; ad esempio vedremo in seguito che possiamo far validare il contenuto come e-mail.
Continuiamo nella impaginazione del nostro form personalizzato e trasciniamo nuovamente l’elemento “Static Test” per scrivere l’etichetta “email” e poi trasciniamo l’elemento “Text” per l’inserimento dell’indirizzo e-mail da parte dell’utente.
Personalizziamo il campo, flaggando “Required” e facendo validare il campo come “email”.
Stiamo per concludere il nostro form, prima di inserire il bottone “Invia” inseriamo il codice di sicurezza “Captcha”, trascinando l’elemento nel punto voluto della griglia e poi affiancandovi un campo per l’inserimento dei caratteri, l’elemento “Text”.
Anche il campo “Captcha” può essere personalizzato in dimensioni, tipo di captcha, colori, ecc.
Adesso possiamo trascinare l’elemento “Button” nella posizione voluta. Prima di impostare tutti i suoi parametri facciamo click in alto su “Page 2” per inserire la pagina di ringraziamento, che l'utente visualizzerà dopo aver concluso il riempimento del form ed aver pigiato sul tasto "Invia".
Le dimensioni del campo nel quale è scritto il messaggio di ringraziamento si possono modificare sia trascinandone i bordi con il mouse (si forma un simbolo con due linee parallele quando il bordo del campo è evidenziato in rosso e poniamo la freccia del mouse al suo interno); oppure inserendo le dimensioni volute negli appositi campi del pannello "Element Properties".
Tornando alla pagina 1 del nostro form andiamo a personalizzare le impostazioni del campo “Button” che sarebbe il nostro bottone “Invia”.
Selezionare dal menù a tendina “On-click” l’opzione “Go to the selected page” poi selezionare la pagina 2.
Nel campo “Email To:” inserire l'indirizzo e-mail (al quale inviare il form e flaggare le opzioni “Save in the database:” e “Email data:”.
A questo punto diamo un nome al nostro form e flagghiamo l’opzione “Published”.
Salviamo il form e torniamo alla pagina iniziale del componente SmartFormer dove vediamo l’elenco dei form realizzati.
Facendo click su “Edit settings” si apre la pagina nella quale possiamo:
- inserire il nome dell'azienda/persona proprietaria del sito;
- inserire la casella e-mail alla quale il form sarà spedito;
- personalizzare il messaggio di ringraziamento per averci contattato e che sarà inviata alla casella e-mail che l'utente ha inserito quando ha riempito il form;
- personalizzare l'oggetto della e-mail di cui sopra (di default è: no reply email);
- fare in modo di ricevere la stessa e-mail che viene inviata all'utente, utilizzando: il campo "BCC" o "CC", nel qual caso, però, anche l'utente conoscerà che la stessa è stata inviata ad un altro indirizzo;
- personalizzare i messaggi di errore il cui elenco è sulla destra del desktop e di default sono in inglese.
Il suddetto elenco è davvero molto completo, vi si trovano anche i messaggi di errore relativi ad un errato inserimento di numeri di carte di credito, del numero CVV posto sul retro delle carte di credito, ecc.
Dopo avere salvato le impostazioni, torniamo alla home page del componente e facendo click su “Create a menu items” possiamo impostare il collegamento ad un menù per il nostro form.
Adesso siamo pronti per fare un test e verificare se funziona tutto. Facciamo click sul menù del nostro sito dove abbiamo inserito il link al form e ci appare la pagina del form, inseriamo i dati richiesti, facciamo click su “invia”.
Il sistema ci restituisce la pagina con il messaggio di ringraziamento:
Se adesso torniamo alla home page del componente e facciamo click su “View data” troviamo l’elenco delle email ricevute dal nostro sito utilizzando il form:
e facendo click su “Preview” otteniamo anche il dettaglio di ogni e-mail che, così come l’elenco di cui sopra, possiamo scaricare in formato pdf.
e facendo click su “Preview” otteniamo anche il dettaglio di ogni e-mail che, così come l’elenco di cui sopra, possiamo scaricare in formato pdf.
