Come aggiungere testo segnaposto ai tuoi moduli WordPress

Vuoi aggiungere testo segnaposto nei moduli di WordPress? I segnaposto rendono facile per i tuoi visitatori compilare correttamente ogni campo.

Si trova all'interno di un campo e mostra alle persone esattamente cosa digitare prima che lo facciano, il che riduce le congetture e le email di andata e ritorno che ne conseguono.

In questo articolo, ti guiderò nell'aggiunta di testo segnaposto a ogni campo del tuo modulo di contatto WordPress utilizzando la soluzione più semplice disponibile con WPForms!

Crea subito il tuo modulo WordPress! :)

Cos'è il testo segnaposto?

Il testo segnaposto è il testo all'interno di un campo del modulo che mostra all'utente cosa digitare. È stato introdotto nella specifica HTML5, quindi a volte lo vedrai indicato come 'attributo segnaposto HTML5'.

I segnaposto sono utili per qualsiasi campo che abbia un formato specifico, come un indirizzo email. Mostra al visitatore come formattare la sua immissione è molto importante per assicurarsi che ogni campo sia valido.

Ciò significa che c'è meno probabilità di abbandono del modulo perché il visitatore non dovrà tornare indietro e correggere ciò che ha digitato. È particolarmente utile per campi come:

• URL: Puoi aggiungere https://example.com come testo segnaposto per mostrare al visitatore come digitare correttamente l'indirizzo del suo sito web
• Numeri di telefono: Ad esempio, se desideri ottenere il codice del paese dell'utente insieme al suo numero normale, puoi aggiungere testo segnaposto per mostrargli come digitarlo.
• Nomi utente dei social media: Il testo segnaposto può mostrare alle persone come digitare correttamente il proprio nome utente. Ad esempio, aggiungere @example come testo segnaposto per un campo Twitter mostra che desideri che digitino il @ iniziale

Probabilmente puoi pensare ad altri modi per utilizzare il testo segnaposto per aiutare i tuoi visitatori. Il testo segnaposto è leggermente diverso da un valore predefinito.

Quando l'utente inizia a digitare in un campo con un segnaposto, il testo segnaposto scompare. Al contrario, un valore predefinito verrà inviato insieme all'invio del modulo a meno che l'utente non lo modifichi.

Come aggiungere testo segnaposto ai moduli WordPress

Una volta che il tuo modulo esiste, il testo segnaposto richiede un paio di clic per campo e non è necessario toccare una riga di codice o CSS per farlo. Segui i passaggi seguenti per iniziare:

Passaggio 1: Installa il plugin WPForms

WPForms è un costruttore di moduli drag and drop per WordPress con oltre 2.100 modelli di moduli, quindi puoi iniziare da un modulo di contatto già pronto invece di costruirlo da zero.

Ogni campo che trascini ha il suo pannello di opzioni e il testo segnaposto si trova nello stesso punto su tutti. Quello che mi piace di più di WPForms per questo particolare lavoro è che l'anteprima del segnaposto si aggiorna in tempo reale.

Tutte le versioni di WPForms ti consentono di aggiungere segnaposto ai campi del modulo, inclusa WPForms Lite. Tieni presente che la versione Pro ti consente di aggiungere campi avanzati ai tuoi moduli, quindi è molto più potente della versione gratuita.

Scarica il file zip dalla scheda Download nel tuo account WPForms e caricalo sul tuo sito WordPress. Ecco una guida passo passo su come installare un plugin WordPress se hai bisogno di aiuto con questo passaggio.

Inizia oggi stesso con WPForms

Passaggio 2: Crea il tuo modulo di contatto

In WPForms, puoi creare e incorporare un modulo in meno di 5 minuti, grazie alla sua libreria di oltre 2.100 modelli di moduli e alle funzionalità avanzate di creazione moduli basate sull'IA.

Puoi iniziare andando su WPForms » Aggiungi Nuovo e scegliere il modello Modulo di Contatto Semplice o chiedere all'IA di WPForms di creare il modulo per te.

Una volta selezionato un modello o creato il tuo modulo utilizzando l'IA di WPForms, verrai reindirizzato al generatore di moduli. Qui puoi vedere un elenco di campi da aggiungere a sinistra e un'anteprima in tempo reale del tuo modulo a destra.

È facile personalizzare il tuo modulo e aggiungere i campi che ti servono. Puoi persino aggiungere un accordo GDPR facilmente trascinando il campo GDPR sull'anteprima del modulo.

