Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come creare un modulo WordPress con un selezionatore di date (in modo semplice)

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

Volete creare un modulo WordPress con un selezionatore di date?

Un campo di selezione della data è un modo comodo per acquisire informazioni relative alla data nei vostri moduli WordPress. Ad esempio, potreste aver bisogno di conoscere la data di nascita dei vostri utenti, oppure volete che possano facilmente fissare un appuntamento per i vostri servizi attraverso i vostri moduli.

In questo articolo vi mostreremo come creare facilmente un modulo WordPress con un selezionatore di date.

How to Create a WordPress Form With a Date Picker

Perché creare un modulo WordPress con un selezionatore di date?

Un campo di selezione della data in un modulo di WordPress è utile quando si desidera che gli utenti inseriscano delle date. Esempi comuni sono:

  • Moduli di registrazione che chiedono agli utenti di inserire la data di nascita.
  • Moduli d’ordine per scegliere la data e l’ora di consegna di un ordine.
  • Moduli di noleggio per selezionare una data di ritiro o di riconsegna di un articolo a noleggio.
  • Moduli di richiesta di richiamo per consentire agli utenti di comunicarvi quando desiderano essere contattati per i vostri prodotti o servizi.
  • Moduli di richiesta di congedo per consentire ai dipendenti di inserire le date di inizio e fine delle ferie.
  • Moduli per appuntamenti o prenotazioni per siti web di alloggi o servizi.

Un campo di inserimento della data è un modo molto più semplice per gli utenti di inserire le date rispetto a digitarle manualmente. Assicura che il formato della data rimanga coerente in tutti i moduli inviati, riducendo gli errori e migliorando l’esperienza dell’utente.

Detto questo, vediamo come creare facilmente un modulo WordPress con un selezionatore di date. Potete utilizzare questi collegamenti rapidi per navigare in questo articolo:

Passo 1: Installare il plugin WPForms e scegliere un modello

Il primo passo è installare WPForms. Si tratta del miglior plugin per moduli di contatto per WordPress sul mercato, che rende super facile la creazione di tutti i tipi di moduli sul vostro sito WordPress, compresi i moduli con campi di selezione della data.

Per istruzioni dettagliate, potete consultare la nostra guida passo-passo su come installare un plugin di WordPress.

Nota: per questa guida, è necessario utilizzare una versione premium di WPForms, in quanto è lì che è disponibile il campo di selezione della data. Detto questo, se utilizzate il nostro coupon WPForms, potete ottenere uno sconto del 50% sul prezzo normale.

Per maggiori dettagli, potete consultare la nostra recensione completa di WPForms.

Dopo l’attivazione, andate alla pagina WPForms ” Aggiungi nuovo dalla vostra dashboard di WordPress.

Clicking Add New in WPForms inside the WordPress admin panel

In questo modo si accede alla pagina “Seleziona un modello”.

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

Naming a new form in WPForms

Scorrendo verso il basso, si possono trovare numerosi modelli di moduli già pronti, molti dei quali contengono già il campo di selezione della data.

A titolo di esempio, utilizzeremo il modello Simple Contact Form e vi aggiungeremo il campo di selezione della data. Ma sentitevi liberi di scegliere il modello che più vi aggrada.

Una volta effettuata la scelta, è sufficiente fare clic sul pulsante “Usa modello”.

Clicking the Use Template button in WPForms

Passo 2: Aggiungere un campo di selezione della data al modulo WordPress

Ora si arriva al costruttore di moduli di WPForms. Noterete le opzioni di campo nella colonna di sinistra e l’anteprima del modulo sul lato destro dello schermo.

Per impostazione predefinita, il modello di modulo di contatto semplice contiene solo i campi nome, indirizzo e-mail e commenti.

A scopo dimostrativo, vi mostreremo come aggiungere il campo di selezione della data al vostro modulo WordPress. Ma se il vostro modello lo contiene già, potete passare alla parte di modifica di questo passaggio.

È necessario scorrere verso il basso fino alla sezione Campi fantasia nella colonna di sinistra, dove si trova il campo “Data/ora”.

È sufficiente trascinare e rilasciare il campo nel punto desiderato del modulo. In questa esercitazione, lo abbiamo posizionato proprio sotto il campo Email.

Dragging and dropping the Date Time field to the form builder in WPForms

Una volta fatto ciò, fare clic sul campo “Data/ora” per modificarlo. Si aprirà la scheda “Opzioni campo” sul lato sinistro dello schermo.

Da qui è possibile modificare l’etichetta del campo, che per impostazione predefinita è “Data/ora”. Per il nostro campo utilizzeremo “Ora preferita per la telefonata”.

È inoltre possibile modificare il formato della data del campo utilizzando il menu a discesa Formato. Le opzioni sono Data e ora, Data o Solo ora. Questo può essere utile se si vuole usare solo una data senza un campo orario per raccogliere le date di nascita degli utenti.

