Come aggiungere moduli HTML in WordPress (2 metodi)

Vuoi scrivere il tuo markup del modulo invece di trascinare i campi in un generatore visivo?

Buone notizie: non è necessario scrivere alcun PHP per far funzionare quel modulo. Puoi lasciare che un plugin leggero gestisca l'elaborazione mentre scrivi tu stesso ogni tag. In alternativa, puoi creare il modulo visivamente e inserire HTML personalizzato esattamente dove ne hai bisogno.

In questa guida, ti mostreremo come creare un modulo HTML personalizzato che funzioni in WordPress.

Cosa sono i moduli HTML e perché crearne uno?

Un modulo HTML raccoglie le informazioni dei visitatori, come nomi, email e feedback, proprio come qualsiasi altro modulo sul web. Ciò che lo distingue è *come* è costruito. Invece di fare affidamento su un pesante editor visivo drag-and-drop, crei un modulo HTML con codice semplice. Ciò significa che digiti tu stesso i campi (come caselle di testo, caselle di controllo e menu a discesa).

Le persone che usano moduli HTML invece di un generatore di moduli drag-and-drop di solito lo fanno per massimizzare le prestazioni del loro sito web. I moduli HTML semplici mantengono le pagine web leggermente più veloci. Oltre alla velocità, scrivere il codice da soli ti dà il controllo totale del design. Invece di essere limitato dalle rigide impostazioni di un generatore, puoi personalizzare il layout esattamente secondo le tue esigenze.

La maggior parte degli utenti WordPress scopre che i plugin per la creazione di moduli drag-and-drop offrono la migliore esperienza utente. Ottieni la personalizzazione HTML completa senza la complicazione della configurazione manuale del server.

Ecco tutto ciò che tratteremo in questa guida:

Metodo 1: Aggiungere moduli HTML in WordPress con un plugin

🎖️ Ideale per: Sviluppatori e gestori di siti che desiderano il controllo HTML completo con una soluzione leggera e focalizzata sulle prestazioni. Il plugin enfatizza la semplicità e la velocità rispetto ai generatori di moduli visivi.

Puoi aggiungere un modulo HTML a WordPress utilizzando un plugin gratuito per moduli come HTML Forms. Questo plugin gestisce il PHP e una piccola parte di JavaScript necessaria per eseguire un modulo HTML in WordPress, pur dandoti la totale libertà di scrivere tu stesso l'HTML.

La versione gratuita copre tutto in questo tutorial, incluse le notifiche via email e l'archiviazione delle tue sottomissioni. Anche la protezione antispam è gratuita.

Per iniziare, installa il plugin sul tuo sito WordPress. Se hai bisogno di aiuto, segui la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, vai su HTML Forms » Aggiungi Nuovo per iniziare a creare il tuo modulo.

Digita un nome per il tuo modulo nel campo 'Titolo modulo'. In questa guida, stiamo creando un semplice modulo di contatto, quindi abbiamo chiamato il nostro 'Modulo di Contatto'.

Quindi, fai clic sul pulsante Crea Modulo.

Una volta fatto ciò, apparirà la pagina 'Modifica Modulo' e potrai iniziare a personalizzare il tuo modulo HTML.

Nella parte superiore della pagina, vedrai i dettagli del tuo modulo, inclusi il titolo del modulo, slug, e shortcode. Sotto questi dettagli, troverai cinque schede: 'Campi', 'Messaggi', 'Impostazioni', 'Azioni' e 'Sottomissioni'.

La scheda 'Campi' contiene dieci pulsanti che generano il codice del tuo campo.

In fondo a questa scheda, troverai un modulo HTML predefinito insieme a un'anteprima.

Il modulo predefinito è piuttosto semplice. Ha 4 campi in cui gli utenti possono digitare il loro nome, indirizzo email, un breve oggetto e un messaggio.

Per aggiungere un nuovo campo, fai clic sul pulsante corrispondente appena sopra la casella 'Codice Modulo'.

In questo tutorial sostituiremo il campo Oggetto con un campo a discesa.

Fai clic su 'Dropdown' per aprire le sue impostazioni. Quindi, digita la tua domanda nella casella 'Etichetta campo' e aggiungi una scelta per tipo di richiesta, come 'Domanda generale', 'Vendite' e 'Supporto'.

Dopo aver inserito queste informazioni, fai clic su 'Aggiungi Campo al Modulo'.

Vedrai quindi il nuovo tag a discesa apparire nella casella 'Codice Modulo'. Scorri verso il basso per controllare il tuo markup aggiornato.

Per rendere il modulo user-friendly, posizioniamo il campo a discesa direttamente sotto il campo ‘La tua email’. Poiché questo plugin non dispone di un costruttore drag-and-drop, dovrai tagliare il codice dal costruttore di codice e incollarlo dove vuoi posizionarlo.