Hai bisogno di ulteriore aiuto? Abbiamo una guida dettagliata che mostra come creare un semplice modulo di contatto in WordPress. Quando il tuo modulo è pronto, fai clic su Salva nella parte superiore del generatore di moduli per salvare i progressi finora.

Passaggio 3: Aggiungi testo segnaposto a un campo di testo o e-mail

Ora siamo pronti per aggiungere testo segnaposto al tuo modulo WordPress. Ti mostreremo 2 modi utili per utilizzare questa funzionalità per rendere i tuoi moduli più facili da compilare.

Usiamo il campo email come primo esempio. Nel generatore di moduli, fai clic sul campo email a destra per aprire le impostazioni.

Quindi, sul lato sinistro, espandi il sottomenu Opzioni Avanzate. Vedrai un campo per il Testo Segnaposto.

Digita il testo segnaposto che desideri utilizzare. Mentre digiti, vedrai lo stesso testo apparire nell'anteprima del modulo a destra, in modo da poter vedere come apparirà sul tuo modulo WordPress.

Se vuoi, puoi anche selezionare la casella Nascondi Etichetta. Questo nasconderà l'etichetta sopra il campo per rendere il modulo più compatto.

Tuttavia, tieni presente che gli screen reader non possono leggere l'attributo placeholder HTML5, quindi potresti voler lasciare l'etichetta del campo al suo posto per l'accessibilità.

Per ora, deselezioneremo Nascondi Etichetta in modo da avere sia l'etichetta che il testo segnaposto. Ripeti questo per ogni campo che necessita di un suggerimento.

Passaggio 4: Aggiungi testo segnaposto a un campo a discesa

Puoi usare il testo segnaposto su qualsiasi campo, ma il menu a discesa è particolarmente utile. Per impostazione predefinita, un elenco a discesa utilizzerà la prima scelta nell'elenco, ma possiamo usare un segnaposto per evitarlo.

Se hai letto il nostro confronto tra WPForms Lite e Contact Form 7, saprai che Contact Form 7 ti consente di aggiungere una riga vuota in cima a un menu a discesa.

Tuttavia, mostrerà solo 3 trattini ( – – – ) come segnaposto e non puoi personalizzare il testo effettivo del segnaposto. Quindi WPForms ti offre un maggiore controllo sul modo in cui appaiono i tuoi segnaposto.

Iniziamo con un esempio di menu a discesa. Abbiamo aggiunto 3 scelte di risposta a questo menu a discesa. Quando pubblicheremo il modulo, la prima opzione sarà la selezione predefinita.

Questo può essere un problema su qualsiasi modulo, e in particolare su moduli di sondaggio e questionari. Su qualsiasi tipo di sondaggio, vuoi assicurarti che il tuo visitatore scelga consapevolmente una risposta.

Possiamo risolvere facilmente questo problema aggiungendo un segnaposto al campo del menu a discesa. Sotto Opzioni Avanzate, abbiamo digitato il testo segnaposto a sinistra. La modifica viene mostrata istantaneamente nell'anteprima a destra.

Ora il modulo mostrerà il segnaposto invece della prima scelta.

Quando l'elenco viene espanso, puoi vedere che il testo segnaposto è in grigio per indicare che non è una selezione valida.

Se non vuoi usare il testo segnaposto, ma vuoi una riga vuota in cima al menu a discesa, puoi lasciare vuoto il segnaposto.

Basta premere spazio nel campo Testo segnaposto. Questo mostrerà il campo a discesa come vuoto finché il visitatore non effettua una selezione.

Tutti i campi WPForms che supportano il testo segnaposto

Non tutti i campi possono contenere testo segnaposto, e sapere quali possono ti evita di cercare impostazioni che non ci sono.

Per il riferimento completo su ogni tipo di campo, WPForms ha una documentazione sul testo segnaposto che copre i dettagli.

Campo	Note
Testo a riga singola	Segnaposto standard
Testo paragrafo	Segnaposto standard
Nome	Segnaposto separato per sotto-campo (primo, secondo, ultimo)
Email	Segnaposto separato per il campo di conferma
Sito web / URL	Segnaposto standard
Telefono	Segnaposto standard
Numero	Segnaposto standard
Menu a discesa	Funziona anche come modo per impedire la preselezione della prima scelta
Indirizzo	Segnaposto separato per riga, città, stato, CAP e paese
Data / Ora	Segnaposto separato per i selettori di data e ora
Password	Segnaposto separato per il campo di conferma
Captcha personalizzato	Segnaposto standard

