Utilizzo del campo HTML

Vorresti incorporare codice HTML personalizzato nei tuoi moduli? Il campo HTML in WPForms ti consente di farlo. Questo può essere utile per aggiungere testo, collegamenti e altri elementi ai tuoi moduli.

Questo tutorial ti mostrerà tutte le opzioni disponibili per il campo HTML in WPForms, nonché alcuni casi d'uso.

---

Prima di proseguire, assicurati che WPForms sia installato e attivato sul tuo sito WordPress e che tu abbia verificato la tua licenza. Quindi puoi creare un nuovo modulo o modificarne uno esistente per accedere al generatore di moduli.

Aggiungere un campo HTML al tuo modulo

Poiché il campo HTML è una funzionalità avanzata, lo troverai sotto Campi Fantasia nel generatore di moduli.

Per aggiungerlo al tuo modulo, fai clic su di esso o trascinalo nell'area di anteprima.

Oltre ad aggiungere il tuo HTML, l'unica opzione del campo che devi configurare è l'etichetta. Puoi inserire qualsiasi testo desideri nel campo fornito.

A differenza di altri campi, l'etichetta del campo HTML è visibile solo nel generatore di moduli per aiutarti a identificarla nell'area di anteprima. Gli utenti non la vedranno nel frontend e il campo non sarà incluso nelle registrazioni del tuo modulo.

Utilizzo del campo HTML

Le basi per l'utilizzo del campo HTML sono piuttosto semplici. Inserisci semplicemente il tuo testo o HTML nel campo fornito nel pannello Opzioni Campo.

Tuttavia, ci sono molti casi d'uso diversi per questo campo. È molto flessibile e puoi adattarlo a molte situazioni diverse.

Di seguito, abbiamo trattato alcuni dei casi d'uso più popolari in modo più dettagliato.

Aggiungere testo stilizzato a un modulo

I campi HTML sono uno dei tanti modi in cui puoi aggiungere testo extra ai tuoi moduli, come istruzioni per compilarli o informazioni importanti che vuoi che gli utenti vedano prima di inviare le loro registrazioni.

Tuttavia, il campo HTML è unico perché ti consente di includere testo stilizzato, come grassetto o corsivo. Puoi aggiungere i tag HTML appropriati direttamente nel campo Codice nel pannello Opzioni Campo.

Nel frontend, l'esempio sopra apparirebbe così:

Inoltre, puoi utilizzare i tag HTML per aggiungere intestazioni, elenchi e altro al testo aggiuntivo nei tuoi moduli.

Aggiungere collegamenti a un modulo

Il campo HTML ti consente anche di aggiungere collegamenti al tuo modulo. Questo può essere utile se vuoi consentire agli utenti di accedere rapidamente a un'altra pagina mentre stanno compilando il tuo modulo.

Per aggiungere un link al tuo campo HTML, devi usare il tag <a>. Per prima cosa, aggiungi i tag di apertura e chiusura attorno al testo che vuoi usare per ancorare il tuo link.

Quindi, nel tag di apertura, aggiungi l'attributo href e impostalo all'URL a cui vuoi collegarti.

Sul frontend, questo apparirà come un link cliccabile nel tuo modulo.

Incorporare un'immagine in un modulo

Puoi anche usare elementi <img> per aggiungere immagini al tuo modulo. Per farlo, aggiungi <img> al campo Codice nel pannello Opzioni Campo.

Quindi dovrai aggiungere l'src o l'URL sorgente dell'immagine. Se l'immagine che stai aggiungendo al tuo modulo si trova nella tua Libreria Media di WordPress, puoi trovarne l'URL guardando i suoi Dettagli Allegato.

L'URL del File si trova in fondo alla finestra e puoi fare clic sul pulsante per copiarlo negli appunti.

Quindi aggiungilo all'elemento <img> nel tuo campo HTML.

Puoi anche usare attributi HTML per cambiare le dimensioni della tua immagine e aggiungere testo alternativo. Sul frontend, potrebbe apparire qualcosa di simile a questo:

Incorporare un video in un modulo

L'ultimo caso d'uso che tratteremo in questo articolo è l'incorporamento di un video in un modulo. Per fare ciò, devi usare un elemento HTML chiamato <iframe>.

Per prima cosa, aggiungi l'elemento <iframe></iframe> al campo Codice nel pannello Opzioni Campo.

Quindi devi aggiungere l'src per il video che vuoi incorporare. Se hai caricato il video che stai usando nella tua Libreria Media di WordPress, puoi trovare l'URL del File come descritto nella sezione precedente.

Per i video di YouTube, puoi fare clic su Condividi » Incorpora per copiare l'intero iframe e incollarlo nel tuo campo HTML.

Una volta aggiunto il tuo src al tuo campo HTML, puoi usare attributi HTML per cambiare le dimensioni dell'iframe e altro ancora. Sul frontend, potrebbe apparire qualcosa di simile a questo:

Domande frequenti

Queste sono alcune delle domande più comuni che riceviamo riguardo al campo HTML.

Posso usare Smart Tag all'interno dei campi HTML dei miei moduli?

Sì, mentre gli Smart Tag sono un modo dinamico per recuperare e visualizzare dati all'interno del tuo modulo, non vengono elaborati di default nei campi HTML. Tuttavia, con un piccolo snippet PHP, puoi abilitare gli Smart Tag all'interno di questi campi.

Per istruzioni dettagliate su come implementare questa funzionalità, fai riferimento alla nostra documentazione per sviluppatori.

Ecco fatto! Ora hai alcune idee su come usare il campo HTML in WPForms.

Successivamente, desideri saperne di più sull'aggiunta di CSS personalizzato ai tuoi moduli? Il nostro tutorial per principianti ha tutto ciò che ti serve per iniziare.