Come aggiungere moduli HTML in WordPress (2 metodi)

Hai mai aggiunto un modulo HTML al tuo sito WordPress, solo per scoprire che sembra a posto ma in realtà non funziona? Non sei solo.

Molti proprietari di siti riscontrano questo problema frustrante, chiedendosi perché il loro modulo non invii le sottomissioni o non si connetta correttamente.

La ragione è semplice: WordPress non tratta i moduli allo stesso modo di un sito web HTML standard. Quindi, se copi e incolli semplicemente un modulo HTML grezzo, di solito non funzionerà senza passaggi aggiuntivi.

Sui nostri siti, utilizziamo il plugin WPForms perché gestisce tutta la configurazione dietro le quinte per noi. Tuttavia, sappiamo che molti utenti preferiscono lavorare con moduli HTML personalizzati per mantenere le cose leggere, mantenere il pieno controllo sul codice e ridurre la dipendenza dai plugin.

In questa guida, ti mostreremo 2 modi comprovati per aggiungere moduli HTML a WordPress e assicurarti che funzionino effettivamente. Sia che tu sia appena agli inizi o che tu abbia familiarità con il codice, sarai in grado di creare un modulo funzionante senza tutti i tentativi ed errori. 💡

Cosa sono i moduli HTML e perché crearne uno?

I moduli HTML funzionano in modo simile ad altri moduli di siti web. Consentono ai visitatori di digitare e inviare informazioni come nomi, indirizzi email, feedback, ordini e altro.

Ciò che li distingue è che i moduli HTML vengono creati utilizzando codice HTML invece di un editor visivo drag-and-drop come un plugin per moduli. Quindi, dovrai definire tu stesso campi come caselle di testo, caselle di controllo, pulsanti di opzione e menu a discesa. Decidi tu come appariranno e imposti regole specifiche su come funzionano.

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 fare pratica con la programmazione, presenta anche delle sfide.

Potresti avere problemi con la compatibilità tra browser, dove il modulo funziona in modo diverso su diversi browser web.

Inoltre, sulla base della nostra esperienza, la gestione della convalida dei moduli con JavaScript può essere complicata. Richiede test approfonditi per garantire che sia possibile raccogliere ed elaborare correttamente tutti gli input dell'utente.

Detto questo, ci sono modi per aggiungere moduli HTML senza queste complessità. Quindi, non importa se stai gestendo un blog WordPress, un sito aziendale o un negozio online, puoi facilmente aggiungere moduli HTML al tuo sito senza dover programmare 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)

Un modo semplice per aggiungere un modulo HTML a un sito web WordPress è utilizzare un plugin gratuito per moduli come HTML Forms. È un ottimo strumento per creare e configurare moduli HTML in un unico posto, quindi non dovrai occuparti di alcuna configurazione lato server.

In questa guida, utilizzeremo la versione gratuita del plugin, che include tutto il necessario per creare un modulo HTML.

Per iniziare, assicuriamoci che il plugin sia installato sul tuo sito web WordPress. 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 Moduli HTML » Aggiungi Nuovo nella tua bacheca 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 semplicemente 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.

In cima alla scheda, vedrai i dettagli del tuo modulo, inclusi il titolo del modulo, lo slug e lo shortcode. Non devi memorizzare questi dettagli, poiché saranno disponibili nella bacheca Moduli HTML 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.

Scorriamo 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 per l'iscrizione a una newsletter via email. Quindi fai semplicemente clic su uno dei pulsanti di campo sopra ‘Codice Modulo’.

Ad esempio, utilizzeremo un campo a discesa e creeremo un'opzione 'Sì/No'.

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 il campo a discesa sia appena sotto il campo 'Email'.

Per spostarlo, puoi tagliare il tag del campo a discesa dal primo tag <p> all'ultimo </>. Quindi, procedi e incollalo appena sotto il tag 'Email'.

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 il suo tag dal primo <p> all'ultimo </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. 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 hai apportato 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 live dal tuo sito web WordPress. Oppure, digita 0 nel campo per mantenere gli utenti sulla pagina dopo un invio del modulo riuscito.

Quando tutto è impostato, non resta che aggiungere il modulo di contatto HTML a una pagina WordPress.

Andiamo su Articoli o Pagine » Tutti gli Articoli o Tutte le Pagine dalla dashboard 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, passaci sopra il mouse e fai clic sul pulsante '+' per aggiungere il blocco HTML Forms.

Ora, puoi digitare 'HTML Forms' nella barra di ricerca 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'.

Ecco fatto! Il tuo modulo è ora attivo e gli utenti possono iscriversi alla tua newsletter.

Ecco come potrebbe apparire sul tuo sito web:

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.

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

Un altro approccio alla creazione di moduli HTML è l'utilizzo di un generatore di moduli. Sebbene questo metodo non ti permetta di codificare i tuoi moduli da zero, ti consente di personalizzarli aggiungendo frammenti di codice HTML.

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 sono lontani dal completamento del modulo. L'HTML personalizzato può persino permetterti di inserire emoji o aggiungere un tooltip.