Qualsiasi cosa su cui il lettore clicca invece di digitare non ha un'opzione segnaposto, poiché non c'è una casella di testo vuota in cui inserire un suggerimento. Questo copre Caselle di controllo, Scelta multipla, Valutazione, Firma, Caricamento file, Slider numerico e Testo ricco.

Sei dei campi sopra sono inclusi gratuitamente con WPForms Lite, inclusi Testo a riga singola, Nome, Email, Testo paragrafo, Menu a discesa e Numero. Telefono, Indirizzo, Data / Ora e Captcha personalizzato sono campi avanzati che richiedono una licenza a pagamento.

Passare da Contact Form 7 a WPForms

Se sei arrivato qui da Contact Form 7, sai già perché. I segnaposto lì significano aprire la scheda Modulo e digitare manualmente un attributo placeholder nel codice shortcode per ogni singolo campo, o selezionare la casella "usa questo testo come segnaposto" sotto Valore predefinito.

In entrambi i casi stai modificando il markup, e ogni nuovo campo significa tornare di nuovo allo shortcode. I menu a discesa incontrano un ostacolo più grande, perché Contact Form 7 può darti una riga vuota ma la mostra come tre trattini senza alcuna impostazione per cambiare ciò che dice.

Non puoi scrivere "Scegli un dipartimento" o "Seleziona il tuo budget", e nessuna quantità di modifica dello shortcode cambia questo. Il nostro confronto WPForms Lite vs Contact Form 7 esamina il resto delle differenze se vuoi il quadro completo.

Quel divario è l'onesta ragione per passare a questo particolare lavoro. Il testo segnaposto in WPForms è una casella in cui digiti, con un'anteprima dal vivo, su ogni campo che lo supporta.

Puoi importare i tuoi moduli Contact Form 7 esistenti invece di ricostruirli, il che rende WPForms una alternativa a Contact Form 7 diretta se la modifica dello shortcode ti ha stancato.

FAQ sul testo segnaposto di Contact Form

Il testo segnaposto compare spesso tra gli utenti WordPress che configurano moduli di contatto. Ecco le domande che sorgono più frequentemente.

Cos'è il testo segnaposto?

È il testo di suggerimento all'interno di un campo del modulo che mostra cosa digitare e scompare una volta che qualcuno inizia a digitare.

Deriva dall'attributo HTML5 placeholder e in WPForms lo aggiungi dalla scheda Avanzate di qualsiasi campo supportato.

Qual è la differenza tra testo segnaposto e valore predefinito?

Il testo segnaposto è solo un suggerimento visivo, quindi non viene mai inviato con il modulo. Un valore predefinito è un contenuto reale presente nel campo e viene inviato a meno che la persona non lo modifichi prima.

Usa un segnaposto per mostrare il formato desiderato e un valore predefinito quando vuoi precompilare una risposta effettiva.

Gli screen reader possono leggere il testo segnaposto?

Non in modo affidabile, motivo per cui il testo segnaposto non dovrebbe essere l'unica descrizione di un campo.

Mantieni l'etichetta del campo visibile invece di selezionare Nascondi etichetta e inserisci tutto ciò che è veramente importante nella descrizione del campo dove rimane sullo schermo.

Perché il mio menu a discesa seleziona automaticamente la prima opzione?

Perché è impostato sullo stile Classico, che preseleziona sempre la prima scelta.

Aggiungi testo segnaposto nella scheda Avanzate e questo si ferma, oppure cambia Stile in Moderno nella scheda Generale, poiché i menu a discesa Moderni non preselezionano affatto.

Posso aggiungere testo segnaposto in Contact Form 7?

Puoi farlo digitando un attributo placeholder nello shortcode del tag del modulo o utilizzando la casella di controllo Valore predefinito.

I menu a discesa sono il limite, perché Contact Form 7 offre solo una riga vuota mostrata come tre trattini senza modo di personalizzare il testo.

Passo successivo: Stile del testo segnaposto

Per impostazione predefinita, il testo segnaposto del modulo di contatto WordPress sarà grigio.  Se desideri aggiungere un po' di contrasto, puoi usare il CSS per stilizzarlo.

Dai un'occhiata agli snippet di codice nella nostra documentazione: come stilizzare il testo segnaposto. Abbiamo anche alcuni ottimi esempi di pagine contatti se desideri un po' di ispirazione per il design.

Crea un modulo di contatto migliore ora

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.