Riassunto AI
Hai bisogno di raccogliere date dai visitatori del sito web? Probabilmente sai già che i campi di testo standard per le date creano caos. I clienti spesso inseriscono date in formati diversi (12/25/2025 vs 25/12/2025 vs 25 dicembre 2025).
Ciò porta a errori di prenotazione, appuntamenti mancati e, infine, a clienti frustrati. Un date picker appropriato risolve questo problema fornendo un'interfaccia di calendario visiva che funziona allo stesso modo su tutti i dispositivi.
In questa guida, ti mostrerò come aggiungere moduli professionali con date picker a WordPress utilizzando il campo modulo e la funzionalità avanzata di data/ora di WPForms, oltre a qualche consiglio se desideri personalizzarlo.
Crea ora il tuo modulo con selettore di data! 🙂
Come creare un modulo WordPress con un selettore di data
Con WPForms, è semplicissimo aggiungere un campo che consenta alle persone di selezionare una data, un'ora o entrambe. Ecco una guida passo passo per creare un modulo WordPress con un selettore di data/ora:
Se preferisci istruzioni scritte per aggiungere un selettore di data WordPress ai tuoi moduli, consulta i passaggi seguenti:
- Passaggio 1: Crea un modulo WordPress con WPForms
- Passaggio 2: Aggiungi il selettore di data al tuo modulo WordPress
- Passaggio 3: Personalizzazioni avanzate del selettore di data WPForms
- Passaggio 4: Personalizzazioni avanzate del campo ora WPForms
- Passaggio 5: Configura le impostazioni del tuo modulo con selettore di data
- Passaggio 6: Configura le notifiche del tuo modulo
- Passaggio 7: Aggiungi il modulo con selettore di data WordPress al tuo sito
Passaggio 1: Crea un modulo WordPress con WPForms
La prima cosa da fare è installare e attivare il plugin WPForms. Avrai bisogno di una versione a pagamento del plugin poiché il campo Data/Ora non è disponibile nella versione gratuita.
Questo potente campo include funzionalità avanzate come restrizioni sulle date, fasce orarie e formattazione personalizzata che i plugin di base non possono eguagliare.
Per maggiori dettagli, consulta questa guida passo passo su come installare un plugin in WordPress. Una volta acquistato e installato il plugin WPForms, vai su WPForms » Aggiungi nuovo per creare un nuovo modulo.
Nella schermata di configurazione, assegna un nome al tuo modulo e seleziona il modello di modulo che desideri utilizzare. La cosa fantastica è che WPForms viene fornito con oltre 2.100 modelli di moduli WordPress.
Nel mio esempio, utilizzerò il modello Modulo di contatto semplice. Una volta selezionato, ti mostrerò anche come personalizzare questo modulo e aggiungervi il campo del selettore di data.
Passaggio 2: Aggiungi il selettore di data al tuo modulo WordPress
Puoi aggiungere campi aggiuntivi al modello di modulo selezionato utilizzando il semplice editor drag-and-drop di WPForms. Quindi procediamo e trasciniamo il campo Data/Ora sul tuo modulo, ovunque tu voglia.
Una volta che è sul tuo modulo, puoi trascinarlo su e giù per posizionarlo altrove e fare clic nuovamente sul campo per aprirne le impostazioni e personalizzarlo. Quando fai clic sul campo del modulo Data / Ora, vedrai le seguenti opzioni:
- Etichetta: Questo è il titolo del campo che i visitatori del sito vedranno sul tuo modulo.
- Formato: Scegli se desideri che questo campo includa sia la data che l'ora, solo la data o solo l'ora.
- Descrizione: Aggiungi una descrizione per il campo. Questo è un buon posto per aggiungere istruzioni o dettagli per i tuoi utenti.
- Obbligatorio: Abilita questo pulsante di attivazione per impedire agli utenti di inviare il modulo finché questo campo non è compilato.
Scorrendo verso il basso e facendo clic su Opzioni avanzate, puoi personalizzare ulteriormente il campo Selettore data/ora come mostreremo di seguito.
Passaggio 3: Personalizzazioni avanzate del selettore di data WPForms
Per impostazione predefinita, il campo selettore data in WPForms è impostato sul formato di visualizzazione calendario. Più user-friendly per la selezione delle date, specialmente sui dispositivi mobili. Ideale per:
- Richieste di ferie
- Moduli di prenotazione appuntamenti
- Registrazione eventi
- Invii con scadenze
I formati per il campo Data/Ora sono facili da modificare in WPForms. Per farlo, fai prima clic sulla scheda Avanzate sotto Opzioni campo. Quindi, puoi personalizzare le seguenti opzioni:
- Tipo: Puoi scegliere tra Selettore data (la visualizzazione calendario predefinita) o Menu a discesa data (aggiunge campi menu a discesa separati per mese, giorno e anno).
- Formato: Qui puoi selezionare diversi formati di data (m/g/a o g/m/a).
- Limita giorni: Attiva questa opzione per selezionare i giorni della settimana che gli utenti possono scegliere.
- Disabilita date passate: Con questa opzione, puoi impedire agli utenti di selezionare date passate.
Successivamente, esamineremo le opzioni di personalizzazione per la sezione Ora del campo Data/Ora in WPForms.
Passaggio 4: Personalizzazioni avanzate del campo ora WPForms
La selezione dell'ora è importante quanto la selezione della data per creare sistemi di prenotazione efficaci. WPForms fornisce un controllo granulare sulle opzioni di ora che corrispondono ai tuoi orari di apertura ed evitano conflitti di pianificazione.
Simile alle impostazioni del selettore data, puoi personalizzare le opzioni per la sezione Ora del campo Data/Ora. Per impostazione predefinita, il formato dell'ora è impostato su un orologio a 12 ore con intervalli di 30 minuti:
Come prima, puoi modificare le impostazioni per il campo Ora andando alla scheda Avanzate sotto Opzioni campo. Ecco come appaiono queste impostazioni:
- Intervallo: WPForms ti consente di scegliere tra intervalli di 15 minuti, 30 minuti e 1 ora per il campo Ora.
- Formato: Ti consente di scegliere tra un orologio a 12 ore o un orologio a 24 ore.
- Ore limite: Definisci l'intervallo di tempo che gli utenti possono selezionare.
Qualunque formato tu scelga, sappi che il campo Selettore Data/Ora è un ottimo modo per ottenere dati accurati sui tuoi moduli. La data sarà sempre convalidata e nel formato corretto all'interno del campo Selettore Data/Ora.
Vuoi che qualcuno compili il tuo modulo Selettore Data/Ora solo una volta? Se desideri sapere come limitare le voci per gli utenti, consulta questo tutorial su come limitare il numero di invii di moduli WordPress.
Una volta terminate le personalizzazioni delle impostazioni, fai clic su Salva.
Passaggio 5: Configura le impostazioni del tuo modulo con selettore di data
Le conferme dei moduli sono messaggi visualizzati alle persone una volta completato il modulo. Le conferme comunicano loro che il loro modulo è stato elaborato e ti offrono la possibilità di indicare loro quali passi devono intraprendere successivamente. WPForms ha 3 tipi di conferma tra cui scegliere:
- Messaggio: Questo è il tipo di conferma predefinito in WPForms. Quando un visitatore del sito invia il tuo modulo, apparirà un semplice messaggio che lo informerà che il suo modulo è in fase di elaborazione.
- Mostra Pagina: Questo tipo di conferma porterà le persone a una pagina web specifica sul tuo sito web ringraziandole per aver compilato il modulo Selettore Data/Ora e ti permetterà di indicare loro cosa devono fare dopo. Per assistenza, consulta il nostro tutorial su come reindirizzare i clienti a una pagina di ringraziamento.
- Vai a URL (Reindirizzamento): Questa opzione è per quando vuoi inviare le persone a una pagina specifica contenente informazioni correlate che si trovano su un sito web diverso.
Vediamo quindi come impostare una semplice conferma del modulo in WPForms in modo da poter personalizzare il messaggio che le persone vedranno quando invieranno il loro modulo Selettore Data/Ora. Per iniziare, fai clic sulla scheda Conferma nell'Editor del modulo sotto Impostazioni.
Quindi, personalizza il messaggio di conferma a tuo piacimento e fai clic su Salva. Per assistenza con altri tipi di conferma, consulta la nostra documentazione su come impostare le conferme del modulo.
Ora, impostiamo le notifiche del tuo modulo.
Passaggio 6: Configura le notifiche del tuo modulo
Vuoi che la data e l'ora in cui qualcuno compila i tuoi moduli ti vengano inviate subito via email? Impostiamo le notifiche del tuo modulo per fare proprio questo.
Le notifiche sono un ottimo modo per inviare automaticamente un'email a te stesso, ai tuoi dipendenti e alla persona che ha compilato il tuo modulo. A meno che tu non disabiliti questa funzione, ogni volta che qualcuno invia un modulo sul tuo sito, riceverai una notifica.
Se utilizzi i Tag Intelligenti, puoi anche ricevere solo la data e l'ora nella notifica del tuo modulo. Per fare ciò, aggiungi semplicemente un timestamp alla tua email di notifica utilizzando questo tag intelligente: {date format="m/d/Y"}
Ottimo lavoro! Ora sei pronto per aggiungere il tuo modulo Selettore Data/Ora al tuo sito web.
Passaggio 7: Aggiungi il modulo con selettore di data WordPress al tuo sito
WPForms ti consente di aggiungere i tuoi moduli in varie posizioni, dai post del blog, alle pagine, al footer e alla tua barra laterale.
Diamo un'occhiata all'opzione più comune: incorporare il tuo modulo in un post o in una pagina. Fai clic sul pulsante Incorpora nell'angolo in alto a destra del generatore di moduli.
Quindi, fai clic su Crea nuova pagina.
Dai un nome alla tua pagina e quindi seleziona Iniziamo.
Questo ti porterà all'editor a blocchi di WordPress per una nuova pagina con il tuo modulo già incorporato. Premi Pubblica per rendere live il tuo nuovo modulo data picker di WordPress.
Congratulazioni! Il tuo modulo con un data picker è ora pubblicato.
Ed ecco fatto! Ora sai come aggiungere un modulo WordPress con un data picker al tuo sito web.
FAQ su come creare un modulo data picker WordPress
Imparare a creare un modulo data picker WordPress è un argomento di interesse popolare tra i nostri lettori. Ecco le risposte ad alcune domande comuni al riguardo:
Come aggiungo un data picker a WPForms?
Installa WPForms Pro, quindi vai su WPForms » Aggiungi nuovo per creare un modulo. Nel generatore di moduli, trascina il campo Data/Ora dalla libreria dei campi sul tuo modulo.
Puoi personalizzare il formato della data, limitare le date passate, limitare i giorni disponibili e impostare intervalli di tempo, tutto tramite le impostazioni del campo. Nessuna codifica richiesta!
Posso creare un calendario WPForms per prenotare appuntamenti?
Sì, il campo data picker di WPForms funziona perfettamente per la prenotazione di appuntamenti. Puoi disabilitare le date passate, limitare le prenotazioni a giorni specifici della settimana, impostare fasce orarie disponibili e limitare le ore per la disponibilità degli appuntamenti.
Per sistemi di prenotazione avanzati, combina il data picker con la logica condizionale per mostrare diverse fasce orarie in base ai tipi di servizio o alla disponibilità del personale.
Come personalizzo il formato del data picker di WordPress?
In WPForms, fai clic sul tuo campo Data/Ora, quindi vai su Opzioni avanzate.
Puoi scegliere tra diversi formati di data (g/m/a, m/g/a o formati personalizzati), selezionare display orari a 12 o 24 ore e impostare intervalli di tempo da 15 minuti a 1 ora.
Il data picker si adatta automaticamente al formato scelto e convalida l'input dell'utente per prevenire errori di formattazione.
Posso disabilitare le date passate nei moduli data picker di WordPress?
Assolutamente. Nelle impostazioni del campo Data/Ora di WPForms, abilita Disabilita date passate per impedire agli utenti di selezionare date già trascorse.
Ciò è essenziale per moduli di prenotazione, registrazioni di eventi e invio di scadenze. Puoi anche utilizzare Limita giorni per limitare le selezioni a giorni specifici della settimana.
Come aggiungo fasce orarie ai moduli data picker di WordPress?
WPForms include la personalizzazione del campo ora integrata. Nelle impostazioni del campo Data/Ora, vai su Opzioni avanzate e configura l'intervallo di tempo (15, 30 o 60 minuti), imposta il formato dell'ora (12 o 24 ore) e limita le ore disponibili.
Ad esempio, puoi limitare le prenotazioni alle 9:00 - 17:00 solo nei giorni feriali. Il selettore di orario mostra automaticamente solo gli slot disponibili ai clienti.
Qual è la differenza tra Date Picker e Date Dropdown in WPForms?
Date Picker visualizza un calendario interattivo su cui gli utenti cliccano per selezionare le date. È più intuitivo e riduce gli errori.
Date Dropdown mostra menu a tendina separati per mese, giorno e anno. È più compatto ma richiede più clic.
Per la maggior parte dei moduli, il Date Picker (visualizzazione calendario) offre una migliore esperienza utente e tassi di completamento più elevati, specialmente sui dispositivi mobili.
Posso integrare il date picker di WPForms con WooCommerce?
Mentre i date picker di WPForms funzionano benissimo per raccogliere date nei moduli, per la selezione di date specifiche del prodotto nelle pagine WooCommerce, avrai bisogno di plugin dedicati per il date picker di WooCommerce.
Tuttavia, puoi usare WPForms per la raccolta di date relative a WooCommerce come moduli d'ordine personalizzati, preferenze di data di consegna o acquisti di biglietti per eventi che richiedono informazioni aggiuntive oltre alle opzioni standard del prodotto.
Successivamente, Prova i Modelli di Modulo Aziendale
Hai bisogno di determinare la durata tra le date? Scopri come calcolare il numero di giorni tra due date in WPForms. Perfetto per moduli di prenotazione affitti, tempistiche di progetto o moduli di richiesta ferie in cui devi mostrare automaticamente la durata.
Per prenotazioni complesse, considera di suddividere il tuo modulo in più passaggi. Il nostro tutorial sui moduli multi-step mostra come creare moduli di appuntamento che raccolgono prima le informazioni di contatto, poi la disponibilità, quindi i dettagli del servizio. Questo approccio aumenta i tassi di completamento del 67% per i moduli di prenotazione più lunghi.
Crea ora il tuo modulo WordPress
Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.
Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.
Ma come si fa a rendere un orario non più disponibile una volta scelto? Ho creato un modulo con date picker e più persone possono scegliere la stessa data e ora.
Ciao Sabrina,
Non abbiamo una funzione di inventario date che tenga traccia delle date già scelte e mostri quelle non scelte. Ho aggiunto il tuo voto per considerare questa richiesta di funzionalità per futuri miglioramenti.
Grazie comunque per il suggerimento! :)
Ho bisogno di questa opzione!
In nessun punto menzionate che dobbiamo pagare 49$ per utilizzare qualsiasi tipo di opzione data. Grazie per aver sprecato il tempo di tutti.
Ciao Derek – Mi scuso per l'eventuale confusione, ma è chiaramente menzionato nel primo passaggio. Ecco uno screenshot per riferimento.
Se hai altre domande, non esitare a farcelo sapere. Grazie :)
È possibile limitare la selezione delle date future?
ad es. 1. Non consentire date il giorno di Natale "5 dic
ad es. 2 La data scelta deve essere almeno 2 giorni dopo la data odierna?
Grazie
Ciao Mark – Certo, per il primo, puoi usare questi snippet di codice e personalizzarli secondo le tue esigenze.
Per il secondo, puoi usare questi snippet di codice. Cambia semplicemente il +1), con il numero di giorni (nel tuo caso, puoi usare +2) in avanti che desideri limitare il selettore.
Spero questo aiuti. Grazie 🙂
Ho aggiunto un campo per la data di arrivo e uno per la data di partenza. Il problema è che un utente può scegliere una data di arrivo futura, ma una data di partenza precedente alla data di arrivo. Esiste una logica condizionale che posso usare per limitare la data di partenza a qualsiasi data DOPO la data di arrivo?
Grazie,
Tony
Ciao Tony, è possibile ottenere questo risultato con WPForms. Puoi usare uno snippet PHP per confrontare due date all'interno dello stesso modulo per garantire che la data di partenza sia uguale o successiva alla data di arrivo. Lo snippet controllerebbe se la seconda data è minore o uguale alla prima data e, in tal caso, visualizzerebbe un messaggio di errore. Questa funzionalità può essere implementata con qualsiasi licenza WPForms.
Si prega di controllare questo tutorial con i dettagli e il codice PHP personalizzato che devi inserire nel tuo sito.
Nel caso possa essere utile, ecco il nostro tutorial con i modi più comuni per aggiungere codice personalizzato come questo.
Spero questo aiuti. Grazie 🙂
Ciao!
Come posso limitare la selezione delle date solo al 1° e al 16. di ogni mese?
Ciao,
Puoi ottenere questo risultato con un piccolo snippet di codice personalizzato. Abbiamo un esempio nella nostra documentazione per sviluppatori qui: Limita date specifiche nel selettore di date.
In quello snippet, sono consentite solo determinate date del mese. Puoi aggiornare i numeri delle date nel codice (ad esempio, cambiarli in 1 e 16) in modo che solo quelle date rimangano selezionabili. Se desideri aiuto per personalizzare lo snippet per il tuo modulo, non esitare a contattare il nostro team di supporto.