In questo metodo, ti mostreremo come aggiungere frammenti di codice HTML per personalizzare i tuoi moduli WordPress utilizzando WPForms, il miglior generatore di moduli per WordPress.

Sul nostro sito WPBeginner, ci affidiamo ad esso per moduli di contatto, sondaggi annuali e richieste di migrazione del sito. Ottieni maggiori informazioni su questo plugin su la nostra recensione dettagliata di WPForms.

WPForms è dotato di add-on completi con un clic e integrazioni di terze parti. Ad esempio, puoi installare l'add-on Form Abandonment per tracciare e ridurre l'abbandono dei moduli e molto altro ancora!

Quindi, WPforms rende l'estensione della funzionalità del tuo modulo più facile rispetto a se avessi codificato manualmente il tuo modulo WordPress da zero.

Prima di iniziare, assicuriamoci che tu abbia WPForms installato e attivato sul tuo sito web WordPress. 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 passi 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 tuo riferimento, 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, 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, lo dimostreremo utilizzando un modello predefinito.

Poiché ci sono oltre 2.000 modelli di moduli tra cui scegliere, puoi utilizzare 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.

Su questa intera pagina, puoi utilizzare la funzione di trascinamento della selezione per aggiungere elementi dal pannello di personalizzazione 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 utilizzare la funzione '' 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 un codice di esempio, quindi sentiti libero di modificare la nostra copia per adattarla meglio alle tue esigenze.

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à configurate in WPForms. Tuttavia, se desideri personalizzarle, vai su ‘Impostazioni’ e poi ‘Notifiche’ o ‘Conferme’.

Nella sezione ‘Notifiche’, puoi aggiungere più destinatari per l'invio del tuo modulo di contatto.

Vedrai una breve istruzione se passi il mouse sul pulsante a forma di punto interrogativo accanto al campo ‘Invia all'indirizzo email’. Dovrai seguirla per assicurarti che la tua notifica venga inviata agli indirizzi email corretti.

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 ‘Incorpora’ 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 popup successiva, sceglierai una pagina dall'elenco delle pagine disponibili. Dopodiché, puoi fare clic su 'Iniziamo!' per accedere all'editor a blocchi della pagina.

Ora, puoi passare il mouse sull'area in cui desideri posizionare il modulo e fare clic sul pulsante '+'. Procedi 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 via email.

Per vedere tutte le sottomissioni dei moduli di WPForms, dovrai navigare 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 il tracciamento, 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 preme il pulsante ‘Invia’.

Si consiglia di installare e attivare questi componenti aggiuntivi per prestazioni del modulo più ottimizzate.

I pulsanti ‘Spam’ e ‘Cestino’ sono utili per contrassegnare le iscrizioni false e rimuoverle dalla tua voce. Per saperne di più sulla riduzione delle iscrizioni false ai moduli, 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.

La regola generale è caricare una singola pagina HTML senza file CSS o immagini separati. Tuttavia, se la pagina che desideri caricare include file CSS e immagini separati, devi inserirli in una struttura di directory.

AIOSEO, il miglior plugin SEO per WordPress, può aiutarti in questo.

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?

È un problema comune. WordPress non elabora automaticamente le richieste dei moduli come potrebbe fare un normale sito HTML abbinato a script lato server. Quindi, se incolli semplicemente un modulo HTML di base, potrebbe apparire bene, ma in realtà non farà nulla quando qualcuno preme “invia”.

Questo perché WordPress non include alcuna gestione integrata per i dati dei moduli. Su un sito HTML standard, gli sviluppatori solitamente collegano i moduli a script come form-handler.php per elaborare l'input. In WordPress, dovrai aggiungere il tuo codice PHP personalizzato o utilizzare un plugin per rendere il modulo funzionale.

In breve, visualizzare il modulo è facile, ma farlo funzionare richiede un po' di configurazione aggiuntiva.

Come posso assicurarmi che le mie richieste di modulo vengano elaborate correttamente?

Il modo più semplice è utilizzare un plugin per moduli di contatto come WPForms e Formidable Forms. Si occupa di tutte le operazioni in background, come la gestione delle richieste, l'invio di notifiche e il blocco dello spam, in modo da non dover configurare tutto manualmente.

Posso comunque personalizzare i miei moduli se uso l'HTML?

Assolutamente! Se ti senti a tuo agio a lavorare con il codice, l'uso di HTML grezzo ti dà il pieno controllo sulla struttura del tuo modulo. Tieni solo presente:

• Dovrai scrivere il tuo CSS per stilizzare elementi come layout, colori e spaziatura.
• La convalida dei moduli, i messaggi di errore o la logica condizionale richiederanno JavaScript personalizzato o codice lato server.
• E sei anche responsabile di assicurarti che il modulo funzioni su diversi browser e dispositivi.

Quindi sì, hai piena libertà, 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 RSVP in WordPress
• Come creare un modulo di prenotazione online in WordPress
• Come creare un modulo WordPress con un selettore di data
• Come creare moduli multilingue in WordPress
• Come creare moduli conversazionali in WordPress
• Come stilizzare e personalizzare i tuoi moduli 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 anche trovarci su Twitter e Facebook.