Hai un modulo HTML pronto all'uso, ma aggiungerlo a WordPress può essere complicato e richiede molti test.
La ragione è semplice: aggiungere moduli HTML a WordPress richiede l'approccio giusto per garantire che funzionino correttamente e si integrino perfettamente con il tuo sito.
WordPress non gestisce i moduli come un normale sito web HTML. Se copi e incolli semplicemente il codice del modulo, spesso non funzionerà correttamente senza alcuni passaggi aggiuntivi.
Sui nostri siti, utilizziamo il plugin WPForms perché si occupa di tutta la configurazione per noi. Detto questo, sappiamo che molti utenti preferiscono utilizzare moduli HTML personalizzati per mantenere le cose leggere, avere il pieno controllo del proprio codice o evitare di aggiungere un altro plugin.
In questa guida, ti mostreremo 2 semplici modi per aggiungere moduli HTML in WordPress, in modo che il tuo modulo venga visualizzato correttamente, funzioni come previsto e non danneggi il tuo sito. 💡

Cosa sono i moduli HTML e perché crearne uno?
I moduli HTML funzionano in modo simile ad altri moduli del sito. Consentono ai visitatori di inserire e inviare informazioni come nomi, indirizzi email, feedback, ordini e altro.
Ciò che li distingue è che i moduli HTML sono creati utilizzando il codice invece di un editor visivo drag-and-drop come un plugin per moduli. Ciò significa che devi definire tu stesso campi come caselle di testo, caselle di controllo, pulsanti di opzione e campi a discesa.
Ecco alcuni vantaggi della creazione di moduli da zero utilizzando HTML:
- Prestazioni ottimizzate. I moduli HTML tendono a caricarsi più velocemente e utilizzano meno memoria perché il codice è leggero.
- Controllo. Avrai il controllo completo sul design e sulla funzionalità del modulo perché non sei limitato dalle funzionalità di un generatore di moduli.
- Personalizzazione. I moduli HTML possono essere adattati esattamente alle tue esigenze, offrendo una personalizzazione del modulo più flessibile.
Sebbene la creazione di moduli HTML da zero sia un ottimo modo per imparare e praticare la codifica, presenta le sue sfide.
Potresti avere problemi con la compatibilità tra browser, dove il modulo funziona in modo diverso su diversi browser web.
Inoltre, in base alla nostra esperienza, la gestione della convalida dei moduli con JavaScript può essere complicata. Richiede test approfonditi per garantire di poter raccogliere ed elaborare correttamente tutti gli input degli utenti.
Per riassumere, ecco i principali vantaggi e le sfide della codifica manuale dei moduli HTML:
| ✅ Vantaggi | 🛑 Sfide |
|---|---|
| Tempi di caricamento della pagina più rapidi con codice leggero | Garantire la compatibilità tra diversi browser |
| Controllo completo su design e funzionalità | Creazione della convalida dei moduli e della gestione degli errori |
| Personalizzazione precisa per requisiti specifici | Impostazione manuale della protezione antispam |
| Migliori opportunità di ottimizzazione delle prestazioni | Gestione della configurazione e dell'elaborazione lato server |
La maggior parte degli utenti WordPress ritiene che i plugin offrano il miglior compromesso. Ti offre opzioni di personalizzazione HTML senza la complessità della configurazione manuale del server.
Detto questo, ci sono modi per aggiungere moduli HTML senza queste complessità. Quindi, non importa se gestisci un blog WordPress, un sito aziendale o un negozio online, puoi facilmente aggiungere moduli HTML al tuo sito senza dover codificare da zero.
Nelle sezioni seguenti, ti mostreremo come aggiungere moduli HTML a WordPress. Ecco una rapida panoramica dei 2 metodi che tratteremo in questa guida:
- Metodo 1: Aggiungere moduli HTML in WordPress utilizzando il plugin HTML Forms (Facile)
- Metodo 2: Aggiungere HTML personalizzato ai moduli di WordPress con WPForms
- Suggerimento bonus: Caricare una pagina HTML personalizzata su WordPress
- Domande frequenti: Come aggiungere moduli HTML in WordPress
- Risorse aggiuntive: Altre guide sui moduli di WordPress
Pronto? Iniziamo.
Metodo 1: Aggiungere moduli HTML in WordPress utilizzando il plugin HTML Forms (Facile)
🎖️ Ideale per: Sviluppatori e gestori di siti che desiderano il pieno controllo HTML con una soluzione leggera e focalizzata sulle prestazioni. Il plugin enfatizza la semplicità e la velocità rispetto ai generatori visivi.
Poiché WordPress non elabora le richieste di moduli HTML non elaborate per impostazione predefinita, un modo semplice per aggiungere un modulo HTML a un sito Web WordPress è utilizzare un plugin gratuito per moduli come HTML Forms. Questo fornisce il codice backend necessario per raccogliere e inviare i dati via e-mail, consentendoti comunque di scrivere l'HTML da solo.
Con oltre 10.000 installazioni attive e una valutazione di 4,9 stelle su 5 su WordPress.org, è uno strumento affidabile per creare e configurare moduli HTML in un unico posto, in modo da non dover affrontare alcuna configurazione lato server.

