Supporto volontario e collaborativo per Joomla!® in italiano

Un semplice componente per realizzare form personalizzati in Joomla! 1.5

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Informazioni UtiliHo 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! Sorridente
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.


figura 1 - SmartFormer - Strumenti di SmartFormer

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”.

figura 2 - SmartFormer - Opzione campo richiesto

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.

figura 3 - SmartFormer - Inserimento Captcha

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".

figura 4 - SmartFormer - personalizzazione campo Button
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”.





figura 5 - SmartFormer - denominazione form e pubblicazione

Salviamo il form e torniamo alla pagina iniziale del componente SmartFormer dove vediamo l’elenco dei form realizzati.

figura 6 - SmartFormer - personalizzazione opzioni form
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.

figura 7 - SmartFormer - impostazione link al menù

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”.

figura 8 - SmartFormer - prova invio form

Il sistema ci restituisce la pagina con il messaggio di ringraziamento:

figura 9 - SmartFormer - 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:

figura 10 - SmartFormer - lista dei form ricevuti dal sito

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.

figura 11 - SmartFormer - dati inseriti nel singolo form

Grazie per l’attenzione e Buon Lavoro a tutti!

RedMac  Occhiolino

CommentaCommenta questo articolo sul forum.
Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
RedMac
Nome: RedMac
Alcune informazioni su di me:


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.7.2 Stabile Italiana
Data di rilascio: 23 Maggio 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: