Ricevere feedback dai visitatori del nostro sito web è fondamentale, poiché permette di raccogliere informazioni da un potenziale cliente.

In JOOMLA il form per la gestione contatti è già integrato nell’installazione, ma non vi è la possibilità di:

  1. aggiungere una casella di controllo per accettare termini e condizioni sulla Privacy;
  2. inserire ulteriori campi;

Il modulo contatti che svilupperemo con SEBLOD, permetterà di personalizzare a nostro piacimento il form.

In questo articolo faccio riferimento alla nuova versione di SEBLOD 3.10.X compatibile con la versione Joomla 3.8

Puoi vedere attraverso questo link la pagina della versione demo del form di contatto, l’interfaccia si presenta molto semplice, sarai in grado di testare e renderti conto delle potenzialità di utilizzo di questo modulo, ho utilizzato un Template estremamente minimale, ma dotato di elementi ben strutturati offrendo un ottima esperienza di navigazione, di lettura dei contenuti e degli elementi che compongono il form. La veste grafica è stata sviluppata con Bootstrap 3, dotata di un layout completamente Responsive, in questo link una guida su come creare template joomla 3 da zero

Realizzare un modulo di contatto personalizzato

In questo articolo, vedremo un esempio completo di un form che consente d’inviare una email agli amministratori del sito, senza creare contenuti (articoli, categorie ecc.) caratteristica principale di SEBLOD.

La procedura per la creazione di un modulo, ne ho già parlato tempo fa in questo articolo
Come creare un modulo personalizzato, consiglio di dare uno sguardo al tutorial, prima di continuare a leggere.

Dopo aver installato il componente SEBLOD, dall’area amministrativa:

  1. selezioniamo Componenti -> SEBLOD 3.x dal menu di navigazione principale;
  2. clicchiamo sul pulsante Form & Content Type Manager;
  3. facciamo click sul pulsante “nuovo” nella barra degli strumenti, e generiamo il nostro form;

Pulsante per creare il modulo contatti

Il nostro form, sarà formato da una sola vista il site(Front End), a differenza dei form creati negli articoli precedenti, con la gestione delle viste backend, intro, content.

Creare il Front End del form

Analizziamo la pagina che ci si mostra davanti, è la struttura del nostro form, non vado a spiegare tutte le varie aree presenti nella pagina, ne ho parlato nei tutorial di SEBLOD precedenti.

Selezioniamo il tab Site Form.
L’area si presenta con queste voci, nel primo riquadro troviamo i campi:

  1. Title: assegniamo il nome del modulo, nel nostro esempio “Form contatti“
  2. App Folder: scheda dove memorizzare il tipo di contenuto, lasciamolo con il valore di default.

Cliccando nella freccetta in basso, SEBLOD fa spuntare un secondo riquadro, con i seguenti elementi:

  1. Object: oggetto di JOOMLA, selezioniamo tipo Free. Dobbiamo selezionare questa voce, perchè il modulo richiesta informazioni che stiamo sviluppando, non deve creare contenuti(articoli, categorie, utenti), deve solamente inviare email, motivo per cui l’oggetto Free è più adatto al nostro form.
  2. Quick Menu: permette di rendere il modulo di contatto disponibile ai nostri utenti, associandolo ad una voce di menu. Nel nostro caso, lo collegheremo al menu principale, per far questo selezioniamo "Aggiungi a questo menu".

freccetta per far apparire un ulteriore riquadro

Tutti gli altri elementi possono restare con i valori di default

Creare campi personalizzati

Il nostro modulo contatti sarà formato dai seguenti campi: Oggetto, Nominativo, Email, Messaggio, Codice Captcha, Checkbox Privacy.

La procedura per creare e posizionare un campo nel modulo è la stessa descritta nel tutorial Come creare form personalizzati, basta cliccare sull’icona con il simbolo del più nella colonna di destra.

Pulsante per creare un nuovo campo - joomla

Vediamo che ci sono diversi elementi: titolo, nome, tipo di campo, limiti di caratteri, valori predefiniti, formato dell’oggetto (Format / Object). I tipi di campo (type) a nostra disposizione, vanno dalle Checkboxe, radiobutton, text, editor, text area ecc.
Spiego meglio cosa serve l’opzione Format / Object, memorizza il valore del campo in una tabella del database di JOOMLA, l’esempio che stiamo sviluppando deve solamente inviare email, non deve creare nessun contenuto, quindi dobbiamo, selezionare il valore None nel campo Format / Object.

Tutti i nostri campi verranno creati con questo procedimento, cambierà soltanto il tipo di campo ed il titolo.
Per esempio, Oggetto sarà di tipo (text), Nominativo (text), Messaggio (Textarea), Codice Captcha (bisogna installare il plugins gratuito Math Captcha Field for SEBLOD, scaricare questa estensione è davvero semplicissimo, collegati al sito https://www.seblod.com/store/extensions/606 ).

campo personalizzato - joomla

Creare altri campi – email di ricezione

Questo campo è più complesso.
Vediamo insieme le voci da impostare:

  1. Title: scriviamo “Email contatti”
  2. Label:digitiamo “Email”
  3. Type:scegliamo la voce email;
  4. Send E-mail: selezioniamo Submission, questo consentirà l’invio di una email alla creazione del messaggio;
  5. Form: impostiamo Field, spunta un seconda sezione From (E-mail / Field) dove inseriamo il nome del campo che contiene il valore dell’email del mittente, nel nostro caso il nome del campo è email_contatti
  6. Particolare delle impostazione appena eseguite

  7. Form Name: selezioniamo Field, fa spuntare la sezione From (Name / Field) inseriamo il nome del campo contenente il valore del nome del mittente, nel nostro caso è il campo nominativo;
  8. Subject: inseriamo l’oggetto dell’email, “Richiesta d’informazioni”;
  9. To: destinatari dell’email, per il nostro esempio non scriviamo nulla.
  10. To (Fields): nome del campo che contiene il valore dell’email del destinatario, per il nostro esempio lasciamolo vuoto;
  11. To (Administrators): scegliamo gli amministratori del sito a cui inviare l’email.
  12. Message: scriviamo il corpo del messaggio, il testo vero e proprio della nostra email (per inserire i valori dei campi all’interno del messaggio, dobbiamo scrivere il nome del campo seguito dal cancelletto(#) es: #nome_campo#)

    Testo del messaggio

  13. Message (Field): nome del campo che costituirà il testo del messaggio, per il nostro esempio non scriviamo nulla.
  14. Poiché esistono due tipologie di messaggio, faccio un pò di chiarezza,con l’elemento Message possiamo formattare e disporre i campi a nostro piacimento, con la voce Message (Field) possiamo solamente inserire il nome del campo.

  15. Attachment: permette di allegare file all’email.
  16. CC: selezioniamo Field, spunta un seconda sezione CC (Email / Field) scriviamo “email_contatti” nome del campo che contiene l’email del mittente, in modo tale da inviare una copia dell’email a chi compila il form;

Infine selezioniamo la voce None nella sezioine Format / Object.

Campo Email

Al termine, dopo avere eseguito il salvataggio, il campo Email spunterà nell’area del nostro form.

Pannello elementi campo Email

Includere l’accettazione dell’informativa sulla privacy

Il box è formato da una casella di controllo (per rilasciare il consenso, per chi compila il modulo) e un link che rimanda alla pagina sulla Informativa della privacy.

Creiamo la casella di spunta:

  1. Title: scriviamo “Casella Privacy”
  2. Label: digitiamo il testo “Acconsento al trattamento dei miei dati personali”
  3. Type: scegliamo la voce Checkbox;
  4. Options: scriviamo il valore “Accetto le condizioni Privacy “
  5. Format / Object: selezioniamo il valore None.

Al termine non dimentichiamo di salvare le impostazioni appena eseguite.

Il nostro lavoro continua con la creazione del link al testo della privacy.

  1. Title: scriviamo “Link Articolo Privacy”
  2. Type: selezioniamo la voce Free Text;
  3. Label: digitiamo il testo “Cliccare qui, per l’informativa sulla privacy”
  4. Default Value: clicchiamo sull’editor, inseriamo il testo “Privacy Policy”, grazie alla barra dell’editor WYSIWYG del CMS, trasformiamo la frase in un link, collegandolo all’articolo privacy del sito.

    Link pagina Informativa per la tutela della privacy

  5. Format />Object: scegliamo il valore None.

Infine salviamo.

Nel nostro form ancora manca il pulsante per inviare l’email.

Creiamo un nuovo campo:

  1. type: selezioniamo submit;
  2. Label: scriviamo "Invio"

come al solito Salva e chiudi.

Rendere un campo obbligatorio

Il nostro modulo di contatto personalizzato è quasi terminato, manca solamente di definire i campi come obbligatori, in modo tale da avvertire l’utente con un messaggio di errore la mancata compilazione.
Per far ciò, selezioniamo il pulsante 3, posizionato nella colonna dei pulsanti, nel nostro ambiente di lavoro compare la colonna Required / Validation,

Rendere i campi obbligatori per la compilazione

clicchiamo sul pulsante optional relativo al campo;

  1. Required impostiamo il valore  sul si;
  2. Alert scriviamo il testo per il messaggio di errore;

Infine salviamo.
Questa procedura verrà ripetuta sui campi Oggetto, Nominativo, Email, Messaggio, Casella di spunta per la privacy.

Abbiamo finito

Ancora no, dobbiamo salvare il nostro lavoro, forse può sembrare una banalità, ma a volte il lavoro che abbiamo fatto, viene perso solo perché non si è salvato. In alto a sinistra della nostra pagina c’è il pulsante Salva.

Salvare il form contatti

Test pratico della pagina contatti dal frontend

Ultimato il nostro modulo contatti, non c’è niente di meglio che testare, dal lato frontend, il nostro esempio. Quindi come se fossimo dei comuni utenti del sito, verifichiamo cosa succede quando selezioniamo la voce Form Contatti dal menù, compiliamo il modulo e selezioniamo il pulsante invia, un messaggio dell’avvenuta spedizione dei nostri dati ci appare.
Controlliamo se è arrivata l’email, contenente il messaggio che abbiamo inviato, devono arrivare due email una all’amministratore del sito, l’altra a l’utente che ha compilato il form.

Conclusione

Bene, se sei arrivato fino alla fine di questo articolo, sono sicuro che hai trovato informazioni e consigli utili per realizzare un form di contatto, rendendo più efficiente e professionale il sito web che stai creando con Joomla 3.8, grazie al componente SEBLOD 3.10.X.
Mi piacerebbe sapere anche cosa ne pensi, ricevere domande e feedbacks in generale.
Per ogni tua curiosità sono a tua disposizione, ci possiamo trovare nel box dei commenti.

Francesco Di Giovanni


Come creare in joomla un form di contatto con seblod
5 (100%) 1 vote

Ultima modifica:

Condividilo con i tuoi amici:


Articoli correlati


27 Responses to “Come creare in joomla un form di contatto con seblod”

    ciao, ho seguito alla lettera il tuo articolo per creare un nuovo form con i seguenti campi:
    nome
    città
    upload file
    fatta la prova la mail arriva ma l’allegato no.
    puoi darmi ulteriori indicazioni?

  • Ciao bruno,
    tu hai creato un campo di tipo file nel tuo form creato con seblod e nel campo email nella sezione dell’editor message hai inserito il nome del campo file es: #nome_campo#, e non ti arriva nulla nell’email?

    Ciao Francesco, non sono riuscito ancora a risolvere.

    Ciao Francesco, volevo creare un form contatti simile a quello del componente contatti joomla di default, con la sola aggiunta di 4 carica files o immagini; trattandosi di un sito di compravendita auto usate, le foto servono molto.
    Ho scaricato seblod e ho creato lato sito i se3guenti campi
    nome
    città
    telefono
    marca
    modello
    anno
    carburante
    file o image
    file o image
    file o image
    file o image

    invio

    forse sbaglio la config; x esempio send attachment…………….? attachment field…………..?
    cosa metto?
    folder content no folder user no format object none

    grazie della tua cortesia

      • Ciao Bruno,
        send attachment e attachment field non devi mettere nulla,
        devi solamente mettere nel campo email nella sezione dell’editor message il nome del campo file
        all’interno del tag link #nome_campo# sia nel href che nel testo, in modo tale, quando arriva l’email cliccando sul link puoi vedere allegato.
        a presto :-)

            ciao Francesco, ho seguito la tua direttiva ma mi da pagina not found 404.The requested URL /ext_aruba/classic/html/images/images-valuta.jpg was not found on this server.

            Apache/2.2.3 (CentOS) Server at webmaildomini.aruba.it Port 443
            Scusa ancora x il disturbo.
            grazie.

              • Ciao Bruno,
                nell’attributo href del tag link devi mettere un percorso assoluto (nomesito.it/ #nome_campo#), cosi dovrebbe funzionare.
                a presto :-))

    Ciao Francesco, l’allegato non si apre; pero’ se nella sezione email metto send attachment (nome campo) e attachment (nome campo) mi arriva l’immagine in download.
    il link dell’allegato non mi da piu’ 404 not found ma mi da una pagina bianca.
    Grazie.

      • Ciao Bruno,
        questo allegato è una immagine?
        in quale cartella del tuo sito l’hai inserita?
        a presto

    ciao francesco, ci rinuncio grazie

  • Ciao Bruno,
    ho fatto una prova, nel mio form di esempio ho creato un campo upload file e nella sezione 1 Folder / Content ho selezionato “no” lasciando i permessi a 0755 , stessa cosa nella sezione 1 Folder / User, nel campo email non ho inserito nulla su send attachment e attachment field, ho solamente inserito nell’editor Message un link e nell’attributo href=”nome-sito.it/#campo_upload_file#”
    a presto

    Ciao Francesco, complimenti per l’ottima guida.

    L’ho seguita alla lettera però ho un problema da cui non riesco proprio a venirne a capo.
    Volevo fare un form public per richiesta informazioni aperta al pubblico però al momento della pubblicazione il messaggio è il seguente “You are not allowed to access this resource.”
    E il messaggio compare sia da Admin che da logout.
    Sapresti dirmi come risolvere? Grazie mille un saluto

      • Ciao Valerio,
        questa scritta compare, perché non ci sono le autorizzazioni.
        Per impostare le autorizzazioni nel back end di joomla, apri il tuo form, clicca sul pulsante con il simbolo della freccetta, nel box che compare selezioni il campo Permissions, si apre una finestra di dialogo, nel gruppo public all’autorizzazione di base “Crea”, devi selezionare consentita invece di ereditata, salvi per impostare le autorizzazioni.

        a presto

            Ciao Francesco, grazie mille per la risposta.
            Ora ho un altro problema, al momento dell’invio del modulo tramite il bottone submit non parte nessuna email e l’errore e il seguente:

            JCckTable: :store failed
            Incorrect table name ” SQL=INSERT INTO “ () VALUES ()
            An error has occurred.

            Da notare che, quando configuro il campo email, a differenza dello screen shoot del tuo modulo nella mia versione le opzioni del manù a tendina sono solo: Never, Always, Add, Edit ma non è presente Submit.

            Grazie dell’aiuto

              • Ciao Valerio,
                il form che hai creato, deve inviare solo email o creare anche un articolo?
                perché l’errore che mi scrivi, si verifica quando si tenta di inserire un record nella tabella di un database.
                per quanto riguarda il secondo problema, puoi selezionare always .

                a presto

    Ciao!Complimenti per questo tutorial!L’ho seguito alla lettera e infatti il form funziona, unico problema è che ricevo la mail come posta indesiderata. So che sarà una sciocchezza ma non riesco ad uscirne fuori!

      • Ciao Valeria,
        sono contento che il tutorial ti sia stato utile. Per quanto riguarda l’email nella posta indesiderata, secondo me non dipende dalla configurazione del form o del componente, ma per svariati motivi: l’email viene identificata come spam sul server del destinatario, oggetto dell’email con diciture particolari, ecc…

        a presto

    Ciao Francesco, grazie per la guida.
    Ho seguito alla lettera il tuo tutorial… ma alla fine non invia l’ email.
    Si comporta come se tutto fosse andato bene e non segnala nessun tipo di errore!!!

      • Ciao Moreno,
        Nel campo email nella sezione To (Administrators) hai selezionato il nome dell’amministratore? nella sezione Send E-mail hai impostato Submission?
        hai controllato nella tua casella di posta lo spam?

    Ciao Francesco,
    ti ringrazio per la guida che trovo estremamente chiara, naturalmente non avendo mai usato Seblod sino a poche ore fa mi ritrovo già nelle curve :)
    Sto abbozzando un form contatti che in realtà servirà all’invio di ordini clienti piuttosto incasinati con molteplici campi, in passato ho utilizzato Flexicontent per sviluppare form simili ma Seblod mi sembra interessante quindi ci provo. Il mio problema è nei permessi ACL in pratica ho tre tipologie di utenti registrati ai quali vorrei dare accesso al form ma nonostante nel campo “Accesso” abbia messo “Registered” non mi consente l’accesso neanche impostando “public” , l’unico modo per accedere al form è logarmi come “Super Admin”. Una cosa che mi lascia perplesso è il pulsante”Permessi” sempre all’interno del form in costruzione, infatti cliccandovi sopra contrariamente alle mie aspettative si apre un box dentro il quale viene visualizzata la home page del sito e non vi è modo di chiudere tale box se non con il Back del browser, E’ normale?

      • Ciao Claudio,
        per impostare l’accesso al form dal front end, devi utilizzare il campo Permessi, cliccando su questo pulsante si apre una finestra di dialogo, nel gruppo Registered all’autorizzazione di base “Crea”, devi selezionare consentita invece di ereditata, salvi per impostare le autorizzazioni, questa è la procedura da seguire, è strano che si apre l’home page, a me non succede, hai avuto problemi con installazione di seblod?

    ciao, dopo la fase degli articoli mi sto cimentando ora con la realizzazione dei profili utente. e già trovo non poche difficoltà, tanto da chiederti se mai farai un tutorial proprio sulla creazione di profili utente.
    iniziamo con il punto numero 1:
    1) nel mio sito son riuscito ad integrare bene il form standard di joomla con quello di CB in modo da dare modo di creare un profilo piu o meno dettagliato.. questo vorrei farlo anche con sedlog. pertanto vorrei sapere se vi è modo di creare campi personalizzati e come integrarli con CB?
    2) usando il form di base utenti di Sedlog ho creato un doppione e ho creato degli utenti di prova, successivamente ho anche creato una ricerca utenti.. ma proprio qui emerge il problema a differenza di quella per gli articoli, questa non trova neanche un utente, ne nuovo ne vecchio. Come si fa a configurare la ricerca utenti?
    3) nella creazione di form con CB ho inserito il plugin Autogroup che da modo di sceglire a quale gruppo l’utente si iscrive. Vorrei ricreare la cosa anche con Seblod. Ho provato con l’opzione user group ma mi appaiono sempre tutti i gruppi e non solo quelli che vorrei. io li vorrei selezionare da un menu a tendina.

    Ciao, ho un piccolo intoppo con il campo CATEGORIA.
    Vorrei che venissero visualizzate solo le categorie che voglio nel menu a tendina. so che posso impostare una categoria iniziale. ma io vorrei che venissero visualizzate solo le 3 che mi interessano.
    Posso cambiare l’accesso (in questo modo verrebbero si visualizzate le sole categorie) ma gli articoli non sarebbero accessibili se non con quel determinato livello utente.
    in sintesi voglio che tutti gli articoli e categorie restino pubbliche, ma che nel menu a tendina venissero viste solo le tre categorie che desidero e non tutte quelle pubbliche

      • Ciao james,
        Per risolvere questo problema, devi creare un campo di tipo select-dynamic, questo campo elencherà tutte le tue categorie, nel tab query seleziona free, spunterà il tab SQL Query, qui devi immettere questa stringa
        SELECT title AS text, id AS value FROM #__categories WHERE published= 1 and id not IN (1,3,4,5,7,2, 8, 9)
        i numeri che ci sono alla fine sono le categorie che non vuoi far visualizzare, il mio è solo un esempio.
        nel tab Storage l’ultimo campo devi selezionare catid,
        a presto

    Ciao Francesco e grazie per l’impegno che ci metti.
    Una domanda:
    Nella sezione Send email dove dici di selezionare Submission, com’è che nella list box mi compaiono solo queste possibilità di selezione: Never – Always – Workflow – Add – Edit…. di submission nemmeno l’ombra

      • Ciao Rodolfo,
        nella nuova versione di seblod, hanno modificato il campo email, al posto di Submission, devi utilizzare Workflow – Add.

        a presto

I commenti sono chiusi.