Come aggiungere testo segnaposto ai tuoi moduli WordPress

Vuoi aggiungere testo segnaposto ai moduli in WordPress?

I segnaposto rendono facile per i tuoi visitatori compilare correttamente ogni campo. Questo ti aiuta a ottenere le informazioni giuste e riduce la frustrazione per i tuoi visitatori.

In questo articolo, ti mostreremo il modo semplice per aggiungere testo segnaposto a qualsiasi tipo di modulo.

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 tuo visitatore come formattare la sua immissione.

Il testo segnaposto è 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'immissione del modulo a meno che l'utente non lo modifichi.

Ora che sappiamo come utilizzare l'attributo segnaposto HTML5, ti mostreremo il modo semplice per aggiungerlo ai tuoi moduli.

Come aggiungere testo segnaposto ai moduli WordPress

Ti mostreremo come aggiungere facilmente testo segnaposto nei passaggi seguenti.

Iniziamo installando il miglior plugin per la creazione di moduli per WordPress.

1. Installa il plugin WPForms

Innanzitutto, installa e attiva il plugin WPForms.

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.

2. Crea un modulo di contatto semplice

Successivamente, vorrai creare un modulo di contatto semplice. In WPForms, puoi creare e incorporare un modulo in meno di 5 minuti.

È 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.

3. Aggiungi testo segnaposto al campo email

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 per l'accessibilità.

Per ora, deselezioneremo Nascondi etichetta in modo da avere sia l'etichetta che il testo segnaposto.

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 dà 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 pubblichiamo il modulo, la prima opzione sarà la selezione predefinita. Il tuo visitatore potrebbe inviare questo modulo senza fare clic sul menu a discesa per cambiarlo.

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 si desidera utilizzare testo segnaposto, ma si desidera una riga vuota all'inizio del menu a discesa, è possibile lasciare vuoto il segnaposto. Basta premere spazio nel campo Testo segnaposto. Questo mostrerà il campo menu a discesa come vuoto finché il visitatore non effettua una selezione.

E questo è tutto! Ora sai come aggiungere un utile testo segnaposto ai tuoi moduli WordPress.

Crea subito il tuo modulo WordPress

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.

Non sei sicuro di come aggiungere CSS in WordPress? Leggi questa guida per aggiungere snippet di codice senza interrompere il tuo sito.

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più facile. 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.