Riassunto AI
Vuoi incorporare frammenti di codice HTML personalizzato nei tuoi moduli di contatto WordPress? L'aggiunta di HTML personalizzato al tuo modulo è un ottimo modo per essere creativi e migliorare i tuoi moduli.
I migliori plugin per moduli WordPress ti consentono di creare moduli senza codice, consentendoti anche di aggiungere il tuo HTML personalizzato ai tuoi moduli per renderli ancora più avanzati.
Quindi, in questo tutorial, ti guiderò attraverso l'installazione di WPForms, la creazione di un modulo, l'aggiunta di un blocco HTML e l'incollaggio del tuo codice.
Aggiungi HTML personalizzato al tuo modulo WordPress! :)
Perché aggiungere HTML personalizzato al tuo modulo di contatto
Potresti chiederti perché dovresti aggiungere HTML ai tuoi moduli WordPress. In molti casi, un utente avanzato o uno sviluppatore web potrebbe voler espandere la funzionalità di un modulo.
Uno dei principali vantaggi dell'aggiunta di HTML personalizzato al tuo modulo è che ti aiuta a far risaltare il tuo modulo dal resto del contenuto.
Nell'esempio seguente, puoi vedere quanto è facile aggiungere un link a un'Informativa sulla privacy in un testo sul tuo modulo di contatto.
Pertanto, quando i tuoi visitatori arrivano sulla pagina in cui si trova il tuo modulo di contatto, vedranno qualcosa di simile a questo qui sotto:
Inoltre, puoi aggiungere un'immagine al tuo modulo usando codice HTML personalizzato per rendere il modulo più accattivante o per mostrare prodotti e opzioni di prodotto personalizzate.
E aggiungendo queste funzionalità extra ai tuoi moduli, puoi far risaltare il modulo sulla pagina, il che aiuta ad attirare l'attenzione dei tuoi visitatori.
Come aggiungere codice HTML personalizzato al tuo modulo di contatto WordPress
Ho anche condiviso un video qui sotto che descrive tutte le istruzioni che devi seguire per aggiungere codice HTML al tuo modulo in WordPress.
Se preferisci leggere il tutorial, segui queste istruzioni per creare uno spazio sui tuoi moduli dove inserire il tuo codice HTML personalizzato.
Passaggio 1: Installa il plugin WPForms
La prima cosa che devi fare per iniziare è installare e attivare il plugin WPForms. È un costruttore di moduli facile da usare che ti permette di creare qualsiasi cosa, da moduli semplici a moduli avanzati.
Ciò che distingue WPForms è come gestisce l'HTML personalizzato. A differenza di altri costruttori di moduli che limitano ciò che puoi aggiungere, WPForms ti dà il pieno controllo sui tuoi contenuti HTML mantenendo tutto sicuro e funzionale.
Il campo HTML fa parte della raccolta Fancy Fields di WPForms, il che significa che avrai bisogno almeno del piano Basic per accedervi. Se sei nuovo nel download di plugin, ecco una guida passo passo su come installare un plugin WordPress.
Aggiorna subito a WPForms Pro!:)
Passaggio 2: Crea un modulo e aggiungi campi di base
Il passo successivo è creare il tuo primo modulo. Puoi scegliere qualsiasi modulo a cui desideri aggiungere un HTML personalizzato, ma per questo esempio, creeremo un semplice modulo di contatto utilizzando la sfida di WPForms.
Dai al tuo modulo un nome descrittivo come "Modulo di contatto con HTML personalizzato" in modo da poterlo trovare facilmente in seguito. Puoi iniziare con un modello come Modulo di contatto semplice per risparmiare tempo.
Una volta nell'editor di moduli, vedrai la configurazione familiare con le opzioni dei campi a sinistra e l'anteprima del modulo a destra con campi cruciali come Nome, Email e Messaggio già aggiunti.
Questo ti offre una solida base su cui lavorare prima di aggiungere i tuoi elementi HTML personalizzati. Ottimo. Ora, aggiungiamo il campo che accetterà l'HTML personalizzato.
Passaggio 3: Aggiungi un blocco HTML al tuo modulo
Ora arriva la parte divertente di aggiungere HTML personalizzato al tuo modulo. Cerca il campo HTML nella sezione Campi Fantasia sul lato sinistro dell'editor di moduli e trascinalo nell'area di anteprima del tuo modulo.
Puoi posizionare il campo HTML ovunque all'interno della struttura del tuo modulo. Di solito lo posiziono dove voglio che appaia il contenuto personalizzato.
Magari in alto per un messaggio di benvenuto, tra le sezioni dei campi come divisore, o in basso per informazioni aggiuntive.
Passaggio 4: Inserisci il tuo codice HTML personalizzato
Ora che la tua casella HTML personalizzata è sul tuo modulo di contatto, puoi aggiungere il tuo snippet di codice HTML personalizzato. Vai al tuo modulo a destra e fai clic sul campo blocco HTML / Codice che hai appena aggiunto.
Quindi, vai al pannello di sinistra dove vedrai la casella Codice HTML sotto Opzioni campo. Qui puoi aggiungere il tuo snippet di codice HTML personalizzato.
Quindi incolla il tuo HTML personalizzato in quel campo. Puoi aggiungere qualsiasi tipo di snippet di codice HTML personalizzato al tuo modulo. Al termine, premi il pulsante Salva nell'angolo in alto a destra.
Passaggio 5: Metti online il tuo modulo HTML personalizzato
Prima di rendere pubblico il tuo modulo, devi testare tutto per assicurarti che il tuo HTML personalizzato venga visualizzato correttamente e non interferisca con l'invio dei moduli.
Fai clic sul pulsante Anteprima nel generatore di moduli per vedere esattamente come apparirà il tuo modulo ai visitatori. Se tutto funziona come previsto, puoi quindi procedere ad aggiungerlo al tuo sito web. Fai clic sul pulsante Incorpora.
Ora, quando appare la notifica Incorpora in una pagina, fai clic sul pulsante Crea nuova pagina. Successivamente, WPForms ti chiederà di nominare la tua pagina.
Per il nostro esempio, stiamo aggiungendo questo modulo di contatto HTML personalizzato a una pagina di contatto, quindi la chiameremo Contattaci. Digita il titolo della pagina che desideri nella casella e fai clic su Iniziamo!
Quindi ora vedrai la nuovissima pagina con il tuo modulo di contatto HTML personalizzato. Puoi procedere e premere il pulsante Pubblica nell'angolo in alto a destra della tua pagina.
E poi dai un'occhiata al tuo nuovo modulo. Ce l'hai fatta. Hai finito di configurare un modulo di contatto WordPress con un campo HTML personalizzato.
Aggiungi HTML personalizzato al tuo modulo WordPress! :)
Domande frequenti su come aggiungere HTML personalizzato ai tuoi moduli WordPress
Imparare come aggiungere HTML personalizzato ai tuoi moduli WordPress è un argomento di interesse popolare tra i nostri lettori. Ecco le risposte ad alcune domande comuni al riguardo:
Che tipi di codice HTML posso aggiungere a WPForms?
Puoi aggiungere quasi tutti gli elementi HTML standard al campo HTML. Questo include intestazioni, paragrafi, divisori, immagini, video incorporati, caselle di testo stilizzate, collegamenti e persino semplici tabelle HTML.
Puoi anche utilizzare CSS inline per stilizzare questi elementi esattamente come desideri che appaiano. Il campo HTML supporta la maggior parte dei tag HTML comuni.
L'HTML personalizzato influenzerà la funzionalità di invio del modulo?
No, l'aggiunta di HTML al tuo modulo non interferirà affatto con l'invio dei moduli. Il campo HTML è puramente a scopo di visualizzazione e non raccoglie dati che vengono inviati con il modulo.
I tuoi campi modulo regolari (come Nome, Email, Messaggio) continueranno a funzionare esattamente come hanno sempre fatto. L'HTML personalizzato migliora semplicemente la presentazione visiva e l'esperienza utente senza toccare la funzionalità effettiva di elaborazione del modulo.
Posso usare JavaScript nel campo HTML?
No, il codice JavaScript viene automaticamente filtrato dal campo HTML per motivi di sicurezza. WPForms rimuove i tag <script> e gli handler di eventi JavaScript per proteggere il tuo sito da potenziali vulnerabilità di sicurezza.
Se hai bisogno di funzionalità interattive oltre a quelle che HTML e CSS possono fornire, potresti voler esplorare le funzionalità integrate di WPForms come la logica condizionale, che può creare un comportamento dinamico del modulo senza richiedere JavaScript personalizzato.
Qual è la differenza tra il campo HTML e il campo Contenuto?
Il campo HTML ti consente di aggiungere qualsiasi codice HTML personalizzato con controllo completo dello stile, mentre il campo Contenuto è progettato per contenuti di testo semplici con opzioni di formattazione di base. Il campo HTML ti offre molta più flessibilità per elementi di design personalizzati.
Se hai solo bisogno di aggiungere testo normale o contenuti formattati semplici, il campo Contenuto potrebbe essere più facile da usare. Ma quando desideri stili personalizzati, media incorporati o layout complessi, il campo HTML è sicuramente la strada da percorrere.
C'è un limite a quanto codice HTML posso aggiungere?
Non esiste un limite di caratteri rigido per il campo HTML, ma è buona norma mantenere il codice conciso e mirato. Quantità molto elevate di HTML possono rallentare il tempo di caricamento del modulo e renderlo più difficile da gestire.
Consiglio di suddividere l'HTML complesso in sezioni più piccole e logiche utilizzando più campi HTML, se necessario. Questo rende il modulo più facile da modificare in seguito e aiuta con le prestazioni generali e la velocità di caricamento del modulo.
Successivamente, scopri come stilizzare i tuoi moduli WordPress
Quindi, ora che hai aggiunto HTML personalizzato al tuo modulo, dovresti dare un'occhiata alla nostra guida su come stilizzare i moduli di contatto in WordPress per assicurarti che il tuo codice personalizzato appaia come desideri.
Crea ora il tuo modulo WordPress
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.
