Come Creare un Modulo WordPress con un Selettore di Data (Modo Semplice)

Inserimenti di date incoerenti possono trasformare un semplice modulo WordPress in un pasticcio frustrante. Barre, trattini, nomi di mesi completi – quando gli utenti inseriscono le date come vogliono, è inevitabile ritrovarsi con un disordinato incubo di dati che richiede ore per essere ripulito.

Ecco perché aggiungere un selettore di data ai tuoi moduli è una mossa così intelligente.

Invece di lasciare la formattazione all'utente, un selettore di date offre un'interfaccia calendario pulita. Questo mantiene i tuoi dati uniformi ed è molto più facile per gli utenti mobili da toccare rispetto a digitare manualmente una data.

In questa guida, condivideremo il modo più semplice per creare un modulo WordPress con un selettore di data. Che tu stia creando moduli di prenotazione, registrazioni di eventi o pianificatori di appuntamenti, questo piccolo miglioramento può aiutare sia te che i visitatori del tuo sito. 🙌

Perché Creare un Modulo WordPress con un Selettore di Data?

In breve, un selettore di date rende l'inserimento delle date più facile per gli utenti e più affidabile per te.

Dopo aver gestito migliaia di moduli online in WordPress, abbiamo notato che i campi modulo relativi alle date sono spesso dove le cose vanno storte. Infatti, i formati di data errati sono tra i motivi principali per cui le sottomissioni dei moduli falliscono o causano confusione.

Un campo selettore di data risolve queste frustrazioni comuni e migliora la tua esperienza utente. L'abbiamo visto funzionare efficacemente per:

Caso d'uso	Esempio
Moduli di registrazione	Lascia che gli utenti selezionino la loro data di nascita invece di digitarla.
Moduli d'ordine	Scegli una data di consegna (e ora, se necessario).
Moduli di noleggio	Scegli una data di ritiro o riconsegna per un articolo a noleggio.
Moduli di richiesta di richiamata	Lascia che gli utenti scelgano quando desiderano essere contattati.
Moduli di richiesta ferie	Inserisci le date di inizio e fine per il congedo.
Moduli di appuntamento / prenotazione	Seleziona una data per la prenotazione di un servizio o di un alloggio.

La parte migliore è che un selettore di date garantisce la coerenza in tutte le sottomissioni. Non dovrai più chiederti se 03/04/2026 significa 4 marzo o 3 aprile, un grattacapo che abbiamo riscontrato troppo spesso con l'inserimento manuale dei dati.

Ora ti mostreremo come creare facilmente un modulo WordPress con un selettore di date. Ecco i passaggi che tratteremo, e puoi usare i collegamenti rapidi qui sotto per navigare tra di essi:

Iniziamo.

Passaggio 1: Installa il plugin WPForms

Nel corso degli anni abbiamo testato decine di plugin per moduli e date picker, incluse opzioni popolari come Ninja Forms e Gravity Forms.

Ma per aggiungere selettori di date, abbiamo trovato WPForms la soluzione più user-friendly, specialmente per i principianti che vogliono creare moduli dall'aspetto professionale senza toccare alcun codice.

Oltre a un selettore di date, WPForms offre funzionalità premium come la logica condizionale per mostrare o nascondere campi in base alle selezioni dell'utente. Oppure, puoi utilizzare calcolatrici intelligenti per gestire automaticamente le stime dei prezzi.

Su WPBeginner, utilizziamo effettivamente WPForms per creare la maggior parte dei nostri moduli e non possiamo raccomandarlo abbastanza. Puoi leggere la nostra recensione completa di WPForms per maggiori dettagli.

Inizia visitando il sito web di WPForms e creando un account. Fai semplicemente clic sul pulsante 'Ottieni WPForms Ora', scegli il piano che fa per te e completa il processo di registrazione.

Una volta effettuata la registrazione, puoi accedere alla dashboard del tuo account WPForms. È lì che troverai il file zip del tuo plugin e la tua chiave di licenza. Puoi lasciare aperta quella pagina per ora o salvare quei dettagli in un luogo sicuro, come in un gestore di password.

Successivamente, vai alla tua dashboard di WordPress e seleziona Plugin » Aggiungi Nuovo Plugin.

Utilizza la barra di ricerca in quella pagina per cercare rapidamente WPForms.

Quando lo vedi nei risultati, fai clic su 'Installa ora', quindi fai clic su 'Attiva' una volta terminata l'installazione.

Per istruzioni dettagliate, potresti voler consultare la nostra guida passo passo su come installare un plugin WordPress.

Dopo aver installato il plugin, dovrai attivare la tua chiave di licenza.

In WPForms » Impostazioni, puoi procedere e incollare la tua chiave di licenza nel campo corrispondente. Quindi, fai clic sul pulsante 'Verifica chiave'.

Passaggio 2: Scegli un modello di modulo

Dopo l'attivazione, vai alla pagina WPForms » Aggiungi Nuovo dalla tua bacheca di WordPress.

Questo ti porterà alla pagina ‘Seleziona un modello’.

Prima di scegliere un modello, è una buona idea dare un nome al tuo modulo WordPress in modo da poterlo identificare facilmente in seguito.

Successivamente, sceglierai come costruire il tuo modulo: utilizzando WPForms AI, un modello predefinito o da zero.

Se desideri utilizzare il generatore di moduli AI, tutto ciò che devi fare è scrivere un semplice prompt. L'AI genererà quindi il modulo per te all'istante.

Per questo esempio, utilizzeremo il modello Modulo di contatto semplice e aggiungeremo il campo selettore data. Ma sentiti libero di scegliere un modello che ti si addice meglio.

Scorrendo la pagina di configurazione, vedrai oltre 2.000 modelli di moduli predefiniti disponibili qui. Puoi usare la barra di ricerca per restringere la scelta.

Una volta fatta la tua scelta, fai semplicemente clic sul pulsante ‘Usa modello’.

Passaggio 3: Aggiungi il campo Selettore Date al tuo modulo WordPress

Ora arriverai al costruttore di moduli WPForms. Noterai le opzioni dei campi nella colonna di sinistra e un'anteprima del modulo sul lato destro dello schermo.

Per impostazione predefinita, il modello Modulo di contatto semplice ha solo i campi nome, indirizzo email e commenti aggiunti al modulo.

A scopo dimostrativo, ti mostreremo come aggiungere un campo data al tuo modulo WordPress. Ma se il tuo modello lo ha già, puoi saltare alla parte di modifica di questo passaggio.

Scorri verso il basso fino alla sezione Campi avanzati nel pannello di sinistra per trovare il campo 'Data / Ora'.

Trascina e rilascia semplicemente quel campo dove lo desideri sul tuo modulo. In questo tutorial, lo abbiamo posizionato appena sotto il campo Email.

Una volta fatto ciò, fai clic sul campo 'Data/Ora' per modificarlo. Questo aprirà la scheda 'Opzioni campo' sul lato sinistro del tuo schermo.

Da qui, puoi cambiare l'etichetta del campo, che per impostazione predefinita è 'Data / Ora'. Useremo 'Ora preferita per la chiamata telefonica' per il nostro campo.

Puoi anche cambiare il formato della data del campo usando il menu a discesa Formato. Le opzioni sono Data e Ora, Solo Data o Solo Ora. Questo può essere utile se vuoi raccogliere le date di nascita degli utenti senza un campo orario.

Oltre a ciò, puoi compilare il testo della descrizione per fornire maggiore contesto su ciò che l'utente deve inserire nel campo.

Infine, puoi selezionare la casella 'Richiesto' se desideri rendere questo un campo obbligatorio. Ciò significa che l'utente dovrà selezionare una data e un'ora prima di poter inviare il modulo.

Una volta fatto ciò, fai clic sul pulsante 'Salva' in alto per memorizzare le impostazioni del tuo modulo.

Passaggio 4: Configura le impostazioni del Selettore Data e Ora

Per impostazione predefinita, il campo del selettore di intervallo di date sul tuo modulo WordPress sarà un calendario con un menu a discesa dell'ora accanto.

La data corrente sarà selezionata,

Quando un utente fa clic sul campo, appare un calendario con la data corrente selezionata nel formato mese/giorno/anno. Possono quindi cambiarla per scegliere una data diversa.

Nel frattempo, il menu a discesa dell'ora predefinito è un orologio a 12 ore con intervalli di 30 minuti.

Gli utenti possono quindi scegliere una fascia oraria che funziona meglio per loro.

In alcuni casi, potresti voler modificare le impostazioni del selettore di date. Ad esempio, forse il tuo paese segue il formato giorno/mese/anno o l'orario formati data e ora piuttosto che quelli predefiniti.

Per fare ciò, dovrai passare alla scheda 'Avanzate' nella parte superiore del pannello laterale sinistro.

Qui puoi regolare la dimensione del campo del selettore di date. Quindi, nella sezione Data, puoi cambiare l'intervallo di date da un calendario a un menu a discesa di date.

Passare dal selettore di date a calendario a un menu a discesa di date è una buona idea se il modulo ha spazio limitato e il calendario sembra piuttosto piccolo.

Ecco come appare il menu a discesa della data:

Sotto, puoi cambiare il formato per adattarlo alla tua regione. Ad esempio, puoi passare dal formato USA (mm/gg/aaaa) al formato Internazionale (gg/mm/aaaa).

Se scegli il selettore di date a calendario, puoi anche inserire testo segnaposto nel campo 'Data'. Puoi riempirlo con il tuo formato di data per far sapere agli utenti quale formato stai utilizzando, in modo che non si confondano.

Inoltre, puoi attivare l'interruttore 'Limita giorni' per restringere i giorni disponibili. Questo è perfetto se vuoi impedire prenotazioni nei fine settimana o in festività specifiche.

Consigliamo vivamente di selezionare la casella 'Disabilita date passate' per i moduli di appuntamento. Questo impedisce agli utenti di prenotare accidentalmente (o intenzionalmente) uno slot nel passato, mantenendo il tuo programma privo di errori.

Inoltre, puoi disabilitare la data odierna se non consenti prenotazioni nello stesso giorno.

Successivamente, spostiamoci nella sezione 'Ora' per modificare il selettore dell'ora.

Qui puoi cambiare l'intervallo a 15 minuti o 1 ora invece di 30 minuti. È anche utile inserire testo segnaposto qui per mostrare quale formato di ora stai utilizzando.

Il selettore dell'ora utilizza per impostazione predefinita un orologio a 12 ore, ma puoi passare a un orologio a 24 ore se preferisci.

Inoltre, sentiti libero di attivare l'impostazione 'Limita ore' per specificare gli orari di inizio e fine dei tuoi servizi. In questo modo, gli utenti non potranno fissare appuntamenti al di fuori dei tuoi orari di apertura.

Oltre a ciò, puoi inserire un nome per la classe CSS per il campo intervallo di date. Questa è una funzionalità avanzata e opzionale, ma puoi usarla per sovrascrivere lo stile del modulo tramite codice in seguito.

Ultimo ma non meno importante, puoi nascondere l'etichetta e/o la sottolabel del campo del modulo, se necessario.

Una volta soddisfatto del tuo nuovo modulo, puoi salvarlo facendo clic sul pulsante 'Salva' nell'angolo in alto a destra dello schermo.

Passaggio 5: Incorpora il modulo WordPress sul tuo sito web

