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 data offre loro un'interfaccia calendario pulita, rendendo ogni inserimento uniforme e facile da gestire.

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?

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 uno dei motivi principali per cui vediamo le sottomissioni dei moduli fallire o creare confusione.

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

• Moduli di registrazione che chiedono agli utenti di inserire la loro data di nascita.
• Moduli d'ordine per scegliere una data e un'ora di consegna per un ordine.
• Moduli di noleggio per selezionare una data di ritiro o riconsegna per un articolo a noleggio.
• Moduli di richiesta di richiamata per consentire agli utenti di farti sapere quando desiderano essere contattati riguardo ai tuoi prodotti o servizi.
• Moduli di richiesta ferie per consentire ai dipendenti di inserire le date di inizio e fine del loro congedo.
• Moduli di appuntamento o prenotazione per siti web di alloggi o servizi.

La parte migliore? Un selettore di date garantisce la coerenza in tutte le presentazioni. Non dovrai più interrogarti se 03/04/2024 significhi il 4 marzo o il 3 aprile, un mal di testa che abbiamo riscontrato troppo spesso con l'inserimento manuale dei dati.

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

• Passaggio 1: Installa il plugin WPForms
• Passaggio 2: Scegli un modello di modulo
• Passaggio 3: Aggiungi il campo Selettore Date al tuo modulo WordPress
• Passaggio 4: Configura le impostazioni del Selettore Data e Ora
• Passaggio 5: Incorpora il modulo WordPress sul tuo sito web
• 🎁 Passaggio Bonus: Abilita i promemoria per gli appuntamenti
• FAQ: Come creare un modulo WordPress con un selettore di date
• Suggerimenti definitivi per ottimizzare il tuo modulo WordPress

Iniziamo.

Passaggio 1: Installa il plugin WPForms

Abbiamo testato dozzine di plugin per moduli e selettori di date nel corso degli anni, comprese 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 e 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.

Innanzitutto, devi installare WPForms sul tuo sito web. Per istruzioni dettagliate, potresti voler consultare la nostra guida passo passo su come installare un plugin WordPress.

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.

Quello che devi fare è scorrere verso il basso fino alla sezione Campi avanzati nella colonna di sinistra, dove vedrai 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 tendina Formato dropdown. Le opzioni sono Data e Ora, Data o Solo Ora. Questo può essere utile se desideri utilizzare solo una data senza un campo orario per raccogliere le date di nascita degli utenti.

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, ma l'utente può cambiarla per scegliere una data diversa. Il formato della data è mese/giorno/anno.

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 delle date:

Sotto questo, puoi cambiare il formato della data da mese/giorno/anno (1/31/2024) a giorno/mese/anno (31/1/2024) o Mese Giorno, Anno (31 gennaio 2024).

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 abilitare l'interruttore 'Limita giorni' per regolare l'intervallo di date che può essere selezionato. Questo sarà utile se gestisci i tuoi servizi solo nei giorni feriali.

Sentiti libero di disabilitare anche le date passate per impedire la selezione di date precedenti.

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 crearne una nuova 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 e rilascia semplicemente il blocco 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 impostare 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 l'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.

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

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 deve 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 visualizzati in più lingue.
• Segui il nostro elenco di migliori pratiche per il design dei moduli di contatto – Questa guida ti accompagnerà nella progettazione del miglior modulo di WordPress per convertire i visitatori regolari in lead o clienti.
• Leggi la nostra guida esperta su come creare moduli interattivi – Jared Atchison, co-fondatore di WPForms, ti darà consigli su come rendere i moduli più coinvolgenti, dall'uso della logica condizionale all'aggiunta di contenuti multimediali.

Speriamo che questo articolo ti abbia aiutato a imparare come creare un modulo WordPress con un selettore di data. Potresti anche voler consultare il nostro articolo su come creare un modulo multipagina in WordPress e il nostro elenco definitivo dei migliori plugin per sondaggi WordPress.

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