Un modulo WordPress semplice e goffo può far sembrare incompiuto anche il sito web dal design migliore e farlo apparire completamente fuori luogo.
La parte peggiore? I visitatori potrebbero sentirsi insicuri nel compilarlo se non corrisponde al resto del tuo sito.
Durante il nostro percorso nella gestione di un blog WordPress, abbiamo imparato che moduli ben progettati e brandizzati possono fare una grande differenza.
Infatti, quando abbiamo abbinato i nostri moduli ai colori e al layout del nostro sito, abbiamo visto un enorme aumento nelle richieste di moduli.
In questa guida, ti mostreremo due modi semplici ma potenti per personalizzare e stilizzare i tuoi moduli WordPress, in modo che non solo abbiano un bell'aspetto, ma funzionino anche meglio. 🚀
📚 Riepilogo: Personalizzare i tuoi moduli WordPress li aiuta ad abbinarsi al branding del tuo sito e li rende più affidabili per i tuoi visitatori. In questa guida, ti mostreremo come stilizzare i tuoi moduli utilizzando le impostazioni integrate di WPForms o aggiungendo CSS personalizzato con il plugin WPCode.
Perché personalizzare e stilizzare i tuoi moduli WordPress?
Personalizzare i tuoi moduli WordPress li aiuta ad abbinarsi al tuo brand, il che crea fiducia e può aumentare significativamente i tassi di conversione dei tuoi moduli. Stilizzando i tuoi moduli, li rendi più accattivanti visivamente e più facili da navigare per i tuoi visitatori.
Ad esempio, se aggiungi un modulo di registrazione al tuo sito web utilizzando un plugin per moduli di registrazione utente, vedrai che il suo layout è un po' noioso. Questo può non catturare l'attenzione del tuo visitatore e persino scoraggiarlo dal compilare il modulo.
Personalizzare i tuoi moduli può renderli più attraenti abbinandoli al tuo tema WordPress e al tuo branding.
Ciò può portare a maggiori conversioni perché i moduli WordPress stilizzati sono più facili da navigare e possono incoraggiare più utenti a compilarli.
I moduli stilizzati possono anche aumentare la consapevolezza del tuo marchio tra gli utenti. Ad esempio, puoi utilizzare il logo del tuo sito web e i colori distintivi della tua azienda per rendere il tuo modulo più memorabile ed efficace.
Ora, ti mostreremo come personalizzare e stilizzare facilmente i tuoi moduli WordPress, passo dopo passo.
Tratteremo due metodi in questo post e puoi utilizzare i collegamenti rapidi qui sotto per passare a quello che desideri utilizzare:
- Method 1: How to Customize and Style WordPress Forms With WPForms (Code-Free Method)
- Method 2: How to Style WordPress Forms With CSS (Advanced Customization)
- Suggerimento bonus 🧑💻: Come creare facilmente pagine web personalizzate
- Domande frequenti sulla personalizzazione e stilizzazione dei moduli WordPress
- Altre guide all'uso dei moduli in WordPress
Iniziamo!
Metodo 1: Come personalizzare e stilizzare i moduli WordPress con WPForms (Metodo senza codice)
WPForms è il miglior plugin per moduli di contatto WordPress con un costruttore drag-and-drop. Offre oltre 2.000 temi predefiniti e opzioni di personalizzazione integrate per la stilizzazione dei moduli senza codice, oltre a strumenti AI per la creazione di moduli.
Usiamo WPForms su WPBeginner per moduli di contatto, migrazioni di siti web e il nostro sondaggio annuale. Per saperne di più sulla nostra esperienza, consulta la nostra recensione completa di WPForms.
Passaggio 1. Installa e attiva il plugin WPForms
Innanzitutto, registriamoci per un account WPForms.
Sul loro sito web, fai clic sul pulsante 'Get WPForms Now', scegli un piano e segui le istruzioni sullo schermo per completare la registrazione.
📝 Nota: WPForms ha anche una versione gratuita, ma i temi predefiniti e le opzioni di personalizzazione avanzate dimostrate in questa guida richiedono la versione WPForms Pro.
Ora devi installare e attivare il plugin WPForms.
Nella tua area di amministrazione di WordPress, vai su Plugin » Aggiungi Plugin.
Nella schermata successiva, puoi utilizzare la barra di ricerca per trovare rapidamente il plugin WPForms.
Fai clic su 'Installa ora' e poi su 'Attiva' per abilitarlo sul tuo sito WordPress.
Per istruzioni dettagliate, consulta la nostra guida passo passo su come installare un plugin WordPress.
Se stai utilizzando la versione Pro, visita la pagina WPForms » Impostazioni nella barra laterale di amministrazione di WordPress per inserire la tua chiave di licenza dopo l'attivazione.
Puoi trovare queste informazioni nel tuo account sul sito web di WPForms.
Successivamente, vai su WPForms » Impostazioni nella tua dashboard di amministrazione e verifica che la casella di controllo 'Usa markup moderno' sia selezionata.
Devi abilitare il Markup Moderno per sbloccare le impostazioni di progettazione avanzate e le opzioni di personalizzazione all'interno dell'editor di blocchi di WordPress.
Non dimenticare di fare clic sul pulsante 'Salva modifiche' per memorizzare le impostazioni.
Passaggio 2. Crea il tuo modulo WordPress
Da qui, dirigiamoci alla schermata WPForms » Aggiungi Nuovo dalla dashboard di amministrazione di WordPress per creare il tuo modulo.
Questo ti porterà alla pagina 'Configurazione', dove puoi iniziare digitando un nome per il tuo modulo.
Dopodiché, puoi scegliere qualsiasi modello di modulo che desideri, passarci sopra il mouse e fare clic sul pulsante 'Usa modello' sotto di esso. Per questo tutorial, creeremo e aggiungeremo un semplice modulo di contatto al nostro sito web.
Questo lancerà il modello nell'editor di moduli di WPForms, dove vedrai un'anteprima del modulo sulla destra e i campi del modulo nella colonna di sinistra.
Da qui, puoi trascinare e rilasciare qualsiasi campo modulo a tua scelta nel modulo secondo le tue preferenze. Puoi anche riorganizzare o eliminare i campi.
Per istruzioni dettagliate, consulta il nostro tutorial su come creare un modulo di contatto in WordPress.
Suggerimento dell'esperto: Poiché questo modulo raccoglie dati dei visitatori come indirizzi email e nomi, devi dichiararlo nella tua Informativa sulla privacy per rimanere conforme al GDPR.
Una volta terminato con il tuo modulo, fai semplicemente clic sul pulsante ‘Salva’ in alto per uscire dall'editor di moduli.
Passaggio 3. Personalizza il design del tuo modulo con i temi WPForms
Ora sei pronto per aggiungere il tuo modulo all'editor di blocchi e personalizzarlo. Facciamo clic sul pulsante 'Incorpora' all'interno del costruttore di moduli.
Questo aprirà la procedura guidata di incorporamento, dove puoi scegliere una delle seguenti opzioni:
- Seleziona una pagina esistente – Scegli una pagina sul tuo sito WordPress e aggiungi il modulo utilizzando il blocco WPForms.
- Crea una nuova pagina – Questo aggiunge automaticamente il modulo a una nuova pagina.
Per questa guida, sceglieremo 'Crea nuova pagina'.
Successivamente, aggiungiamo un nome per la nuova pagina, ad esempio, 'Contattaci'.
Vai avanti e fai clic su 'Iniziamo!' quando hai finito qui.
Questo aprirà l'editor della pagina con il tuo modulo già incorporato.
Per i dettagli, consulta la nostra guida su come incorporare moduli in WordPress.
Ora che hai aggiunto il modulo, è il momento di personalizzarlo e stilizzarlo.
Per fare ciò, devi aprire il pannello dei blocchi sul lato destro dello schermo e scorrere fino alla sezione ‘Temi’.
Da qui, puoi scegliere da una libreria di oltre 40 temi predefiniti per dare istantaneamente al tuo modulo un aspetto accattivante.
Successivamente, puoi scorrere fino alla sezione ‘Stili dei campi’ per personalizzare ulteriormente il tuo modulo.
Puoi selezionare la dimensione dei tuoi campi modulo dal menu a discesa e persino impostare la dimensione del bordo e il raggio.
Successivamente, puoi cambiare il colore dello sfondo, del testo e del bordo dei campi del modulo utilizzando lo strumento contagocce.
Qui, puoi utilizzare i colori distintivi del tuo marchio o altri colori utilizzati nel resto del tuo blog WordPress per creare un modulo visivamente accattivante.
Una volta fatto ciò, scorri verso il basso fino alla sezione 'Stili delle etichette', dove puoi selezionare la dimensione del carattere delle etichette dal menu a discesa.
Dopodiché, puoi anche cambiare il colore del carattere delle etichette dei campi, delle sotto-etichette e dei messaggi di errore che verranno visualizzati nel tuo modulo.
Per personalizzare il pulsante nel tuo modulo, scorri verso il basso fino alla sezione 'Stili del pulsante' e seleziona la sua dimensione dal menu a discesa.
Puoi anche impostare un raggio del bordo e cambiare il colore dello sfondo e del testo del pulsante di invio del modulo.
Una volta terminata la personalizzazione del modulo, fai semplicemente clic sul pulsante 'Aggiorna' o 'Pubblica' in alto per salvare le tue impostazioni.
Ora puoi visitare il tuo sito WordPress per vedere il modulo stilizzato in azione.
Metodo 2: Come stilizzare i moduli WordPress con CSS (personalizzazione avanzata)
Se non vuoi utilizzare le opzioni di personalizzazione offerte da WPForms o vuoi applicare personalizzazioni diverse con CSS, puoi anche utilizzare uno snippet CSS personalizzato.
Passaggio 1. Crea il tuo modulo utilizzando WPForms
Per iniziare, dovrai creare un modulo utilizzando WPForms. È il miglior plugin per moduli di contatto WordPress con un costruttore drag-and-drop, che offre oltre 2.000 modelli per aiutarti a creare rapidamente moduli di contatto, moduli di caricamento file, moduli di registrazione e moduli RSVP.
Per istruzioni dettagliate, puoi consultare il nostro tutorial su come creare un modulo di contatto in WordPress o vedere il metodo 1.
Una volta fatto ciò, recuperiamo l'ID del tuo modulo – ti servirà per il tuo snippet di codice personalizzato.
Per fare ciò, visita la pagina WPForms » Tutti i moduli nella dashboard di WordPress e copia il numero ID di WPForms del modulo che desideri stilizzare.
Passaggio 2. Installa e attiva WPCode
WPCode è il plugin per snippet di codice WordPress più sicuro e semplice per aggiungere CSS personalizzato per lo styling dei moduli. Dispone di convalida intelligente del codice per prevenire errori e offre una libreria di snippet pronti all'uso per la personalizzazione di WordPress.
Utilizziamo WPCode su WPBeginner per aggiungere e gestire snippet di codice personalizzati sui nostri siti web aziendali. Per saperne di più sulla nostra esperienza, consulta la nostra recensione completa di WPCode.
Innanzitutto, puoi creare un account WPCode. Sul sito web di WPCode, fai clic sul pulsante ‘Ottieni WPCode Ora’, seleziona un piano e segui le istruzioni sullo schermo per registrarti.
📝 Nota: WPCode ha una versione gratuita che puoi utilizzare per questo tutorial. Tuttavia, se hai bisogno di pianificazione avanzata del codice o accesso completo alla cronologia delle revisioni, avrai bisogno di WPCode Pro.
Ora, installiamo e attiviamo il plugin WPCode.
Nella tua bacheca di amministrazione di WordPress, vai su Plugin » Aggiungi Plugin.
Successivamente, puoi utilizzare la casella di ricerca per trovare rapidamente il plugin WPCode.
Quando lo vedi, fai clic sul pulsante ‘Installa ora’ e ‘Attiva’.
Per istruzioni dettagliate, consulta la nostra guida per principianti su come installare un plugin per WordPress.
Passaggio 3. Aggiungi uno snippet di codice personalizzato per personalizzare i moduli WordPress
Dopo l'attivazione, visita la pagina Snippet di codice » + Aggiungi snippet dalla dashboard di WordPress.
Quindi, passa il mouse sopra l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’ e fai clic sul pulsante ‘Usa snippet’.
Vedrai quindi un popup che ti chiede di selezionare il tuo Tipo di codice.
Scegliamo ‘Snippet CSS’.
Questo ti porterà alla pagina ‘Crea snippet personalizzato’, dove puoi iniziare digitando un nome per il tuo snippet di codice.
Successivamente, seleziona l'opzione 'Snippet CSS' dal menu a discesa nell'angolo destro dello schermo.
Successivamente, copia e incolla il seguente codice nella casella ‘Anteprima codice’. I tag !important indicano al browser di dare priorità a questi stili rispetto alle impostazioni predefinite del tuo tema:
#wpforms-0000 .wpforms-form {
background-color: #ADD8E6 !important;
font-family: 'Arial', sans-serif !important;
padding: 20px 15px !important;
border: 3px solid #666 !important;
border-radius: 20px !important;
}
Ecco come potrebbe apparire sul tuo schermo:
📝 Nota: Non dimenticare di sostituire solo il segnaposto 0000 con il numero ID del tuo modulo specifico. Assicurati di mantenere intatta la parte #wpforms- in modo che il codice funzioni correttamente.
Successivamente, puoi cambiare il codice esadecimale, come #ADD8E6, per abbinarlo al colore specifico del tuo brand. Puoi trovare questi codici utilizzando qualsiasi strumento gratuito di selezione del colore online.
Puoi anche aggiungere un font a tua scelta e configurare il padding (spaziatura interna alla casella) e il border-radius (angoli arrotondati) del modulo modificando lo snippet di codice.
Una volta fatto ciò, scorri verso il basso fino alla sezione 'Inserimento' e seleziona la modalità 'Inserimento automatico'.
Il codice verrà eseguito automaticamente sul tuo sito dopo l'attivazione.
Infine, scorri di nuovo in cima alla pagina e imposta l'interruttore su 'Attivo'.
Dopodiché, fai clic sul pulsante 'Salva snippet' per memorizzare le tue impostazioni
Ora, il modulo WordPress verrà automaticamente personalizzato in base allo snippet CSS e potrai visualizzarlo.
Tuttavia, se non hai ancora aggiunto il modulo al tuo sito web, apri semplicemente una pagina o un post nell'editor a blocchi.
Una volta lì, fai clic sul pulsante '+' nell'angolo in alto a sinistra per aprire il menu dei blocchi e aggiungere il blocco WPForms.
Dopodiché, seleziona il modulo che hai stilizzato utilizzando lo snippet CSS dal menu a discesa nel blocco stesso.
Infine, fai clic sul pulsante 'Aggiorna' o 'Pubblica' per salvare le tue impostazioni.
Ora puoi visitare il tuo sito WordPress in una finestra Incognito o Privata per vedere il modulo personalizzato in azione, poiché la cache del browser potrebbe talvolta nascondere le modifiche recenti.
🌟 Suggerimento Pro: Dopo aver aggiunto CSS personalizzato, controlla sempre il tuo modulo su un dispositivo mobile. Potrebbe essere necessario regolare i valori di padding se il modulo appare troppo stretto su schermi più piccoli.
Suggerimento bonus 🧑💻: Come creare facilmente pagine web personalizzate
Puoi personalizzare i tuoi moduli WordPress per rendere il tuo sito più attraente e visivamente interessante. È anche possibile progettare le tue pagine web completamente personalizzate utilizzando SeedProd. È il miglior plugin per la creazione di pagine WordPress drag-and-drop per creare pagine e temi del sito web senza codice.
Abbiamo testato a fondo SeedProd per vedere come si confronta con altre soluzioni. Per saperne di più sulla nostra esperienza, consulta la nostra recensione completa di SeedProd.
SeedProd ha anche modelli e kit di siti predefiniti, opzioni di personalizzazione semplici, tavolozze di colori e blocchi di pagina avanzati. Inoltre, puoi facilmente incorporare i tuoi moduli WPForms all'interno dell'editor SeedProd.
Per maggiori dettagli, puoi consultare il nostro tutorial su come creare una landing page in WordPress.
🌟 Suggerimento Pro: Puoi persino usare SeedProd per creare una pagina di lista d'attesa virale, una pagina di vendita, una pagina di manutenzione, una pagina "coming soon" e molto altro.
Domande frequenti sulla personalizzazione e stilizzazione dei moduli WordPress
Hai ancora domande? Ecco alcune delle domande più frequenti che riceviamo dai lettori, con le relative risposte.
Cosa posso personalizzare in un modulo WordPress?
Puoi personalizzare i campi, il layout, i colori, i font, le etichette, i messaggi di errore e il pulsante di invio per adattarli al design del tuo sito.
Ho bisogno di competenze di codifica per personalizzare i moduli WordPress?
No. Con ottimi plugin come WPForms, puoi personalizzare e stilizzare i moduli utilizzando le impostazioni integrate, senza bisogno di codice.
Posso far corrispondere i miei moduli al branding del mio sito web?
Sì. Puoi usare i tuoi colori del brand, font e spaziatura in modo che il modulo si integri naturalmente con il tuo tema WordPress.
La personalizzazione e lo styling di un modulo influenzeranno il suo funzionamento?
Le modifiche visive non influenzeranno la funzionalità. Assicurati solo di testare il modulo se modifichi campi o regole obbligatorie.
Posso cambiare lo stile del modulo in seguito?
Assolutamente. Puoi aggiornare il design in qualsiasi momento senza dover ricostruire il modulo da zero.
Altre guide all'uso dei moduli in WordPress
Speriamo che questo articolo ti abbia aiutato a capire come personalizzare e stilizzare i tuoi moduli WordPress.
Potresti anche voler consultare i nostri tutorial su:
- Come caricare file dai moduli di WordPress su Google Drive
- Come consentire agli utenti di scattare foto e video dal vivo nei moduli WordPress
- Suggerimenti per rendere i tuoi moduli WordPress più interattivi
- Come automatizzare i moduli WordPress con n8n per risparmiare ore di lavoro manuale
- Le migliori alternative a Google Forms (funzionalità migliori + gratuite)
Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.
Mrteesurez
Parte dei motivi per cui mi piace WPForms è il fatto che è flessibile e altamente personalizzabile con modelli integrati o utilizzando codice CSS, è sufficiente identificare l'ID del modulo specifico che si sta personalizzando.
Un modulo ben progettato e personalizzato attira gli utenti e posiziona il tuo modulo come professionale.
Grazie per la guida.
Supporto WPBeginner
Prego!
Amministratore
Jiří Vaněk
Grazie per il tutorial. Ho inserito un modulo di contatto sul sito web usando WPForms e l'ho lasciato nel suo stato predefinito. In realtà, non pensavo nemmeno di poterlo personalizzare in qualche modo. Grazie a questo articolo, ho avuto diverse idee su come renderlo più accattivante graficamente. Grazie
Ralph
Grazie per questa guida.
Ora il mio modulo di contatto avrà un aspetto migliore e più professionale rispetto allo spazio bianco predefinito con linee grigio chiaro. Questo migliorerà il design del mio sito web!
Supporto WPBeginner
Glad we could help improve your site’s design
Amministratore