Per rimuovere il campo Oggetto, elimina l'intero blocco di paragrafi contenente il campo Oggetto.

Una volta terminato, vorrai controllare il pannello ‘Anteprima modulo’.

Se non riesci a vederlo, fai clic sul link ‘Mostra anteprima modulo’.

Questa anteprima dal vivo ti consente di confermare che le tue modifiche hanno funzionato senza compromettere il layout.

Puoi verificare rapidamente che il campo Oggetto sia scomparso e testare che il tuo nuovo menu a discesa funzioni correttamente.

Successivamente, fai clic sul pulsante blu ‘Salva modifiche’.

Ora, potresti voler controllare la configurazione del modulo. Fai clic sulla scheda ‘Messaggi’ per vedere come HTML Forms configura i messaggi di conferma dell'invio del modulo.

Questa scheda ti consente di personalizzare i messaggi di conferma che gli utenti vedranno.

Se sei soddisfatto del testo predefinito, puoi lasciarlo. Altrimenti, apporta le tue modifiche e quindi fai clic su Salva modifiche.

Per impostazione predefinita, un nuovo modulo salva le tue voci nel database, ma non ti invierà un'email quando qualcuno lo invia.

Per risolvere questo problema, fai clic sulla scheda Azioni. Vedrai un avviso che dice ‘Nessuna azione del modulo configurata per questo modulo.’

Fai clic su ‘Invia email’.

I campi ‘Da’, ‘A’ e ‘Messaggio’ sono tutti obbligatori. Puoi utilizzare i campi variabili elencati direttamente sotto la casella Messaggio per inserire automaticamente le informazioni che il visitatore ha digitato nel tuo modulo.

Dopo averli compilati, fai clic su ‘Salva modifiche’. Ora riceverai un'email ogni volta che qualcuno invia il tuo modulo.

Una volta configurato tutto, tutto ciò che devi fare è pubblicare il tuo modulo HTML. Vai alla pagina o al post in cui desideri incorporare il modulo. Quindi, passa il mouse sopra l'area in cui desideri inserire il modulo e fai clic sul pulsante ‘+’.

Da qui, inizia a digitare ‘HTML Forms’ nella barra di ricerca. Quando appare il blocco giusto, fai clic per aggiungerlo alla tua pagina o al tuo post.

All'interno del blocco HTML Forms, fai clic sul menu a discesa e scegli il modulo che desideri visualizzare.

Una volta selezionato il modulo dal menu a discesa, fai clic sul pulsante ‘Aggiorna’.

Il tuo modulo di contatto è ora attivo. Ecco come apparirà ai tuoi visitatori:

Prima di promuovere il modulo ovunque, ti consigliamo di testarlo tu stesso inviando una voce di esempio. Questo è il modo in cui confermi che il modulo non solo viene visualizzato, ma viene effettivamente consegnato.

Dopo aver inviato una voce di test, vai su HTML Forms » Tutti i moduli. Qui, fai clic sul link ‘Invii’ del tuo modulo.

Questo mostra tutti gli invii del tuo modulo. La tua voce di test apparirà nella tabella e dovresti anche ricevere una notifica nella tua casella di posta.

La tabella ‘Invii’ si apre con una colonna ‘Timestamp’ che ti dice quando è stato inviato il modulo, seguita da una colonna per ogni campo.

Metodo 2: Aggiungere HTML personalizzato ai moduli con Drag & Drop

🎖️ Ideale per: Chiunque voglia creare un modulo visivamente ma abbia comunque bisogno di inserire HTML specifico, come un tooltip, un link o una nota formattata.

Quando si tratta di creare moduli, consigliamo WPForms. Ti offre un generatore drag and drop pur consentendoti di inserire il tuo markup, in modo che un link, una nota formattata o un tooltip atterri esattamente dove vuoi.

Utilizziamo WPForms sui nostri siti Web per moduli di contatto, generazione di lead, sondaggi annuali e altro ancora.

WPForms Lite è completamente gratuito, ma il campo HTML utilizzato in questo metodo è una funzionalità a pagamento. È disponibile nel piano Basic (39,60 $/anno) e superiori.

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

Per iniziare, installa e attiva WPForms.

Una volta fatto, puoi iniziare a creare moduli e aggiungere HTML personalizzato. Per questa guida, ti mostreremo come aggiungere un semplice tooltip al tuo modulo di contatto.

Per iniziare, creiamo il modulo di contatto andando su WPForms » Aggiungi Nuovo.

Nel pannello Impostazioni, inizia dando un nome al tuo modulo.

Questo nome è solo per riferimento interno, quindi puoi usare quello che vuoi.