💡 Nota: Il plugin gratuito HTML Forms fornisce notifiche via e-mail e funzionalità di base, ma ha integrazioni limitate di email marketing rispetto ai plugin premium come WPForms.
Se hai bisogno di integrazione diretta con Mailchimp, supporto per Google reCAPTCHA v3, webhook per la connessione a servizi di terze parti, limiti di invio, la possibilità di richiedere agli utenti di accedere prima di accedere a un modulo o altre funzionalità avanzate, allora la versione Premium aggiunge queste capacità.
Per iniziare, assicurati di aver installato il plugin sul tuo sito Web WordPress.
Dal tuo dashboard di WordPress, vai su Plugin » Aggiungi Nuovo dalla barra laterale sinistra e usa la casella di ricerca per trovare il plugin.

Quando lo vedi nei risultati di ricerca, fai clic su 'Installa ora' e poi su 'Attiva'. Se hai bisogno di aiuto, puoi seguire la nostra guida passo passo su come installare un plugin di WordPress.
Dopo l'attivazione, puoi navigare su HTML Forms » Aggiungi Nuovo dalla barra laterale sinistra nella dashboard di amministrazione di WordPress per iniziare a creare il tuo modulo di contatto.

Questo ti reindirizzerà alla pagina ‘Aggiungi Nuovo Modulo’.
Da qui, la prima cosa che dovrai fare è dare un nome al tuo modulo digitando il nome nel campo 'Titolo modulo'. Ad esempio, abbiamo chiamato il nostro modulo 'Iscrizione Newsletter'.
Successivamente, fai clic sul pulsante ‘Crea Modulo’ sotto il campo.

Una volta fatto ciò, apparirà la pagina ‘Modifica Modulo’ e potrai iniziare a personalizzare il tuo modulo di contatto HTML.
Nella parte superiore della pagina, vedrai i dettagli del tuo modulo, inclusi il titolo del modulo, slug e shortcode. Non devi memorizzare questi dettagli, poiché saranno disponibili nella dashboard di HTML Forms quando ne avrai bisogno.
Sotto questi dettagli, troverai le schede del menu. Nella scheda ‘Campi’, puoi vedere vari pulsanti di campo, come ‘Testo’, ‘Date’, ‘Caselle di controllo’ e ‘Pulsanti radio’, da aggiungere ai tuoi moduli.

Ora, scorri un po' più in basso.
In fondo a questa scheda, troverai un modulo HTML predefinito insieme all'anteprima.
Questo modulo di contatto è piuttosto semplice. Ha 4 campi in cui gli utenti possono digitare il proprio nome, indirizzo email, un breve oggetto e un messaggio.

Ora, supponiamo che tu voglia aggiungere un nuovo campo con un'iscrizione alla newsletter via email. Quindi fai semplicemente clic su uno dei pulsanti di campo sopra 'Codice modulo'.
💡 Nota: Il plugin gratuito HTML Forms include notifiche e-mail integrate. Ciò semplifica la raccolta delle richieste e la notifica quando gli utenti interagiscono con i tuoi moduli.
Ad esempio, utilizzeremo un campo a discesa e creeremo un'opzione 'Sì/No' per l'iscrizione alla newsletter.
Da qui, fai clic su 'Dropdown' e si apriranno le opzioni di configurazione del campo a discesa. Puoi iniziare a completare i dettagli, che includono l'etichetta del campo e le scelte.

