Riassunto AI
Vuoi aggiungere snippet di codice HTML personalizzati ai tuoi moduli di contatto WordPress? L'aggiunta di HTML personalizzato al tuo modulo è un ottimo modo per essere creativi e migliorare i tuoi moduli.
Il modo più rapido per farlo è con il campo HTML in WPForms. Aggiungi il campo al tuo modulo, incolla il tuo codice e premi Salva. Non dovrai toccare i file del tuo tema o installare un plugin separato.
Quindi, in questo tutorial, ti guiderò nell'installazione di WPForms, nella creazione di un modulo, nell'aggiunta di un blocco HTML e nell'incollatura del tuo codice. Condividerò anche alcuni snippet HTML copia e incolla che puoi usare subito.
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
- Passaggio 2: Crea un modulo e aggiungi campi di base
- Passaggio 3: Aggiungi un blocco HTML al tuo modulo
- Passaggio 4: Inserisci il tuo codice HTML personalizzato
- Passaggio 5: Metti online il tuo modulo HTML personalizzato
- Esempi di codice HTML da copiare e incollare
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! :)
Esempi di codice HTML da copiare e incollare
Ecco alcune delle mie idee preferite, insieme al codice effettivo che puoi incollare direttamente nel campo HTML. Ognuna utilizza HTML semplice e CSS inline, quindi non c'è nulla di aggiuntivo da installare.
Lo snippet che uso più spesso è una semplice riga per l'informativa sulla privacy. Aggiunge una breve nota con un link, che mantiene il tuo modulo di contatto conforme al GDPR.
<p style="font-size: 14px; color: #666666;">
By submitting this form, you agree to our
<a href="https://example.com/privacy-policy/">Privacy Policy</a>.
</p>Se preferisci raccogliere un consenso formale, puoi aggiungere un campo di accordo GDPR invece di un semplice link.
Per rendere il tuo modulo più coinvolgente, puoi incorporare un video di YouTube direttamente al suo interno. Sostituisci VIDEO_ID con l'ID nell'URL del tuo video e verrà visualizzato nel modulo.
<iframe width="100%" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video" frameborder="0" allowfullscreen>
</iframe>In una pagina di contatto, una Google Map incorporata aiuta le persone a trovare la tua attività di persona. Prendi il link di incorporamento da Google Maps usando l'opzione Condividi e poi Incorpora una mappa, e incollalo al posto di TUO_CODICE_EMBED.
<iframe
src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE"
width="100%" height="300" style="border: 0;"
loading="lazy" allowfullscreen>
</iframe>Gestisci un modulo d'ordine? Una casella stilizzata è un bel modo per evidenziare uno sconto o un'offerta a tempo limitato. Puoi persino abbinarla alla logica condizionale in modo che venga visualizzata solo quando qualcuno seleziona una determinata opzione.
<div style="background: #f0f7ff; border: 1px solid #cce0ff; padding: 16px; border-radius: 6px;">
<strong>Limited-time offer:</strong> Use code SAVE10 at checkout for 10% off your order.
</div>Per moduli più lunghi, un'intestazione e un divisore rendono facile raggruppare campi correlati in sezioni chiare.
<h3 style="margin-top: 24px;">Shipping Details</h3>
<hr style="border: 0; border-top: 1px solid #e0e0e0;">E se desideri un pulsante di invito all'azione che corrisponda al tuo marchio, puoi stilizzare un link per farlo sembrare un pulsante senza toccare il tuo tema.
<a href="https://example.com/"
style="display: inline-block; background: #e27730; color: #ffffff; padding: 10px 18px; border-radius: 4px; text-decoration: none;">
Learn More
</a>Domande frequenti su come aggiungere HTML personalizzato ai tuoi moduli WordPress
L'aggiunta di codice HTML personalizzato a un modulo di contatto WordPress solleva alcune domande comuni. Ecco le risposte che mi vengono poste più spesso.
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 un 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.
Raccomando di suddividere l'HTML complesso in sezioni più piccole e logiche utilizzando più campi HTML, se necessario. Ciò rende il tuo modulo più facile da modificare in seguito e aiuta con le prestazioni generali e la velocità di caricamento del modulo.
Posso creare un modulo di contatto WordPress solo con codice HTML?
Puoi codificare manualmente un modulo di contatto in puro HTML, ma da solo non invierà né memorizzerà le richieste. L'HTML gestisce solo il layout, quindi avresti comunque bisogno di PHP o di un servizio di gestione moduli per elaborare ciò che le persone inviano. Ecco perché la maggior parte delle persone utilizza un generatore di moduli per gestire le richieste, quindi aggiunge HTML personalizzato per i tocchi di design.
Come aggiungo codice HTML a un modulo di contatto senza un plugin?
Senza un plugin, aggiungeresti l'HTML del tuo modulo direttamente a una pagina utilizzando il blocco HTML personalizzato di WordPress, quindi scriveresti PHP per gestire l'invio e inviarlo via email. Funziona, ma è più tecnico e sei tu responsabile della protezione dallo spam e della convalida. Il campo HTML in un plugin per moduli ti offre lo stesso controllo creativo sul tuo markup gestendo per te il lato dell'invio sicuro.
Ho bisogno di sapere come programmare per usare il campo HTML?
Il campo HTML non richiede alcuna conoscenza di programmazione reale. Se sai copiare e incollare, puoi usarlo, e gli esempi precedenti in questa guida sono pronti per essere inseriti una volta che sostituisci il testo segnaposto con il tuo. HTML di base e un po' di CSS inline coprono la maggior parte di ciò che vorrai fare.
Il campo HTML funziona nella versione gratuita di WPForms?
Il campo HTML fa parte della raccolta Fancy Fields, quindi avrai bisogno almeno del piano Basic per usarlo. La versione gratuita WPForms Lite copre i campi standard come nome, email e messaggio, che sono sufficienti per un modulo di contatto di base. Una volta che desideri HTML personalizzato, menu a discesa con immagini o caricamenti di file, è allora che entra in gioco un piano a pagamento.
Posso aggiungere lo stesso HTML a più moduli WordPress?
Sì, ma il campo HTML viene aggiunto per modulo, quindi non esiste un'impostazione globale che lo applichi ovunque. L'approccio più semplice è salvare il tuo snippet in un posto comodo e incollarlo nel campo HTML su ogni modulo che ne ha bisogno. Se riutilizzi spesso lo stesso blocco, conservare un piccolo file di testo dei tuoi snippet preferiti ti fa risparmiare tempo.
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.
