Impostare un Modulo di Contatto con Ninja Forms

Il pannello per la realizzazione di un form è semplice e intuitivo.

In cima troviamo 4 voci di menu.

1. La prima permette di stabilire i tipi di campi che appariranno sul form.
2. La seconda gestisce le azioni che dovrà compiere questo modulo come i messaggi di risposta automatici.
3. In configurazione avanzata troviamo tutte le impostazioni di visualizzazione, il parametro per gestire i calcoli e le limitazioni, ma tutto questo lo vedremo successivamente.
4. Poi c’è il tasto per visionare un’anteprima del modulo e quello per la pubblicazione.

Di fianco a quest’ultimo troverai l’icona per recuperare lo storico delle tue azioni sul form.

Ogni modifica infatti sarà registrata e potrai eventualmente recuperarla durante la lavorazione.

Partiamo con la costruzione del nostro modulo.

I campi di default che troviamo sono quelli classici per un form molto semplice: nome, email, messaggio e tasto di invio.

Andando sull’icona dell’ingranaggio puoi eliminarlo, duplicarlo e modifciarne i parametri.

La tipologia di blocco che hai inserito, viene indicata con un’icona sul lato del blocco stesso, in modo da poter avere una visuale immediata di cosa stai modificando.

Per aggiungere un nuovo elemento c’è il tasto + nell’angolo della pagina.

Sono divisi in 5 gruppi:

Nei campi comuni troviamo quelli maggiormente utilizzati per la realizzazione di un form, come il campo di testo singolo, il tasto per l’invio, quello per le caselle di controllo e i checkox, data, messaggio e così via.

I campi di informazione utente sono quelli predisposti per ricevere le informazioni personali come nome, comgnome, indirizzo ecc...

Ninja form consente anche di gestire informazioni per un ipotetico catalogo di prodotti e quindi troviamo nei campi prezzi tutto quello che ci occorre per far fare dei calcoli matematici a ninja forms.

Ad esempio può essere utile per prenotare con un ordine una serie di prodotti senza acquistarli fisicamente.

I campi di layout sono solo due, il primo consente di integrare del codice html all’interno del modulo, il secondo inserire un semplice divisore che può essere utile per delimitare le sezioni in caso ci siano form molto lunghi.

L’ultimo gruppo di elementi offre opzioni aggiuntive come la valutazione a stelline, o i filtri antispam.

Andando avanti con le lezioni analizzeremo i campi principali singolarmente, in modo da poterti offrire una panoramica completa di tutte le funzionalità a disposizione.

Per inserire un nuovo elemento, ti basterà cliccarci sopra.

Ogni volta che si clicca su un elemento da integrare, verrà inserito a cascata sotto tutti gli altri già presenti, ma come puoi vedere, spostarli per definire l’ordine che ti è più congeniale è molto semplice, basterà cliccarci sopra e trascinarlo nella posizione desiderata.

Cliccando sull’ingranaggio si aprono tutte le impostazioni relative a quella tipologia di elemento.

Apriamo il campo nome, ad esempio.

In cima ad ogni cosa c’è il testo che apparirà sull’etichetta.

Puoi decidere dove posizionarla sopra sotto, a destra o a sinistra.

Poi puoi determinare se il campo deve essere o meno obbligatorio.

Nel caso volessi aggiungere delle limitazioni puoi stabilire un numero massimo di parole o caratteri disponibili e impostare il testo che apparirà di fianco al contatore.

Nelle due impostazioni sotto puoi decidere se bloccare l’immissione di dati e il completamento automatico del browser.

Ancora più sotto troviamo la maschera di immissione ossia il tipo di valore che deve avere un campo.

Per maggiori informazioni clicca sempre sull’iconcina che di darà una mano a capire come impostare i parametri.

Il campo label identifica la dicitura della voce da compilare, in questo caso: nome.

La label position indica dove vogliamo far comparire la dicitura rispetto al fomr: sinista, destra, sopra sotto o all’interno.

Il placeholder serve, se ce ne fosse bisogno, per aggiungere una descrizione all’interno del campo che dovrà compliare l’utente.

Per questa tipologia di blocco ci sono altre 3 finestre di impostazione:

1. Le restriction settings servono per determinare la caratteristica del campo: è una email? è un campo obbligatorio? deve avere un formato particolare? ci deve essere un massimo di parole o caratteri presenti?
2. La calculation settings ci perrmette di aggiungere il contenuto del campo ad un ipotetico totale che vogliamo far calcolare all’utente.
3. Infine troviamo un’ultima voce con alcune impostazioni avanzate come, ad esempio quelle per generale un calendario per selezionare in automatico una data.

Nella tab visualizzazione puoi inserire delle classi css personalizzate e trovi due box con l’editor per aggiungere dei testi descrittivi, immagini, link e quant’altro.

Compilando il primo si aggiunge un ulteriore testo sotto al blocco.

Compilando il secondo si aggiunge un tooltip con informazioni aggiuntive leggibili con l’icona della i.

In configurazione avanzata puoi stabilire il segnalosto del campo o un valore predefinito.

Volendo puoi utilizzare anche i merge tags come vedremo successivamente.

Il campo di amministrazione serve agli sviluppatori che vogliono interagire manualmente, quindi direi che possiamo procedere oltre.

Proviamo ora a costruire un form inserendo gli elementi principali che ci mette a disposizione ninja forms, in modo da darti una panoramica generale di tutto quello che potrai inserire.

