Quando ci si approccia alla stesura di un testo finalizzato al…
CF7 di WordPress: checkbox per accettazione termini e privacy
Se il tuo sito internet o blog è costruito con WordPress, probabilmente per il modulo di contatto ti avvali di uno dei più noti plug in: Contact Form 7, abbreviato in CF7.
Semplicissimo da impostare e dall’immediato utilizzo, Contact Form 7 permette anche di inserire un checkbox per l’accettazione termini e privacy, ma questo passaggio non è immediato: vediamo insieme come fare.
COME INSERIRE IN CF7 UN CHECKBOX PER L’ACCETTAZIONE TERMINI E PRIVACY
Qualora, come da buona prassi, tu decida di aggiungere al tua modulo di contatti la dichiarazione della privacy, devi far sì che l’utente ne prenda visione e accetti la policy.
Ecco la procedura step by step:
1) Installare e configurare il plug in CF7 e creare il modulo di contatto:
Installa il plug in CF7 e impostalo secondo le tue esigenze; a questo proposito ti rimando all’ottima guida presente a questo link: https://sos-wp.it/guida-completa-contact-form-7/, che spiega anche come creare il modulo di contatto.
2) Selezionare il tag di accettazione termini e privacy
Una volta installato il plug in, clicca su CF7 nella barra sinistra di WordPress ed entra nel modulo di contatto creato. Ti troverai davanti a una schermata come questa:
Il tag / bottone che ti interessa è quello chiamato “Acceptance“: cliccaci sopra e ti si aprirà una semplice finestra d’impostazioni.
3) Settare l’acceptance tag
La finestra che si visualizza non appena cliccato sul bottone “Acceptance” è la seguente:
NAME: Il Name viene dato di default; non è importante il nome del tag o il numero, per cui puoi lasciare quello generato automaticamente:
OPTION: qui hai una doppia scelta:
- Make this checkbox checked by default: puoi decidere se far sì che il checkbox per l’accettazione termini e privacy sia “checkato” (o “flaggato”) per impostazione predefinita;
- Make this work inversely: se questa opzione viene selezionata, per l’accettazione di termini e privacy all’utente viene richiesto di togliere la spunta alla casella, preventivamente flaggata.
Per ulteriori approfondimenti sull’ID ATTRIBUTE e CLASS ATTRIBUTE leggi la guida ufficiale di CF7 per l’Acceptance Checkbox, in lingua inglese: non sono infatti parametri essenziali ai fini della funzione primaria di questo tag (io ad esempio non li ho valorizzati).
Una volta selezionate le opzioni che ti interessano, clicca in basso su “Insert Tag”.
4) Impostare il tag di accettazione termini e privacy all’interno del modulo di contatto
Il tuo “acceptance tag” ora compare nella schermata “modulo” del tuo modulo di contatto: è bene farlo precedere da una frase che chiarisca all’utente a cosa si riferisce quella casella che deve flaggare (o deflaggare, nel caso abbiate scelto il funzionamento inverso) e quali sono le condizioni che deve accettare.
Nel mio caso, ho inserito una frase di questo tipo:
La frase che inserisci compare sul tuo sito appena prima del checkbox, come puoi vedere nella mia pagina “Contatti“.
5) Inserire la validazione dell’accettazione
Ma non è finita: il tag è ora inserito e correttamente funzionante, ma all’utente non viene generata alcuna frase informativa qualora egli si dimentichi o non capisca di dover mettere la spunta sulla casella.
Per far sì che all’utente venga generata una frase simile a: “Accetta i termini prima di procedere“, è necessario andare nella schermata “Additional Settings” del nostro plug in in WordPress e inserire il comando
acceptance_as_validation: on
come da schermata dimostrativa:
In questo modo l’utente che non accetta i termini per l’invio del messaggio di contatto vedrà generasi un messaggio d’errore di questo tipo:
Ora, oltre ad avere messo in chiaro l’informativa della privacy o i termini e condizioni, date anche all’utente la possibilità di accettarli o meno.
Tutto chiaro? 😉
Ti è piaciuto questo tutorial? Ne vorresti uno per il tuo blog? Contattami e spiegami le tue esigenze!
Articoli correlati
Ciao Claudia,
grazie mille per questo articolo 🙂
Ti scrivo perchè sono riuscita ad impostare tutto ma non riesco proprio a far si che la casella da flaggare ed il testo ‘Autorizzo…’ siano sulla stessa riga e non uno sotto l’altro. Sapresti aiutarmi per caso?
Grazie mille in anticipo!
Monica
Ciao Monica! Anche io ci ho provato, ma non sono ancora riuscita a trovare la soluzione… Però ti prometto che se e non appena la trovo, te la faccio avere! 🙂 Grazie ancora, ciao! Claudia
Ciao Claudia,
grazie lo stesso per la risposta, un pò mi solleva sapere che almeno non sono l’unica a cercare una soluzione a questo ‘problema’ eheh 🙂 Speriamo di risentirci presto allora!
Ciao,
Monica
Ciao, grazie per l’articolo, mi serviva.
per quanto riguarda l’allineamento io ho risolto cosi, inserendo un css personalizzato:
input.wpcf7-form-control.wpcf7-acceptance {float:left !important; width: auto !important;margin-right: 10px !important;}
ovviamente cambia il nome del form.
se vuoi allinearlo ancora meglio dai a tutto il tag (che contiene casella e testo) una classe, e imposta un line-height personalizzato al tutto.
Dove hai inserito il css?
Wow. Erano giorni che cercavo di inserire il testo e il checkbox assieme. Grazie Claudia per il tuo articolo. Sono in debito!
Ma prego! Felice di essere stata d’aiuto 🙂 Ciao
spiegazione fatta bene, forse sei l’unico, ma una cosa per far si che l’utente guardi la privacy dove devo mettere il link della pagina? questo nessuno lo spiega e non riesco a farla vedere grazie.
Ciao Dario! Non sono sicura di aver capito correttamente la domanda, comunque nel mio caso io ho inserito direttamente sul fondo della pagina dei contatti l’informativa alla privacy, quindi non ho avuto bisogno di linkare verso un’altra pagina.
Se devi rimandare a un’altra pagina potresti provar con l’apposito tag html, come indicato qui. Fammi sapere!
Ciao Claudia,
grazie per il tuo articolo! Ho seguito tutta la procedura (la prima che trovo in Italiano per Italiani). Ho impostato nelle impostazioni aggiuntive acceptance_as_validation: on ma da quel momento in poi se guardo il form nella preview della pagina dove l’ho utilizzato non mi compare il checkbox ma lo shortcode dell’accettazione, come se proprio non andasse.
Hai un’idea di cosa possa essere? Ti ringrazio!
Ciao Daniele! Dopo che hai settato l’acceptance tag (punto 3 del mio tutorial), devi cliccare in basso su “insert tag”: così facendo ti ritrovi il tag nella schermata “modulo” del tuo modulo di contatto (punto 4 del mio tutorial). Puoi assicurarti di aver effettuato correttamente questi passaggi? Grazie!
Ciao. Ma per mettere la stessa cosa nel form che si compila quando si inseriscono i commenti come si fa? Grazie
Ciao Roberto, mi dispiace ma non ho mai provato!
Grazie mille, davvero molto utile e completo!
Avevo infatti già il plugin installato e mi ci sono voluti solo 5 minuti per fare tutto!!!
A me non funziona la casella, visualizzo un enorme rettangolo per lungo, eppure ho seguito passo passo ogni step. Perchè?
mi chiedevo se fosse possibile, inserendo come ho fatto io su https://www.annoallestero.it/ 4 checkbox diversi per le singole sezioni della privacy policy da accettare (come da GDPR aggiornato), impostare il modulo in modo che 3 di essi siano obbligatoriamente da validare per il cliente, e l’ultimo punto (iscrizione newsletter) invece sia facoltativo.
come posso fare?
grazie
Grazie mille, chiaro e super utile!
Buongiorno e grazie per l’articolo. Ho seguito passo passo la guida ma noto che nonostante non venga flaggata la check il messaggio viene inviato comunque. Non c’è modo di inserire il campo come “Richiesto” ?
IN più ne approfitto per un’altra informazione. Vorrei inserire il recaptcha prima dell’invio. Nonostante abbia effettuato l’integrazione con le chiavi non mi compare tra i possibili tag da inserire .. bisogna fare altro ? Grazie
Ho avuto anche io lo stesso problema e non sono riuscito a risolverlo se non installando questo plug in ( https://it.wordpress.org/plugins/contact-form-7-recaptcha/ )
hai aggiunto ” acceptance_as_validation: on ” nelle impostazioni aggiuntive ?
Ciao Claudia,
ho un problema con l’acceptance checkbox, pur non spuntando la casella di accettazione privacy il pulsante di submit rimane valido e permette l’invio della mail.
Questo è il form:
Nome (required)
[text* your-name class:form-control]
Email (required)
[email* your-email class:form-control]
Your Message
[textarea your-message class:form-control]
[acceptance acceptance-consent]Accetto le condizioni sulla privacy[/acceptance]
[submit class:btn class:btn-primary class:pull-right “Invia”]
Ho anche inserito “acceptance_as_validation: on” negli additional settings.
La mia versione di cf7 è la 5.1.1 mentre quella di wordpress è la 5.0.3
Grazie mille