Ora sei pronto per aggiungere il tuo nuovo modulo con il selettore di date al tuo sito WordPress. Per fare ciò, fai semplicemente clic sul pulsante 'Incorpora' nella parte superiore del generatore di moduli.

Apparirà un popup che ti chiederà di selezionare una pagina esistente a cui aggiungere il modulo o di creare una nuova pagina per il modulo da zero. Entrambe le opzioni utilizzano l'editor a blocchi, quindi i passaggi sono piuttosto simili.

Aggiungi il blocco WPForms a una pagina esistente o nuova

Per inserire il modulo in una pagina esistente, fai clic sul pulsante 'Seleziona pagina esistente'. Successivamente, seleziona una delle pagine che hai già sul tuo blog WordPress o sito web e fai clic su 'Andiamo!'

Se desideri aggiungere il modulo a una nuova pagina, fai semplicemente clic sul pulsante 'Crea nuova pagina'.

Quindi, dai un nome alla tua nuova pagina e fai clic su 'Andiamo!'

Entrambi questi metodi ti porteranno all'editor a blocchi, dove vedrai alcune istruzioni su come aggiungere il blocco WPForms.

Per prima cosa, fai clic sul pulsante '+' per aggiungere un blocco.

Quindi, digita ‘WPForms’ nella barra di ricerca dei blocchi.

Trascina semplicemente il blocco e rilascialo dove preferisci nella pagina.

Tutto quello che devi fare ora è fare clic sul menu a discesa.

Quindi, seleziona il modulo che hai appena creato.

Nella barra laterale delle impostazioni del blocco, puoi personalizzare i campi, le etichette e gli stili dei pulsanti del modulo per farli apparire più belli con il tuo tema WordPress.

Puoi cambiare le dimensioni, il raggio del bordo e i colori di ciascun elemento.

Ora puoi fare clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ per rendere il modulo attivo sul tuo sito web.

Dovrebbe apparire più o meno così sul tuo sito WordPress:

Se desideri inserire il modulo widget in un post anziché in una pagina, puoi creare un nuovo post o aprirne uno esistente nell'editor a blocchi.

Dopodiché, segui gli stessi passaggi per aggiungere il blocco WPForms a una pagina, come in questo metodo.

Aggiungi il blocco WPForms a un'area pronta per i widget

Se utilizzi un tema WordPress classico, potresti voler visualizzare il tuo modulo in un'area dell'intestazione, del piè di pagina o della barra laterale pronta per i widget. Questa potrebbe essere una buona idea se il tuo modulo è piuttosto corto e non occupa troppo spazio.

Per fare ciò, vai su Aspetto » Widget dall'area di amministrazione di WordPress. Quindi, naviga nell'area desiderata pronta per i widget e fai clic sul pulsante bianco ‘+’ per aggiungere un blocco al suo interno. Dopodiché, puoi cercare il blocco WPForms.

Se vedi due opzioni, puoi scegliere una delle due poiché entrambe fanno la stessa cosa.

Come nel metodo precedente, seleziona semplicemente il modulo che hai appena creato. Nella barra laterale delle impostazioni del blocco, puoi configurare il design in modo che si adatti meglio al tuo tema WordPress.

Una volta soddisfatto delle modifiche, fai clic sul pulsante ‘Aggiorna’.

Ecco fatto!

Ecco come appare il nostro modulo in fondo a un post del blog di WordPress:

Incorpora il tuo modulo WordPress con uno shortcode

Se il blocco o il widget WPForms non funziona, puoi anche aggiungere il tuo modulo WordPress utilizzando uno shortcode.

Nel popup ‘Incorpora in una pagina’, fai semplicemente clic sul link ‘usa uno shortcode’. Vedrai quindi uno shortcode che puoi copiare e incollare in una pagina, un post o un'area pronta per i widget.

Per maggiori informazioni su come utilizzare gli shortcode, leggi il nostro articolo su come aggiungere uno shortcode in WordPress.