Dopo aver inserito i dettagli, puoi fare clic su 'Aggiungi campo al modulo'.
Quindi, dovresti vedere il tag del campo a discesa nella sezione 'Codice modulo'. Scorri semplicemente la scheda per controllarlo.

Il passaggio successivo consiste nel riorganizzare il modulo di contatto.
Per mantenere un buon flusso, vorrai che i campi a discesa siano appena sotto il campo 'Email'.
🧑💻 Importante: Prima di modificare il codice del modulo, fai clic su 'Salva modifiche' per creare un punto di ripristino. La modifica errata dell'HTML può danneggiare il tuo modulo.
Poiché questo plugin non dispone di un costruttore drag-and-drop, dovrai spostare il codice manualmente. Procedi e taglia il codice del campo a discesa dal tag <p> di apertura al tag </p> di chiusura.
Quindi, incolla semplicemente quella porzione di codice subito dopo il tag di chiusura del campo 'Email' (che di solito assomiglia a </p> o </label>).

Il campo predefinito 'Oggetto' potrebbe non essere necessario per un modulo di iscrizione alla newsletter. Pertanto, si consiglia di rimuovere il campo.
Puoi farlo eliminando l'intero blocco di paragrafi contenente l'etichetta e l'input del campo Oggetto, incluse sia le tag <p> di apertura che quelle di chiusura </p>.

Dopo aver spostato ed eliminato i tag, scorri la scheda fino alla sezione 'Anteprima modulo'.
In questa sezione, puoi verificare se hai spostato ed eliminato correttamente i campi senza rompere nulla. Nell'Anteprima del modulo sottostante, puoi verificare che il campo Oggetto sia scomparso senza compromettere il layout del modulo. Puoi anche verificare se il menu a discesa funziona correttamente.

Quando sei soddisfatto dei risultati, fai clic sul pulsante blu 'Salva modifiche' sotto la sezione 'Codice modulo'.
Una volta completato il processo di salvataggio, dovresti vedere una notifica 'Modulo aggiornato.' nella parte superiore di questa pagina.
Ora, potresti voler controllare la configurazione del modulo. Passiamo alla scheda 'Messaggi' per vedere come HTML Forms configura i messaggi di conferma dell'invio del modulo.
Fai semplicemente clic su ‘Messaggi’ per aprire la scheda.

Questa scheda ti consente di modificare il testo predefinito per quando l'invio del modulo di un utente ha successo e per altre situazioni simili.
Se tutto ti sembra corretto, puoi lasciarlo così com'è. Se apporti modifiche, non dimenticare di fare clic sul pulsante 'Salva modifiche' per non perdere i tuoi progressi.
Successivamente, andiamo alla scheda ‘Impostazioni’.

Per impostazione predefinita, HTML Forms imposterà 'Sì' per salvare ogni invio del modulo e 'No' per nascondere il modulo dopo un invio riuscito. Puoi personalizzare questo come necessario.
Quindi, in 'Reindirizza all'URL dopo iscrizioni riuscite', puoi copiare e incollare l'URL di una pagina web attiva dal tuo sito web WordPress. In alternativa, puoi lasciare il campo vuoto o inserire 0 per mantenere gli utenti sulla pagina corrente dopo l'invio del modulo.
Quando tutto è impostato, non resta che aggiungere il modulo HTML a una pagina WordPress.
Andiamo su Articoli o Pagine » Tutti gli Articoli o Tutte le Pagine dal cruscotto di WordPress.

Per questa guida, aggiungeremo il modulo HTML alla nostra pagina 'Contatti'.
Quindi, passeremo il mouse sopra la pagina 'Contatti' nell'elenco e faremo clic su 'Modifica' quando appare.

Questo avvierà l'editor a blocchi della pagina 'Contatti'.
Nell'editor, puoi iniziare a scegliere un'area per aggiungere il modulo. Quindi, passa semplicemente il mouse sopra un'area tra i blocchi e fai clic sul pulsante '+' per aggiungere il blocco Moduli HTML, oppure fai clic sull'icona dell'inseritore di blocchi nella barra degli strumenti in alto a sinistra.