A parte questo, è possibile compilare il testo della descrizione per fornire un contesto più ampio su ciò che l’utente deve inserire nel campo.

Infine, è possibile selezionare la casella ‘Richiesto’ se si desidera rendere questo campo obbligatorio. Ciò significa che l’utente dovrà selezionare una data e un’ora prima di poter inviare il modulo.

Una volta fatto ciò, basta fare clic sul pulsante “Salva” in alto per memorizzare le impostazioni del modulo.

Configuring the General settings of a form in WPForms

Suggerimento: se gestite un sito di alloggi e volete che gli utenti inseriscano date specifiche per il loro soggiorno, potete utilizzare il modello Modulo di prenotazione alberghiera. Esso include due campi di selezione della data: uno per la data di arrivo e l’altro per la data di partenza.

Passo 3: Configurare le opzioni avanzate per il selezionatore di data e ora

Per impostazione predefinita, il campo di selezione della data sul vostro modulo WordPress sarà un calendario con un menu a tendina dell’ora accanto.

Viene selezionata la data corrente, ma l’utente può modificarla per scegliere una data diversa. Il formato della data è mese/giorno/anno.

The default Date Time picker calendar in WPForms

Nel frattempo, il menu a tendina dell’ora è impostato su un orologio a 12 ore con intervalli di 30 minuti.

Gli utenti possono quindi scegliere la fascia oraria più adatta a loro.

The default time dropdown picker in WPForms

In alcuni casi, è possibile modificare le impostazioni del selezionatore di data. Ad esempio, è possibile che il proprio Paese segua i formati di data e ora giorno/mese/anno o 24 ore piuttosto che quelli predefiniti.

Per farlo, è necessario passare alla scheda “Avanzate” nella parte superiore del pannello di sinistra.

Qui è possibile regolare le dimensioni del campo di selezione della data. Poi, nella sezione Data, è possibile cambiare il selezionatore di date da un calendario a un menu a discesa.

Choosing the Date Dropdown type in WPForms

La sostituzione del selezionatore di date con un menu a discesa è una buona idea se il modulo ha uno spazio limitato e il calendario appare piuttosto piccolo.

Ecco come appare il menu a discesa della data:

An example of WPForms' date dropdown menu

In basso, è possibile modificare 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 si sceglie il selezionatore di date del calendario, è possibile inserire un testo segnaposto nel campo ‘Data’. Si può inserire il formato della data per far sapere agli utenti quale formato si sta utilizzando, in modo che non si confondano.

Configuring the date picker's advanced settings in WPForms

Inoltre, è possibile attivare l’interruttore “Limita giorni” per regolare l’intervallo di date selezionabili. Questo è utile se i servizi vengono eseguiti solo nei giorni feriali.

È possibile anche disattivare le date passate per evitare che vengano selezionate le date precedenti.

The Limit Days and Disable Past Dates settings for the Date Time field in WPForms

Passiamo quindi alla sezione “Ora” per modificare il selezionatore dell’ora.

Qui è possibile modificare l’intervallo in 15 minuti o 1 ora invece di 30 minuti. È anche utile inserire qui un testo segnaposto per indicare il formato dell’ora che si sta utilizzando.

Per impostazione predefinita, il selezionatore dell’ora è un orologio a 12 ore, ma è possibile passare a un orologio a 24 ore se si preferisce.

Inoltre, non esitate ad attivare l’impostazione ‘Limita orari’ per specificare gli orari di inizio e fine dei vostri servizi. In questo modo, gli utenti non potranno fissare un appuntamento al di fuori del vostro orario di lavoro.

Oltre a questo, è possibile inserire un nome di classe CSS per il campo di selezione della data. Si tratta di una funzione avanzata e opzionale, ma si può usare per sovrascrivere lo stile del modulo usando il codice in un secondo momento.

Infine, se necessario, è possibile nascondere l’etichetta e/o la sottoetichetta del campo del modulo.

Una volta che si è soddisfatti del proprio modulo, è possibile salvarlo facendo clic sul pulsante “Salva” nell’angolo in alto a destra dello schermo.

Configuring the advanced settings of the time picker field in WPForms

Passo 4: incorporare il modulo di WordPress nel vostro sito web

Ora siete pronti ad aggiungere il vostro nuovo modulo con il selezionatore di date al vostro sito web WordPress. Per farlo, basta fare clic sul pulsante “Incorpora” nella parte superiore del costruttore di moduli.

Apparirà un popup che chiede 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 di blocchi, quindi i passaggi sono abbastanza simili.

The Embed popup in WPForms

Aggiungere il blocco WPForms a una pagina esistente o nuova

Per inserire il modulo in una pagina esistente, fare clic sul pulsante “Seleziona pagina esistente”. Successivamente, selezionate una delle pagine già presenti sul vostro blog o sito web WordPress e fate clic su “Andiamo!”.

Choosing an existing page to add a WPForms form to

Se si desidera aggiungere il modulo a una nuova pagina, è sufficiente fare clic sul pulsante “Crea nuova pagina”.