Il passo successivo è decidere come vuoi costruire il tuo modulo. Con WPForms, puoi partire da un modello predefinito, costruire da zero o descrivere ciò di cui hai bisogno e lasciare che il generatore di moduli AI lo assembli per te.

Se vuoi usare il generatore basato sull'intelligenza artificiale, inserisci semplicemente un prompt semplice. L'IA creerà quindi il modulo per te in pochi secondi.

Per questo tutorial, 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.

Per dare un'occhiata più da vicino a un modello, puoi utilizzare la funzione di anteprima integrata. Passa semplicemente il mouse sopra qualsiasi 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 avvierà il generatore di moduli. Vedrai tutti gli strumenti di personalizzazione nel pannello di sinistra e un'anteprima live sulla destra.

Puoi trascinare gli elementi dal pannello di sinistra e rilasciarli sull'anteprima live. Puoi anche riorganizzare gli elementi nell'anteprima usando il drag and drop.

Scorri verso il basso il pannello di sinistra fino al gruppo Campi Fantasia, quindi trascina e rilascia il campo HTML direttamente sul tuo modulo.

Dopo aver aggiunto il campo HTML, fai clic su di esso per aprire le sue opzioni di personalizzazione.

Per iniziare, digita un 'Etichetta' per aiutarti a identificare questo campo. Questo è solo per il tuo riferimento e non viene mostrato ai visitatori, quindi puoi usare quello che vuoi. Puoi anche lasciare il campo vuoto.

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 modificarlo per soddisfare le tue esigenze. La parte title="" del codice è esattamente ciò che dice al browser Web di creare l'effetto pop-up al passaggio del mouse, in modo da ottenere il tooltip senza aggiungere alcun CSS al tuo sito.

Nota che WPForms non visualizza il codice HTML nell'anteprima del generatore di moduli. Per testare il tooltip, fai clic su 'Anteprima'.

Questo aprirà una nuova scheda.

Qui, puoi testare che lo snippet di codice HTML per il tuo tooltip funzioni correttamente passando il mouse sopra il testo. Dopo qualche istante, dovrebbe apparire il tooltip.

Quando sei soddisfatto dei risultati, puoi tornare al generatore di moduli per finalizzare il tuo modulo.

WPForms configura automaticamente le impostazioni di notifica e conferma per te. Tuttavia, se desideri personalizzarle, seleziona 'Impostazioni' e poi '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, come email1@example.com, email2@example.com, email3@example.com.

Una volta personalizzate le notifiche e le altre impostazioni, è ora di pubblicare e incorporare il modulo WordPress.

Fai clic sul pulsante 'Incorpora' nell'angolo in alto a destra del generatore di moduli.

WPForms ti chiederà quindi se desideri aggiungere il modulo a una pagina esistente o a una nuova pagina.

In questa guida, sceglieremo 'Seleziona pagina esistente'.

Nella finestra pop-up successiva, scegli una pagina dall'elenco delle pagine disponibili. Dopodiché, puoi fare clic su 'Andiamo!' per aprire l'editor a blocchi.

Ora, passa il mouse sopra l'area in cui desideri aggiungere il modulo e fai clic sul pulsante '+'. Quindi, seleziona il blocco WPForms.

Ora puoi scegliere il modulo che desideri visualizzare, utilizzando il menu a discesa.

Dopo aver selezionato il tuo modulo, WPForms lo caricherà nell'editor a blocchi.

Quando sei soddisfatto di come è tutto impostato, fai clic sul pulsante 'Aggiorna'.

E fatto! Hai aggiunto HTML personalizzato al tuo modulo di contatto WPForms e l'hai reso live sul tuo sito web WordPress.

Prima di inviare visitatori reali al modulo, ti consigliamo di inviare una rapida voce di test per assicurarti che tutto funzioni.

Dopo aver inviato un test, vai su WPForms » Tutti i moduli. Qui, passa il mouse sopra il tuo modulo di contatto e fai clic su 'Voci' quando appare.

Nella schermata successiva, vedrai tutte le tue sottomissioni di moduli.

La tabella mostra ogni informazione inviata dagli utenti, insieme all'ora esatta di invio.

Domande frequenti: Come aggiungere moduli HTML in WordPress

Perché il mio modulo HTML non funziona su WordPress?

Molto probabilmente, WordPress sta visualizzando il tuo modulo ma non lo sta elaborando. Incollare semplicemente un modulo HTML in una pagina 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.

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

Sì, assolutamente. L'utilizzo dell'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:

• 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 esportare le voci dei moduli di WordPress in CSV ed Excel
• Come personalizzare e stilizzare i tuoi moduli WordPress
• I migliori plugin per moduli di contatto di WordPress

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.