Ora, puoi digitare 'Moduli HTML' nella barra di ricerca nella parte superiore del pannello dell'inseritore di blocchi per trovare rapidamente il blocco. Una volta ottenuto il risultato della ricerca, fai clic su di esso.
Vedrai quindi un menu a discesa nel blocco 'HTML Forms'. Espandilo semplicemente e seleziona il modulo che desideri visualizzare. Qui, stiamo scegliendo il modulo 'Iscrizione alla Newsletter' che abbiamo appena creato.

Il modulo apparirà quando pubblicherai il tuo contenuto. Quindi, una volta selezionato il modulo dal menu a discesa, puoi fare clic sul pulsante 'Aggiorna'.
Il tuo modulo è ora attivo e gli utenti possono iscriversi alla tua newsletter. Ecco come potrebbe apparire sul tuo sito:

Per visualizzare gli invii dei moduli, puoi prima andare su Moduli HTML » Tutti i Moduli. Questo ti porterà all'elenco di tutti i tuoi Moduli HTML.
Quindi, passa semplicemente il mouse sopra un modulo e fai clic sul pulsante ‘Invii’ quando appare.

🧑💻 Suggerimento Pro: Prima di promuovere il tuo modulo, provalo tu stesso inviando una voce di esempio. Verifica di ricevere la notifica via email e che l'invio appaia in Moduli HTML » Tutti i Moduli » Invii.
Da qui, puoi vedere tutti gli invii dei tuoi moduli.
La tabella ‘Invii’ dettaglia tutte le informazioni che gli utenti hanno compilato nel tuo modulo. Poi, c'è la colonna ‘Timestamp’, che ti dice quando hanno inviato il modulo.
Ad esempio, qui, il primo invio è stato effettuato da ‘Utente 1’.
Dalla tabella, possiamo vedere che l'utente ha inviato il modulo il 25 giugno intorno alle 13:00. Inoltre, ‘Utente 1’ ha risposto ‘Forse più tardi’ alla domanda ‘Vuoi iscriverti alla nostra newsletter?’. Quindi, in questo caso, non dovresti aggiungere il loro indirizzo email alla tua mailing list.

Metodo 2: Aggiungere HTML personalizzato ai moduli di WordPress con WPForms
🎖️ Ideale per: Utenti non tecnici che desiderano moduli professionali in pochi minuti senza scrivere codice. WPForms è apprezzato dagli utenti per aver reso possibile la creazione rapida di moduli dall'aspetto accattivante grazie alla sua intuitiva interfaccia drag-and-drop.
Un altro approccio è utilizzare un generatore di moduli di contatto visivo come WPForms, il plugin per moduli WordPress più apprezzato con oltre 6 milioni di installazioni attive e una valutazione di 4,8 stelle su 5 su oltre 14.000 recensioni.