Quindi, date un nome alla vostra nuova pagina e fate clic su “Let’s Go!”.

Creating a new page to insert the WPForms form into

Entrambi i metodi portano all’editor dei blocchi, dove si troveranno alcune istruzioni su come aggiungere il blocco WPForms.

Per prima cosa, fare clic sul pulsante “+” per aggiungere un blocco.

Clicking the add block button in the block editor to insert the WPForms block

Quindi, digitate “WPForms” nella barra di ricerca del blocco.

È sufficiente trascinare e rilasciare il blocco nel punto migliore della pagina.

Searching for the WPForms block in the block editor

A questo punto è sufficiente fare clic sul menu a discesa.

Quindi, selezionare il modulo appena creato.

Select a WPForms form to insert in the block editor

Nella barra laterale delle impostazioni del blocco, è possibile personalizzare gli stili dei campi, delle etichette e dei pulsanti del modulo per renderli più gradevoli con il proprio tema WordPress.

È possibile modificare le dimensioni, il raggio del bordo e i colori di ciascun elemento.

The WPForms block settings sidebar in the block editor

Ora è possibile fare clic sul pulsante “Aggiorna” o “Pubblica” per rendere il modulo attivo sul sito web.

Sul vostro sito web WordPress dovrebbe avere un aspetto simile a questo:

An example of a contact form with a date picker made with WPForms

Se si desidera inserire il modulo in un post piuttosto che in una pagina, è possibile creare un nuovo post o aprirne uno esistente nell’editor dei blocchi.

Dopodiché, basta seguire gli stessi passi per aggiungere il blocco WPForms a una pagina, come in questo metodo.

Aggiungere il blocco WPForms a un’area pronta per i widget

Se utilizzate un tema classico di WordPress, potreste voler visualizzare il modulo in un’area dell’intestazione, del piè di pagina o della barra laterale predisposta per i widget. Questa può essere una buona idea se il modulo è piuttosto breve e non occupa troppo spazio.

Nota: se si utilizza un tema a blocchi, questo metodo non funzionerà per il sito web.

Per farlo, basta andare su Aspetto “ Widget dall’area di amministrazione di WordPress. Quindi, navigare nell’area pronta per il widget desiderato e fare clic sul pulsante bianco ‘+’ per aggiungere un blocco al suo interno. Successivamente, è possibile cercare il blocco WPForms.

Se vengono visualizzate due opzioni, è possibile sceglierne una o l’altra, poiché entrambe svolgono la stessa funzione.

Adding the WPForms block in a widget-ready area

Come nel metodo precedente, basta selezionare il modulo appena creato. Nella barra laterale delle impostazioni del blocco, è possibile configurare il design in modo che si adatti meglio al tema di WordPress.

Una volta soddisfatti delle modifiche, è sufficiente fare clic sul pulsante “Aggiorna”.

The WPForms widget settings sidebar

Ecco fatto!

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

An example of a WPForms form widget with a date picker field

Incorporate il vostro modulo WordPress con uno shortcode

Se il blocco o il widget WPForms non funzionano, potete aggiungere il vostro modulo WordPress utilizzando uno shortcode.

Nel popup “Incorpora in una pagina”, è sufficiente fare clic sul link “Usa un codice breve”. Verrà visualizzato un codice breve che è possibile copiare e incollare in una pagina, in un post o in un’area pronta per i widget.

Clicking the use a shortcode link in the WPForms embed popup

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

Suggerimenti per ottimizzare il vostro modulo WordPress

Ora che sapete come creare un modulo WordPress con un selezionatore di date, vediamo i migliori consigli per portare i vostri moduli al livello successivo:

  • Inviate e-mail di conferma a chi ha inviato il modulo : in questo modo gli utenti riceveranno una notifica di avvenuta ricezione dell’iscrizione e non dimenticheranno la data o l’ora che hanno scelto.
  • Accettate pagamenti online nei vostri moduliWPForms supporta i più diffusi gateway di pagamento come Stripe, PayPal, Square e Authorize.net. È possibile raccogliere pagamenti una tantum o ricorrenti e non ci sono spese di transazione aggiuntive.
  • Rendere conversazionali i moduli più lunghi – Se avete un modulo di registrazione di un evento o di un utente che deve acquisire molte informazioni, renderlo conversazionale può aumentare il tasso di completamento del modulo.
  • Prevenzione dello spam nei moduli di contattoÈ possibile attivare la protezione anti-spam integrata di WPForms e la casella di controllo reCAPTCHA per filtrare le voci dei moduli contenenti spam.

Speriamo che questo articolo vi abbia aiutato a imparare come creare un modulo WordPress con un selezionatore di date. Potreste anche dare un’occhiata al nostro articolo su come creare una newsletter via e-mail e alla nostra lista definitiva dei migliori plugin per sondaggi su WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

3 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      Reach out to WPForms’ support for the current methods of limiting the days of the week :)

      Admin

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.