Il questa lezione personalizzeremo maggiormente il modulo di contatto e faremo una panoramica su tutti i campi di inserimento che abbiamo a disposizione.
Il primo è sicuramente uno dei più utilizzati. è il classico campo di testo ad 1 riga.
Aprendone le opzioni possiamo stabilire:
- Sse il campo deve essere obbligatorio.
- Se vuoi che il tuo campo abbia un valore predefinito.
- Se vuoi utilizzarlo come segna posto
Troviamo poi un campo per abilitare il controllo sullo spam da parte del plugin akismet.
Lo stesso campo lo ritroverai anche negli elementi url e della mail.
Abilitandolo, prima di inviare il modulo, il campo viene analizzato dal plugin e, in caso di possibile spam saranno richeste ulteriori verifiche.
Infine, ci sono due campi sempre facoltativi per stabilire un id e una classe css.
Sotto appare lo shortcode generato e un annuncio che indica che lo shortcode dovrà essere riportato anche nella scheda mail.
Per ora non occupiamoci di questo aspetto perché lo vedremo nella lezione successiva.
Il secondo tag è quello dedicato alle mail. Normalmente, in un modulo di contatto, se ne inserisce uno solo quindi va benissimo quello che abbiamo trovato già inserito.
Poi abbiamo il campo della URL, per richiedere ad esempio il link della pagina web del visitatore.
Supponiamo di volerlo inserire.
Per prima cosa, per allinearlo agli altri, copio il codice html di un blocco e lo incollo subito dopo.
Metto il testo che voglio che appaia sul form, ed elimino lo shortcode.
Poi clicco su URL e sono pronto per personalizzarlo.
Come vedi è un campo molto semplice, gli assengo il nome sito e non mi serve che sia obbligatorio.
Ecco lo shortcode generato, posso cliccare su Insert.
Ti faccio notare come, in caso di campi obbligatori, la differenza tra i due shortcode consiste solo nell’asterisco, quindi, nel caso volessi rendere anche questo campo obbligatorio, non ti servirà crearne uno nuovo, ma ti basterà aggiungere un asterisco come sui precedenti.
Con un po' di pratica conoscerai tutte le opzioni principali senza problemi.
Abbiamo poi un campo telefono molto simile ai precedenti e un campo numero.
Per questo tag ci sono più opzioni disponibili.
La prima riguarda il tipo di campo, può apparire con piccoli tastini per aumentare o diminurie il valore, sia con uno slider orizzontale, provali entrambi per vedere il diverso effetto.
Come vedi puoi impostare un intervallo numerico in base al valore minimo o al valore massimo che ti serve.
Abbiamo poi un campo data, anch’esso dotato di intervallo, che permette di selezionare un giorno utilizzando il classico calendario che siamo abituati a vedere ad esempio sui siti degli hotel o sui sistemi di prenotazione dei biglietti.
Poi abbiamo la classica area di testo, che già troviamo impostata nel modulo di default e che non ha grossi parametri da impostare.
Il menu a discesa invece potrebbe tornare utile nel caso volessi fornire all’utente dei campi già impostati da selezionare.
Supponiamo di voler impostare un form per richiedere informazioni sui pacchetti promozionali di Webipedia.
Creo la riga come ho fatto precedentemente.
Scrivo un testo per la label del form (ad esempio Su che prodotto desideri ricevere informazioni?), elimino lo shortcode e apro il tag menu a discesa.
Il plugin indica che dobbiamo inserire un’opzione ogni riga.
Metto WordPress 360, SEO, e Guadagnare online.
Poi ci sono altre opzioni, come permettere la selezione multipla o di inserire un campo vuoto come prima opzione.
Io scelgo di abilitare solo quest’ultima e aggiungo lo shortcode.
Proviamo ad aggiornare di nuovo la pagina ed ecco il nostro modulo implementato.
Il tag successivo è riservato ai checkbox e, più o meno, fa la stessa funzione del precedente.
Inserisci un elemento per ogni riga, il testo che inserisci puoi riportarlo in automatico a fianco al tasto, puoi lasciare libera la selezione o fare in modo che possa esserne attivo uno solo.
I pulsanti di opzione sono simili al precedente, ma consentono solo la selezione unica.
L’accettazione l’abbiamo vista in una lezione precedente, quindi non ci soffermeremo.
Poi c’è un tasto quiz, utile per evitare lo spam.
Si tratta di porre una semplice domanda all’utente.
Il computer non può “leggere” quello che stiamo chiedendo e quindi, i sistemi automatici non potrebbero procedere con l’invio.
Come vedi infatti, questo campo non può essere facoltativo.
Una domanda tipica può essere chiedere il risultato di una semplice somma: quanto fa 3+1?
Come da istruzioni separo domanda e risposta dal trattino verticale e aggiungo la risposta.
Solo scrivendo corrttamente la risposta, il modulo sarà inviato.
Un altro sistema per proteggersi dallo Spam è quello del recaptcha di google.
Per poterlo abilitare però è necessario innanzitutto possedere un account su Google.
Se non nei hai ancora uno è il momento di farlo, ti sarà utile anche per molti altri strumenti fondamentali per il tuo sito web, come Analytics e Search Console.
Una volta che avrai registrato il tuo account dovrai configurare le chiave API per il tuo sito.
Clicca sul link ufficiale che trovi nel menu integrazione e sarai indirizzato sulla pagina di Google poi sul tasto in alto a destra.
Inserisci un’etichetta per dare un nome al tuo progetto ... scegli la versione classica e scrivi il nome dei domini per cui vuoi abilitarlo, spunta i termini di servizio e clicca su registrazione.
Ti verranno fornite le chiavi API da inserire nel menu integrazione.
Ci mancano due tag da analizzare per chiudere questa panoramica.
File è il tag che consente all’utente di allegare un file ad una mail.
Vediamo le sue opzioni:
Puoi limitare il numero di bites concessi, (supponiamo di voler limitare il peso a 2 mega), nel campo possiamo scrivere o il valore in byte 2000000 oppure più comobamente in kilobyte o megabite.
Poi puoi limitare la tipologia di file da caricare, ad esempio solo pdf o pdf e jpg; per separarli va sempre usato il trattino verticale.
L’ultimo tag non ha bisongo di spegazioni, perchè è già inserito, si tratta dei tasto di invio.
Se vuoi modificare l’etichetta basta che sostituisci il testo.
Nella prossima lezione vedremo come impostare le mail.
Ciao, se attivo reCAPTCHA no riesco ad inviare una richiesta dal modulo contatti. Mi da un errore. Se lo disattivo invece il modulo contatti funziona.
Dove sbaglio?
Grazie!
Ciao,
“mi da un errore” è un po’ generico, dovresti gentilmente darmi più dettagli.
Grazie
Ciao, scusa..
sto facendomi il sito e provando il modulo di contatti con reCAPTCHA attivo non parte la mail e mi scrive “errore di invio. per favore riprova”
Se lo disattivo parte la richiesta dal modulo di contatto senza problemi.
Non so con precisione cosa potrebbe essere, ma solitamente nella maggior parte dei casi è un problema con le API di Google.
Hai provato a verificare di averle inserite correttamente e che nel tuo account Google sia tutto ok. 95 su 100 è li il problema.
Ciao, stavo seguendo il corso e nel mentre stavo applicando quanto detto al sito ma mi è sorto un dubbio: come è possibile rendere più piccola una casella (come nel caso di una data) e addirittura mettere nella stessa riga più campi (ad esempio data, nome, cognome, ecc.)?
Contact Form 7 ti permette di utlizzare l’html e css.
Ti consiglio di guardare se il tuo tema ha già delle classi come col-6 o simili, così non devi tu scrivere css.
Un esempio:
<div class=”col span_6″><label>Name [text* profile_name] </label></div>
<div class=”col span_6 col_last”><label>Surname [text* profile_surname] </label></div>
Buona sera,
Ho eseguito tutta la procedura per il RECAPTCHA (ero già registrato in Google) ed ho inserito i due codici nel pannello “integrazioni”. Salvato, OK
PERO’ sul modulo di contatto non vedo apparire in alto negli shortcode il simboòo o il testo per inserire il codice nel modulo. Gli ultimi 4 shortcode sono: accettazione,quiz,file,invia.
Verificando il modulo di contatto, come appare agli utenti, si vede, in fondo al modulo nell’angolo a destra , il simbolo di reCAPTCHA che appare spostandosi di qualche centimetro verso sinistra e poi rientra.
Non succede quello che invece è descritto nel corso.
Devo fare qualcosa d’altro?
Il sito è consilvio.it voce di menu “contatti”
Grazie,
Dino
Ci sono diversi tipi di ReCaptcha. Quello che hai installato tu è l’ultimo uscito dove Google capisce da solo se l’utente è un umnao o un robot.
salve
mi chiamo massimiliano e vi ringrazio per la guida che fornite
ho una domanda :
1) ho seguito la procedura che indicate dei tag, ma quando testo l efficacia del format nello specifico l allegato, l allegato stesso benche venga caricato come file pdf, jpg, pbg exel, non arriva al destinatario….come risolvere ?
grazie
Ciao Massimo,
nella tab Email hai inserito nel campo File Attachment il tag?
Altrimenti non lo allega all’email.
Buona giornata
ho eseguito la procedura della configurazione del captcha…tutto bene. ma al momento di inserirlo in una pagina, dove lo trovo lo short code? dal plugin Contact form 7 è sparito il modulo recaptcha…nel tutorial il tutor va troppo di fretta e non ha spiegato come inserire questo importante strumento. Per favore mi potete aiutare? grazie
Ciao Laura,
In realtà con la nuova versione di reCaptcha non serve più inserire alcuno shortcode.
Come spiegato anche in fondo alla guida di Contact Form 7 infatti, anche aggiungendo
[recaptcha]sarebbe ignorato.Una volta fatta la configurazione e che avuto conferma da Google che è andato tutto bene, dovresti vedere in basso a destra della tua pagina il quadratino che indica che il sito è protetto.
Buona giornata
Salve,
il campo di inserimento reCAPTCHA non mi compare.
Visitando la pagina https://contactform7.com/recaptcha/ sembra proprio che sia normale. Quindi dovrei procedere direttamente alla registrazione con un account gmail e procedere normalmente anche senza pulsante di inserimento.
Giusto?
Grazie e buona giornata.
Ciao Raffy,
se vuoi utilizzare il reCaptcha devi registrarti con Google e seguire le istruzioni della pagina di cui hai messo il link. È un servizio di Google e non del plugin Contact Form 7.
Detto questo quando dici “procedere senza pulsante d’inserimento” non capisco bene cosa intendi.
Puoi fare un form anche senza il reCaptcha, non è obbligatorio. E lo shortcode per generare il pulsante del form è [submit “Invia”].
Buona giornata
Ciao è due giorni che sto impazzendo ho fatto un modulo di contato tutto ok, ho messo il box per la privacy con codice tutto ok ma sul modulo il riquadro dove devo flegare non appare sto impazzendo riesci a darmi un mano ?
ti allego il link al modulo.
Grazie Gianluca
Ciao Gianluca,
intanto devi inserire il modulo accettazione prima del tasto di invio modulo.
In secondo luogo puoi provare ad inserirlo mantenendo i tag label di apertura e chiusura come per gli altri campi.
Prova anche a non flaggare l’opzione Make this checkbox optional, in modo che sia obbligatorio.
Buona giornata
Ciao Gianluca,
Ho fatto tutto quello che mi hai consigliato ma non cambia nulla !?
Ciao Gianluca
in questi casi, prova a creare un nuovo form e inseriscilo in una pagina di test.
Usa solo i campi minimi che trovi di default per ogni nuovo form e inserisci il checkbox accettazione prima del tasto di invio.
In questo modo dovrebbe sicuramente funzionare e potrai implementarlo con gli altri campi che ti occorrono.
Buona giornata
Ciao Lorenzo,
ho risolto sono riuscito a fare quello che volevo grazie mille per l’assistenza.
Complimenti per i cosi sono fantastici.
Ciao
Ah ok, ti avevo risposto dandoti una soluzione.
Leggila comunque che magari ti può essere comunque d’aiuto.
Grazie per i complimenti! Ricorda che se vuoi puoi lasciarci una recensione. Si trovano nellapagina di vendita del signolo video corso (colonna in basso a destra).
Buona giornata
Ciao Lorenzo ho trovato un’esempio che rende cosa voglio fare ti metto il link
il riferimento e ai bambini: xxxxxxx
Ciao Gianluca,
ho capito. Da quello che vedo c’è una soluzione un po’ macchinosa, ma dovrebbe funzionare.
Non è un sistema dinamico, ovvero dove l’utente inserisce un numero e si creano i corrispettivi campi, ma ho visto che nel esempio c’è un limite e va da 1 a 5.
Praticamente fai un menu a tendina con appunto la scelta fra 1 e 5.
Poi fai 5 gruppi condizionali.
Nel primo gruppo metti un solo campo.
Nel secondo ne metti due, nel terzo tre e via dicendo.
Certo non è il massimo dell’eleganza in termini tecnici, però dovrebbe fare il suo lavoro.
Fammi sapere,
buona giornata
Ciao Lorenzo, grazie per ho risolto in parte in quanto se ho un bambino mi si apre una casella che mi fa mettere l’eta ma se ho due bambini ho bisogno che si aprano due caselle non capisco come fare.
li ho messo il link così forse mi capisci meglio.
Ciao Gianluca
Ciao Gianluca,
mi sembra di capire che hai bisogno di un sistema di creazione dinamico di campi. Se è così allora questo plugin non lo fa.
Se però mi spieghi l’esigenza del progetto, magari, prima di passare ad un programmatore freelance, ti posso dare una mano per trovare una via alternativa che soddisfi la tua richiesta.
Fammi sapere
buona giornata
Buon giorno, vorrei creare un modulo dove se inserisco un numero me ne apre un’altro.
Esempio modulo per hotel quanti bambini asseconda del numero dei bambini si apre un’altro modulo dove posso mettere l’età.
Spero di essere stato chiaro
Grazie Gianluca
Ciao Gianluca,
non ho ben capito che cosa vuoi fare e perché, ma di seguito ti spiego come creare campi che sono nascosti / mostrati a seconda di una selezione dell’utente.
Devi installare un aduno di Contact Form 7, chiamato Conditional Fields for Contact Form 7.
Una volta installato questo plugin vedrai, nella pagina di creazione modulo, un nuovo bottone Conditional Fields Group. Ma procediamo con ordine.
Crea un campo di selezione Menu a discesa con risposte A, B, C.
A seconda di quello che seleziona l’utente mostrerai un gruppo di ulteriori domande.
Sotto al menu a discesa premi quindi Conditional Field Group, assegnagli un nome e vedrai che si forma il tag [group nome-gruppo].
Dentro a questo blocco inserisci i campi che vuoi mostrare se l’utente ha selezionato A.
Quando la struttura dei campi è pronta, vai nella tab Conditional field e genera le logiche, come “Se il campo selezionato è A allora mostra il gruppo xxx”.
Guarda le immagini qui sotto che mostrano un esempio che ti ho preparato, dove nella prima domanda chiediamo all’utente il suo hobby e, a seconda della risposta, gli poniamo domande relative al suo hobby.
Infine aggiungo che puoi anche fare gruppi all’interno di altri gruppi per logiche condizionali più complesse.
Buona giornata
Buongiorno, ho bisogno in un unico form di dare la possibilità all’utente di scegliere a chi mandare la mail con un menù a tendina:
AMMINISTRAZIONE
UFFICIO VENDITE
UFFICIO ACQUISTI
Come posso fare?
Ciao Marino,
per esigenze di questo tipo non bastano i plugin “base”.
Trovi queste funzionalità nelle versioni a pagamento di plugin come Ninja Forms o WP Forms.
Buona giornata
Buongiorno, volevo sapere come azionare il download di un pdf dopo la compilazione del form contatti
Ciao Melida,
dopo che l’utente ha compilato il modulo lo devi mandare ad una nuova pagina dove lo ringrazierai e gli inserirai il link per fargli scaricare il pdf.
Se stai usando Contact Form 7, allora ci sono più plugin che integrano questa funzione.
Per esempio Contact Form 7 redirection.
Se invece stai usando il modulo di contatto del tuo tema, allora dipende se c’è questa funzione.
Cercalo fra tutte le voci disponibili nel modulo dei contatti. Come vedrai nella lezione dedicata ad Enfold, questa possibilità è presente.
Buona giornata
Ciao, ho messo in una pagina il modulo di contatto di divi con i campi nome, email, oggetto, messaggio e alla fine ho messo la checkbox per accettare la privacy, nelle impostazioni della checkbox nel campo titolo volevo scrivere “Accetto i termini dell’informativa sulla privacy” e mettere il link alla pagina della privacy, ho provato ad inserire il codice ma non funziona. Quando salvo il modulo il codice che ho inserito sparisce, spero di essermi spiegato bene.
Ciao Ettore,
purtroppo non è possibile inserire un collegamento all’interno del campo perché, come puoi verificare inserendo una semplice scritta senza link, il campo cliccabile per l’accettazione comprende anche tutto il testo inserito (e non solo il checkbox).
Non è quindi possibile inserire un altro link tramite codice, perché crea conflitto con il precedente.
Se vuoi avere la possibilità di lavorare meglio con l’html puoi provare ad usare Contact form 7, anche se dal punto di vista grafico è decisamente meglio il modulo di Divi.
Buona giornata
Ciao Gianluca,
ti ringrazio per la risposta….
Unica cosa io non trovo in divi la possibilità di inserire la checkbox per l’accettazione della privacy….quello che mi indichi tu è inserire una riga e renderla obbligatoria.
Attendo tue
Grazie
Ciao Giorgio,
Se hai installato Divi senza inserire le tue chiavi API per gli aggiornamenti automatici, è probabile che tu non li veda, perché è una funzione che è stata aggiunta da poco.
Prova ad aggiornare il tema manualmente e vedrai che troverai diverse nuove funzioni, non solo questa legata al modulo di contatto.
Buona giornata
Ciao Ragazzi,
se uso il modulo di contatto con Divi, dove posso inserire il tasto della privacy che mi consente di inviare l’email????
grazie
Ciao Giorgio,
nel modulo di contatto di Divi basta che inserisci un nuovo campo in fondo alla lista di quelli che hai già impostato.
Nella sezione Opzioni Campo trovi un menu a tendina per specificarne il tipo. Scegli Checkbox e rendilo obbligatorio.
Buona giornata
Ciao,
Io non uso CF7, ma Bloom. Spero sia opportuno scrivere il mio problema, che magari potrebbero riscontrare anche altri che usano Divi come tema.
Non riesco a capire come implementare la privacy policy nel footer del form di contatto e successivamente come rendere l’accettazione della policy obbligatoria.
L’unica cosa che il plugin sembra permettermi di fare è scrivere un testo normale.
L’impressione che ho io è che sembra non si possa fare altro…cosa che mi sembrerebbe molto improbabile.
Ne sapete qualcosa?
Grazie,
Ania
Ciao Ania,
Bloom, CF7, NinjaForms sono plugin e non centra il tema che stai utilizzando, in questo caso DIVI.
Ovvero puoi utilizzare DIVI con CF7 o Bloom con un altro tema.
Inoltre Bloom è un plugin per ottenere iscritti alla newsletter, gli altri due per creare dei moduli di contatto.
Detto questo, il modulo di contatto di DIVI non ha il checkbox per l’accettazione della privacy pertanto dovremmo arrangiarci con altri plugin.
Contact Form 7 fa questo e lo spieghiamo in questa lezione.
Come è fatto un modulo di contatto
Anche NinjaForms da questa possibilità, ed ecco la lezione di riferimento: impostare un modulo di contatto.
Per quanto riguarda Bloom non c’è la possibilità di inserire il checkbox, ma ricorda che devi fare il “double optin”. Ovvero in Mailchimp, o nell’applicazione che stai usando per gestire le tua newsletter, devi scegliere questo procedimento. In questo modo l’utente dovrà confermare la volontà di essere iscritto e tu sei a posto.
Buona giornata
Ciao Lorenzo, grazie per l’esaustiva spiegazione.
Per quello che riguarda la doppia conferma all’iscrizione, non sapevo che facendo così non ero più obbligata ad includere l’accettazione della privacy. Comunque ho già provveduto ad averla e sembra che una cosa l’abbia risolta.
Una domanda che quindi mi nasce spontanea invece è questa. Dato che non ho con il format di contatto di Divi il checkbox per l’accettazione della privacy, devo per forza appoggiarmi ad un plugin (sono quindi obbligata a farlo) o non è obbligatorio?
A questo punto, se devo appoggiarmi ad un plugin, mi conviene sempre avere anche Bloom o posso risolvere tutte le esigenze con uno solo?
Grazie,
Ania
Ciao Ania,
da quello che leggo vedo che non ti è chiara la situazione.
Bloom serve per raccogliere le email da inserire in una tua mailing list.
Plugin come CF/ o NinjaForms sono per la creazione di moduli di contatto (Esempio: nome, congnome, società, lavoro, P.IVA, messaggio, ecc…).
Sono due strumenti distinti e vanno utilizzati distintamente per gli scopi per cui sono stati creati.
Quindi se devi raccogliere delle email per la tua newsletter da inserire in Mailchimp, SI utilizza Bloom, NO non utilizzare CF7 o NinjaForm.
Se devi avere un modulo di contatto, per esempio nella pagina contatti, con il checkbox delle privacy, SI utilizza CF7 o NinjaForm, NO non utilizzare Bloom.
Per quanto riguarda il double optin, quindi mailinglist + Bloom, quello che si chiede all’utente è l’email e al massimo il nome.
Se vuoi essere sicura a livello legale, allora non possiamo darti noi un consiglio, ma appunto chiedi al tuo legale in funzione della tua attività e consulta il sito del garante delle privacy:
Linee guida in materia di attività promozionale e contrasto allo spam
Un’idea che ti posso dare è quella di inserire all’interno dell’email di conferma la classica dicitura “Iscrivendoti a questa lista accetti….” e metti un link alla tua pagina policy.
Buona giornata
Grazie, tutto chiaro.