💡 Nota: WPForms Lite è completamente gratuito, ma avrai bisogno della versione premium per utilizzare il campo HTML. Il campo HTML è disponibile a partire dal piano Basic (49,50 $/anno). Una volta effettuato l'aggiornamento, avrai accesso a più di 2.100 modelli di moduli. Per altre funzionalità avanzate come la logica condizionale, avrai bisogno del piano Pro (199,50 $/anno) o superiore.
In qualità di lettore di WPBeginner, puoi utilizzare il nostro coupon WPForms per ottenere uno sconto del 50%.
Questa è l'opzione migliore se vuoi creare il modulo visivamente ma hai bisogno di inserire elementi HTML specifici, come un link, un formato di testo o un tooltip, utilizzando il codice.
Ad esempio, potresti usare HTML personalizzato per mostrare un breve messaggio di avviso su un modulo di checkout con un link alla tua pagina 'Politica di rimborso e resi'.
Oppure puoi aggiungere una barra di avanzamento per far sapere agli utenti quanto manca al completamento del modulo. L'HTML personalizzato può persino permetterti di inserire emoji o aggiungere un tooltip.
In questo metodo, ti mostreremo come aggiungere snippet di codice HTML per personalizzare i tuoi moduli WordPress utilizzando WPForms, il miglior costruttore di moduli per WordPress.
Altro su WPForms
WPForms è il costruttore di moduli WordPress più popolare, con oltre 6 milioni di installazioni attive.
Oltre al suo costruttore drag-and-drop, include una vasta libreria di addon e integrazioni che possono estendere i tuoi moduli senza richiedere sviluppo personalizzato. Ad esempio, puoi:
- Tracciare e recuperare i moduli abbandonati (piano Elite)
- Creare moduli conversazionali (piano Pro)
- Eseguire sondaggi e quiz (piano Pro)
- Accettare pagamenti tramite Stripe, PayPal, Square e Authorize.Net (piano Plus)
- Raccogliere firme digitali (piano Pro)
- Registrare automaticamente utenti WordPress (piano Pro)
La versione gratuita WPForms Lite include il costruttore di moduli principale e i campi di base. Il campo HTML utilizzato in questo tutorial richiede una licenza premium (Basic o superiore). La disponibilità varia in base al piano: il campo HTML è disponibile da Basic (49,50 $/anno), e la maggior parte degli addon avanzati richiede Pro (199,50 $/anno) o Elite (299,50 $/anno).
Su WPBeginner, utilizziamo WPForms per moduli di contatto, sondaggi annuali e moduli di richiesta di migrazione del sito perché rende la creazione e la gestione dei moduli molto più semplice rispetto alla codifica manuale.
Ottieni maggiori informazioni su questo plugin nella nostra recensione dettagliata di WPForms.
Prima di iniziare, assicurati di avere un account WPForms con una licenza premium che includa il campo HTML (piano Basic o superiore).
Sul sito web di WPForms, fai clic sul pulsante 'Get WPForms Now', scegli un piano che includa il campo HTML (licenza Basic o superiore a 49,50 $/anno o più) e completa il checkout.
Dopo la registrazione, avrai il tuo pannello WPForms, dove potrai scaricare il file zip di WPForms e copiare la tua chiave di licenza.

Ora sei pronto per installare e attivare WPForms sul tuo sito web WordPress.
Dal tuo pannello WordPress, vai su Plugin » Aggiungi Nuovo e fai clic sul pulsante 'Carica plugin' in alto.

Ora dovresti vedere l'uploader di file.
Fai clic su 'Scegli file' per caricare il tuo file zip di WPForms dal tuo computer locale. Dopodiché, fai semplicemente clic su 'Installa ora' e poi su 'Attiva'.

Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin WordPress.
Dopo l'attivazione, puoi navigare su WPForms » Impostazioni per inserire il tuo codice di licenza. Dopo aver inserito la chiave, fai semplicemente clic sul pulsante 'Verifica chiave' per avviare la verifica.

Una volta fatto, puoi iniziare a creare il tuo modulo e aggiungere HTML personalizzato.
Per questa guida, ti mostreremo come aggiungere un semplice tooltip al tuo modulo di contatto.
Un tooltip è come una piccola finestra pop-up che appare quando si passa il mouse sopra un elemento web. È utile perché consente agli utenti di saperne di più su un elemento web specifico senza fare clic o abbandonare la pagina su cui si trovano.
Ma prima, creiamo il modulo di contatto. Vai semplicemente su WPForms » Aggiungi Nuovo dalla tua area di amministrazione di WordPress per iniziare.

Questo aprirà il pannello ‘Configurazione’, dove dovrai prima dare un nome al tuo modulo. Questo nome è solo per riferimento interno, quindi puoi usare quello che vuoi.
Il passo successivo è selezionare come vuoi costruire il tuo modulo.
Con WPForms, puoi creare moduli utilizzando il generatore di moduli AI (piano Basic o superiore), un modello predefinito o da zero.
Se desideri utilizzare il generatore basato sull'intelligenza artificiale, tutto ciò che devi fare è inserire un semplice prompt. L'IA creerà quindi il modulo per te in pochi secondi.