🎁 Passaggio Bonus: Abilita i promemoria per gli appuntamenti

Se stai utilizzando il tuo modulo per programmare appuntamenti o prenotazioni, l'aggiunta di promemoria automatici può fare una grande differenza.

Collegare il tuo modulo al tuo servizio di email marketing ti consente di inviare promemoria per gli appuntamenti, aiutando a ridurre le mancate presentazioni e a mantenere le cose organizzate.

Rassicura inoltre gli utenti che la loro richiesta è andata a buon fine e il loro posto è confermato.

Per configurare questo, puoi seguire la nostra guida passo passo su come inviare email di conferma ai tuoi submitter del modulo. Con pochi clic, puoi assicurarti che gli utenti ricevano un promemoria tempestivo sulla data o sull'ora selezionata. ⏰

FAQ: Come creare un modulo WordPress con un selettore di date

Stai pensando di aggiungere un selettore di date ai tuoi moduli WordPress? Ecco alcune domande comuni per aiutarti a iniziare.

Cos'è un selettore di date nei moduli WordPress?

Un selettore di date consente agli utenti di selezionare una data da un calendario. Aiuta a garantire che le date siano formattate in modo coerente e riduce gli errori di immissione.

Qual è la differenza tra un selettore di date e un selettore di orari?

Il selettore di date consente agli utenti di scegliere una data da un calendario (come il 14 gennaio 2026). Il selettore di orari consente agli utenti di scegliere un orario (come le 15:30).

Come aggiungo un selettore di orari in WordPress?

Se stai utilizzando un costruttore di moduli come WPForms, trascina semplicemente il campo ‘Data / Ora’ nel tuo modulo. Quindi scegli l'opzione ‘Ora’ nelle impostazioni.

Come mostro la data sul mio sito WordPress?

Puoi visualizzare le date utilizzando un widget, uno shortcode o uno snippet di codice PHP personalizzato.

WPCode è uno dei migliori plugin per snippet di codice per WordPress. Rende l'aggiunta di codice personalizzato, incluso quello per mostrare la data odierna, al tuo sito web super sicura e facile.

Come inserisco un selettore di data usando HTML?

In HTML puro, puoi usare: <input type="date">. Ma in WordPress, è più facile usare un plugin per moduli per una migliore compatibilità e controllo.

Suggerimenti definitivi per ottimizzare il tuo modulo WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come creare un modulo WordPress con un selettore di date.

Ora che sai come aggiungere un selettore di date nei moduli di WordPress, vediamo i migliori suggerimenti per portare i tuoi moduli al livello successivo:

• Accetta pagamenti online nei tuoi moduli – WPForms supporta gateway di pagamento popolari come Stripe, PayPal, Square e Authorize.net. Puoi riscuotere pagamenti una tantum o ricorrenti e non ci sono costi di transazione aggiuntivi.
• Rendi i tuoi moduli più lunghi conversazionali – Se hai un modulo di registrazione eventi o utenti che necessita di raccogliere molte informazioni, renderlo conversazionale può aumentare il tasso di completamento del modulo.
• Prevenire lo spam dei moduli di contatto – Puoi abilitare la protezione anti-spam integrata di WPForms e la casella di controllo reCAPTCHA per filtrare le voci di modulo spam.
• Crea moduli multilingue – Raggiungi un pubblico diversificato e aumenta l'accessibilità del tuo sito web con moduli che vengono visualizzati in più lingue.
• Migliori pratiche per la progettazione di pagine di moduli di contatto – Questa guida ti accompagnerà nella progettazione del miglior modulo WordPress per convertire i visitatori abituali in lead o clienti.
• Suggerimenti per la creazione di moduli più interattivi – Il co-fondatore di WPForms, Jared Atchison, ti fornisce indicazioni su come rendere i moduli più coinvolgenti, dall'uso della logica condizionale all'aggiunta di contenuti multimediali.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.