In questo articolo vederemo come inserire un checkbox per fare inserire un flag per l'accettazione dei termini sulla privacy, o per far accettare qualsiasi cosa voi desiderate.
Chronoforms V5 inserire nel form checkbox per accettazione termini privacy
Il nostro intento sarà quello di non far "funzionare" il pulsante "invia" se il checkbox non è flaggato. In questa guida ci avvarremo anche di JCE e del suo plug in "mediabox" per realizzare un link ed una finestra modal dove aprire l'articolo dove saranno scritti i termi/condizioni della privacy o altro.
Quindi step by step:
- Andiamo in gestione articoli e creiamo il nostro articolo sulla privacy, disabiliteremo anche alcune opzioni di visibilità come votazione, icone stampa e email, data pubblicazione e nr visite.
- Portiamoci in chronoform e apriamo il nostro form in modalità avanzata, qui aggiungeremo un checkbox prima del pulsante di invio.
- Annotatevi il nome ID del pulsate invio, il mio è "button2"
- Entrate nell'elemento checkbox andando ad editare la voce "Label", sostituite il testo con "accettazione privacy" o con tutto quello che a voi piace di più
- Adesso creiamo il link che ci farà aprire la finestra modale con il nostro testo, in gestione articoli cliccate su nuovo (naturalmente non salveremo questo articolo, esso ci servirà solamente per creare il link usando l'editor JCE).
- Scrivete una frase tipo questa: "confermo di aver letto le condizioni qui" e linkate la parola "qui" all'articolo precedentemente realizzato, quello con la privacy.
- Nella finestra di JCE scegliete l'articolo dalla lista "contenuto" cliccandoci sopra, poi portatevi nella tabs "PopUp" e scegliete "popup JCE mediabox, inserite un titolo e su icona popup cliccate su "NO" e le dimensioni del popup. Io ho inserito 500px di larghezza e 500px di altezza (attenzione, il valore da inserire è solo 500 senza "px").
- Adesso cliccate su inserisci, disabilitate l'editor e copiatene il codice tralasciando i tag paragrafo di apertura e chiusura "<p>" e </p>".
- Incollate il codice all'interno dell'elemento checkbox del vostro form alla voce "Secondary label"
Andiamo ad attivare il meccanismo per cui se non si inserisce il flag il pulsante sarà disabilitato.
- Sempre nella gestione checkbox cliccate in alto alla voce "Events"
- su "event" scegliete "check"
- su "action" scegliete "enable"
- su "Target field ID or Function name" inserite il nome ID del vostro pulsante, il mio è "button2"
Questo realizzato è il primo evento che dice che se la condizione è quella di "flaggato" (check), l'oggetto con ID "button2" sarà abilitato, andiamo a costruire il secondo evento che dirà esattamente il contrario: Se la condizione è "non flaggata" (uncheck). l'oggetto con ID "button2" sarà disabilitato.
- Premete su "add new events" ed inserite
- su "event" scegliete "uncheck"
- su "action" scegliete "disable"
- su "Target field ID or Function name" inserite il nome ID del vostro pulsante, il mio è "button2"
Salvate il tutto e testate il form cliccando su "test form". Voglio terminare il tutorial inserendo una classe sul tasto che ne renda diverso l'aspetto: Utilizzando un template che fa uso di bootstrap, andrò ad inserire questa classe "btn btn-success" nell'elemento pulsante alla voce class, andando di fatto ad aumentare l'effetto abilitato/disabilitato del pulsante.
Potete scaricare il form nella versione backup per chronoforms V5 dopo esservi registrati.
Attenzione, nel modulo non sono implementate le funzioni di invio, quindi per chi scaricherà il file e lo installerà, dovrà inserire le funzioni mancanti.
Prova il form appena realizzato con chronoforms V5
{chronoforms5}checkbox_privacy{/chronoforms5}