Per questo tutorial, tuttavia, utilizzeremo un modello predefinito.
Poiché ci sono oltre 2.100 modelli di moduli tra cui scegliere, puoi usare la barra di ricerca per filtrarli rapidamente. Per farlo, digita semplicemente 'Modulo di contatto' e attendi il completamento della ricerca.
Se desideri esplorare ogni risultato di ricerca per vedere com'è il modulo, puoi sfruttare la funzione di anteprima. Passa semplicemente il mouse sul modello di modulo e fai clic su 'Visualizza demo'.
Una volta trovato il modulo di contatto perfetto per le tue esigenze, passaci sopra ancora una volta e fai clic su 'Usa modello'.

Questo aprirà il costruttore di moduli.
Ora, tutti gli strumenti di personalizzazione si trovano nel pannello di sinistra e l'anteprima live del modulo si trova sul lato destro dello schermo.
In questa pagina, puoi utilizzare la funzione drag-and-drop per aggiungere elementi dal pannello di sinistra all'anteprima live. Puoi anche utilizzare la funzione per spostare i campi nell'anteprima live.
Proviamo ad aggiungere il campo HTML al modulo. Tutto ciò che devi fare è scorrere verso il basso il pannello di sinistra e quindi trascinare e rilasciare 'HTML' sul modulo.

Dopo aver inserito il campo HTML, puoi fare clic su di esso per aprire le sue opzioni di personalizzazione. Qui, la prima cosa da fare è compilare l''Etichetta' del campo. Puoi anche lasciarla vuota.
Quindi, inserirai il codice HTML personalizzato nel campo 'Codice'.
Per creare un tooltip, puoi usare il tag <span> o semplicemente copiare il seguente codice e incollarlo nel campo 'Codice':
<span title="We have cool stuff to share every week. :)">Hi there! We have an email newsletter you might want to subscribe to. Let us know in the Comment or Message field, and we'll sign you up.</span>
Questo è solo codice di esempio, quindi sentiti libero di modificare il testo per adattarlo alle tue esigenze. La parte title="" del codice è esattamente ciò che dice al browser web di creare l'effetto pop-up al passaggio del mouse!
🧑💻 Importante: Se desideri aggiungere direttamente gli utenti alla tua mailing list, dovrai integrare il modulo con un provider di email marketing. Per farlo, consulta la nostra guida su come usare un modulo di contatto per far crescere la tua lista email in WordPress.
Tieni presente che le integrazioni di email marketing (Mailchimp, AWeber, Constant Contact) richiedono il piano Plus ($99,50/anno) o superiore.
Tieni presente che WPForms non visualizza il codice HTML nell'anteprima del modulo. Per visualizzare in anteprima il campo e assicurarti che tutto sia corretto, puoi salvare prima le modifiche e fare clic su 'Anteprima'.

Questo ti porterà in una nuova scheda.
Ora, testiamo se lo snippet di codice HTML per il tuo tooltip funziona correttamente. Passa semplicemente il mouse sopra il testo e attendi che il tooltip appaia per alcuni secondi.

Quando sei soddisfatto del risultato, puoi tornare al modulo per finalizzare il tuo modulo.
Le impostazioni di notifica e conferma del tuo modulo sono già impostate in WPForms. Tuttavia, se desideri personalizzarle, vai su 'Impostazioni' e poi su 'Notifiche' o 'Conferme'.
Nella sezione 'Notifiche', puoi aggiungere più destinatari per l'invio del tuo modulo di contatto.
Per aggiungere più destinatari, separa gli indirizzi email con virgole: email1@example.com, email2@example.com, email3@example.com. Puoi anche passare il mouse sopra il pulsante del punto interrogativo accanto al campo 'Invia all'indirizzo email' per istruzioni aggiuntive.

Puoi anche modificare il testo predefinito per la riga dell'oggetto della tua email.
Ad esempio, noi abbiamo cambiato il nostro da ‘Nuovo invio: Modulo di contatto’ a ‘Hai ricevuto un'email: Nuovo contatto’.

Una volta personalizzate le notifiche, dovrai passare al pannello ‘Conferma’.
Per impostazione predefinita, WPForms imposta il tuo tipo di conferma su ‘Messaggio’ e ha il testo predefinito pronto per te. Puoi assolutamente modificare queste impostazioni se lo desideri.
Oltre a mostrare un messaggio di conferma, puoi reindirizzare gli utenti a una nuova pagina o a un URL specifico.