Ecco come appare il nostro form di default inserito nella pagina di esempio del tema.

Come per contact form 7, una delle prime cose che viene in mente di inserire è il checkbox per l’accettazione della privacy.

Troviamo quello che ci occorre tra i campi comuni, si chiama casella di controllo singola.

Imposto che il campo sia obbligatorio e che di default sia già spuntato.

Il campo data, fa apparire la semplice selezione a calendario.

I campi scegli, multiselezione, elenco caselle di controllo e elenco pulsanti di scelta permettono di selezionare in maniera differente una serie di voci.

Facciamo una prova mettendoli tutti uno in fila sotto l’altro così capirai subito la differenza.

Aggiorniamo la pagina ed eccoli tutti.

Scegli non è altro che il classico menu a tendina, poi abbiamo i checkbox e i radio button che si comportano come su contact form 7 e il box per la multiselezione.

Impostiamone uno da zero e vediamo che tipo di opzioni possiamo decidere.

Scegliamo l’elenco caselle di controllo (come vedi trovi già tre etichette di default inserite).

Puoi dare il nome all’etichetta e un valore. Il campo valore è quello che verrà riportato nelle email che riceverai come amministratore.

Volendo puoi anche impostare un valore anche per un calcolo matematico che puoi far compiere al form, ma questo lo vedremo in una lezione successiva.

Vediamo come fare.

Supponiamo ad esempio di voler creare un semplicissimo campo che genera un valore in base al numero dei prodotti selezionati.

Inserisco un campo Elenco pulsanti di scelta, aggiungo 3 etichette di prodotti generici e diamo un valora al campo calcolo. Metto 120, 20 e 30 tanto per avere un’indicazione.

Sotto, aggiungo un campo numero, un campo molto semplice per cui puoi stabilire un valore minimo, un valore massimo.

Ora dobbiamo procedere facendo eseguire il calcolo al plugin.

Vado quindi in configurazione avanzata e scelgo Calcoli.

La prima cosa da fare è dare un nome alla variabile di questa operazione, noi mettiamo semplicemente calcolo.

Poi, per creare la tua operazione puoi importare i merge tags del form cliccando su questa icona e seleziona le due variabili inserite.

A questo punto scegli come devono interagire le due variabili, puoi usare tutti i simboli matematici + - * /.

Nel nostro esempio facciamo una moltiplicazione utilizzando l’asterisco.

In questo modo, la prima variabile viene moltiplicata alla seconda, molto semplice, posso cliccare su fatto.

Ora, per completare il tutto e rendere visibile l’operazione in tempo reale sul modulo online devo aggiungere il codice del calcolo appena creato.

Torno quindi sul form e aqggiungo il campo html.

Qui mi basterà inserire un testo, ad esempio “totale” e cercare lo shortcode della nostra equazione cliccando sempre sull’icona per inserire i tag.

In basso troviamo quella denominata calculations.

Mi basterà cliccarci sopra e verrà aggiunta al testo.

Facciamo subito una prova aggiornando il nostro form online.

Come vedi selezionando diversi prodotti e variandone le quantità si aggiornerà anche il totale qui sotto.

Nel nostro esempio abbiamo eseguito un’operazione semplicissima, ma come puoi intuire, puoi utilizzare tutti i tag che inserirai anche per realizzare form dai calcoli molto articolati.

Ma con Ninja forms troviamo anche una sezione dedicata ai campi dei prezzi, per fare quindi calcoli diciamo “economici” in caso tu abbia dei prodotti da vendere o far prenotare.

Nel caso tu voglia richiedere direttamente del denaro dal tuo form, dovrai acquistare un’estensione per i gateway di pagamento.

Facciamo un esempio: inserisco 3 tab per ogni prodotto, e assegno un nome e il prezzo.

In basso posso scegliere se utilizzare direttamente nel campo il contatore numerico della quantità, ma volendo si può anche utilizzare il modulo apposito.

Poi volendo posso aggiungere un box per gestire le spedizioni in caso ne avessi bisogno, diamolgi un prezzo di 5 euro.

A questo punto basterà inserire il modulo del totale e penserà a tutto ninja forms.

Aggiornando la pagina possiamo vederne il funzionamento.

Una raccomandazione: i campi in cui puoi inserire un calcolo come nell’espemio appena visto non vanno mischiati con i campi che stiamo per vedere.

Andiamo avanti analizzando gli altri campi di ninja forms.

Quelli sul calcolo prezzi li vedremo come detto in una lezione successiva e in questa stessa. lezione ci servirà anche il campo html.

Nei campi vari troviamo il campo nascondi che serve per inviare un valore predefinito o una variabile che però l’utente non potrà vedere ne modificare.

Poi troviamo due campi utili per prevenire lo spam.

Il primo è simile a quello visto epr contact form 7. si inserisce una semplice domanda nel campo e la risposta relativa.

Come per contact form 7 ti servirà registrarti sul sito ufficiale e inserire le tue chiavi nella casella impostazioni, dalla quale potrai anche controllare se la grafica deve avere fondo chiaro o scuro.

L’ultimo campo che si può inserire è quello per richiedere una valutaxzione a stelline di ciò che desideri, può essere il servizio, un prodotto e così via.

Nella prossima lezione vedremo come impostare la mail per ricevere i tuoi moduli di contatto.