Una volta impostato tutto, è ora di pubblicare e incorporare il modulo WordPress.
Fai clic sul pulsante arancione 'Incorpora' nell'angolo in alto a destra del generatore di moduli per iniziare la pubblicazione.
WPForms ti chiederà quindi se desideri aggiungere il modulo a una pagina esistente o a una nuova. In questa guida, sceglieremo 'Seleziona pagina esistente'.

Nella finestra pop-up successiva, sceglierai una pagina dall'elenco delle pagine disponibili. Dopodiché, puoi fare clic su 'Iniziamo!' per andare all'editor a blocchi della pagina.
Ora, puoi passare il mouse sopra un'area tra i blocchi e fare clic sul pulsante '+', oppure fare clic sull'icona dell'inseritore di blocchi nella barra degli strumenti in alto a sinistra. Fai clic e seleziona il blocco WPForms.

Quindi, puoi scegliere un modulo dal menu a discesa del blocco WPForms.
Una volta selezionato un modulo, WPForms lo caricherà nell'area di contenuto selezionata. Se desideri mostrare il titolo del modulo, puoi recarti nella scheda 'Blocco' nel pannello di destra e attivare lo slider 'Mostra Titolo'.

Quando sei soddisfatto di tutto, procedi e premi il pulsante 'Aggiorna'.
E fatto! Hai aggiunto HTML personalizzato al tuo modulo di contatto WPForms e l'hai reso live sul tuo sito web WordPress.
Ora, gli utenti possono iniziare a compilare il modulo e possibilmente iscriversi alla tua newsletter.

Per vedere tutte le sottomissioni dei tuoi moduli WPForms, vai su WPForms » Tutti i moduli.
Quindi, puoi passare il mouse su 'Modulo di contatto' o su qualsiasi modulo dall'elenco e fare clic su 'Voci' quando appare il pulsante.

Nella schermata successiva, dovresti essere in grado di vedere tutte le sottomissioni del tuo modulo.
La tabella dettaglia tutte le informazioni che gli utenti hanno inviato con il modulo, nonché l'ora della sottomissione.
Ad esempio, il 2 luglio intorno alle 8 del mattino, 'Utente 3' ha detto di voler iscriversi alla newsletter via email e ha lasciato una domanda su come contattare il nostro team di assistenza clienti.

Possiamo anche vedere la colonna ‘Azioni’. In questa colonna, ci sono diversi pulsanti: ‘Visualizza’, ‘Modifica’, ‘Spam’ e ‘Cestina’.
Se fai clic su ‘Visualizza’, WPForms ti porterà alla pagina di panoramica dedicata di una voce. In questa pagina, il plugin ti incoraggia ad attivare due componenti aggiuntivi.
Il primo è il componente aggiuntivo Geolocation per tracciare da dove l'utente invia il modulo. Il secondo è il componente aggiuntivo User Journey, che può aiutarti ad analizzare il percorso dell'utente attraverso il tuo sito fino a quando non fa clic sul pulsante 'Invia'.
Consigliamo di installare e attivare questi componenti aggiuntivi per prestazioni ottimali del modulo. Tieni presente che entrambi i componenti aggiuntivi sono disponibili nelle licenze Pro (199,50 $/anno) o superiori.
I pulsanti 'Spam' e 'Cestino' sono utili per contrassegnare le sottomissioni false e rimuoverle dalle tue voci. Per saperne di più sulla riduzione delle sottomissioni di moduli falsi, puoi leggere la nostra guida su come bloccare lo spam dei moduli di contatto.
Suggerimento bonus: Caricare una pagina HTML personalizzata su WordPress
Potresti anche cercare un modo per caricare una pagina HTML personalizzata sul tuo sito WordPress. Questo può essere utile se hai un modello statico che desideri utilizzare o una pagina HTML da un vecchio sito web.
In generale, puoi caricare una singola pagina HTML senza file CSS o immagini separati utilizzando un plugin File Manager o un client FTP.
Tuttavia, se la pagina che desideri caricare include file CSS e immagini separati, dovrai caricarli in una cartella, mantenendo la stessa struttura di directory utilizzata nel tuo file HTML.
AIOSEO, il miglior plugin SEO per WordPress, può aiutare i motori di ricerca a trovare la tua pagina HTML personalizzata aggiungendola alle tue sitemap XML.

Per saperne di più, consulta la nostra guida per principianti su come caricare una pagina HTML su WordPress senza errori 404.
Domande frequenti: Come aggiungere moduli HTML in WordPress
Abbiamo risposto ad alcune domande comuni per aiutarti ad aggiungere facilmente moduli HTML a WordPress.
Perché il mio modulo HTML non funziona su WordPress?
Questo è un problema comune. In WordPress, incollare semplicemente un modulo HTML di solito non è sufficiente per farlo funzionare.
Sebbene il modulo possa essere visualizzato correttamente, WordPress non elabora automaticamente le richieste del modulo. A differenza di un sito HTML di base, non esiste uno script integrato per gestire i dati quando qualcuno fa clic su Invia.
Per rendere il modulo funzionale, dovrai aggiungere codice PHP personalizzato per elaborare le richieste o utilizzare un plugin che gestisca questo per te.
Come posso assicurarmi che le mie richieste di modulo vengano elaborate correttamente?
L'opzione più semplice è utilizzare un plugin per moduli di contatto come WPForms o Formidable Forms. Questi plugin gestiscono tutto dietro le quinte, inclusi il salvataggio delle voci, l'invio di notifiche via email e il blocco dello spam, in modo che tu non debba configurare tutto da solo.
Posso comunque personalizzare i miei moduli se uso l'HTML?
Sì, assolutamente. L'utilizzo di HTML ti dà il pieno controllo su come il tuo modulo appare e funziona. Tieni presente che sarai anche responsabile di tutto il resto, come ad esempio:
- Styling del modulo con il tuo CSS
- Aggiunta di validazione, messaggi di errore o logica condizionale con codice personalizzato
- Assicurarsi che il modulo funzioni correttamente su diversi dispositivi e browser
Quindi sì, hai piena flessibilità, ma anche piena responsabilità.
Risorse aggiuntive: Altre guide sui moduli di WordPress
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere moduli HTML in WordPress. Successivamente, potresti voler consultare le nostre guide su:
- Come Creare un Modulo di Prenotazione in WordPress (Metodi Semplici)
- Come creare moduli multilingue in WordPress
- Come creare moduli conversazionali in WordPress
- Come esportare le voci dei moduli di WordPress in CSV ed Excel
- Guida definitiva all'uso dei moduli WordPress
Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.

Jiří Vaněk
Dato che uso WP Forms, mi piace il secondo metodo che utilizza questo plugin. Ho alcuni codici HTML per i moduli forniti dall'IA per i miei scopi, ed ero esitante sul fatto di aggiungerli al sito web. Inizialmente, avevo considerato di usare Elementor come strumento principale per inserire il modulo sul sito, ma vedendo che WP Forms gestisce la stessa funzione in modo eccellente, il problema è risolto. Posso usare WP Forms senza dover installare Elementor inutilmente, risparmiandomi fatica, spazio sull'FTP e migliorando le prestazioni del sito web.
Moinuddin Waheed
I think using html forms through the wpforms is the logical choice as we have complete familiarity of the wpforms dashboard.
It becomes very easy to insert the code and then use it with the help of wpforms.
earlier it used to be herculean task of adding html forms code and actually using it in wordpress websites.
Jiří Vaněk
Sì, devo ammettere che ora sembra facile perché ho letto questa guida. Tuttavia, prima di ciò, ho provato ad aggiungere moduli usando Elementor, e non è stato eccezionale perché alcune cose funzionavano correttamente e altre no. Usare Elementor come intermediario non è stata una buona scelta per me. Personalmente, non mi aspettavo di poter usare WP Forms per gli stessi scopi perché lo consideravo una soluzione finita che crea solo moduli e non ti permette di aggiungere un modulo HTML predefinito. Ma si è sempre sorpresi da ciò che non si sa. Altrimenti, sono completamente d'accordo. Era un compito davvero difficile per me, ma dopo aver provato WP Forms, si è ridotto a un'operazione semplice. Amo questo plugin.