Come stilizzare i moduli di contatto in WordPress (senza CSS!)

Quando i proprietari di piccole imprese si avventurano nella creazione dei propri moduli WordPress, i risultati spesso finiscono per essere semplici e poco stimolanti. Questo è un modello che ho osservato costantemente nel corso degli anni.

Senza l'esperienza di sviluppatori e designer, questi moduli possono funzionare abbastanza bene ma mancano dell'attrattiva visiva che può coinvolgere gli utenti e generare conversioni.

La cosa positiva è che non hai più bisogno di conoscenze di codifica o di esperienza di design per creare moduli bellissimi. Hai solo bisogno del plugin giusto.

In questo post, ti mostrerò il modo senza codice per stilizzare i tuoi moduli di contatto per fare una forte prima impressione sui tuoi visitatori.

Crea ora il tuo modulo WordPress personalizzato 🎨

Come stilizzare i moduli di contatto in WordPress

Ora che sai che il nostro strumento di stilizzazione è il miglior e più semplice stilizzatore per WPForms, analizziamolo passo dopo passo.

1. Installa e attiva WPForms

Innanzitutto, dovrai installare il plugin WPForms se non lo hai già.

La stilizzazione dei moduli è disponibile con tutte le versioni di WPForms, inclusa WPForms Lite (il miglior costruttore di moduli gratuito).

Hai bisogno di aiuto con questo passaggio? Dai un'occhiata a questa guida per principianti su come installare un plugin WordPress.

Ora, assicuriamoci che tu sia pronto con le versioni di cui hai bisogno:

• Versione di WordPress: 6.0 o superiore.
• WPForms 1.9.7.

2. Apri il tuo modulo nel builder

Ora è il momento di creare il tuo modulo! Per iniziare, passa il cursore del mouse su WPForms nella barra laterale del menu di amministrazione di WordPress e fai clic su Aggiungi nuovo.

Dopodiché, è ora di iniziare a configurare il tuo modulo, a partire dal nome del modulo e dalla selezione del modello. Ci sono centinaia di modelli di modulo per il marketing e varie altre funzioni che puoi utilizzare. Puoi anche creare il tuo modulo completamente da zero, se preferisci.

Il modulo di contatto semplice è uno dei nostri modelli più popolari. È anche molto adatto a questo tutorial, quindi lo selezioneremo facendo clic sul pulsante Usa modello.

Una volta effettuata la selezione, puoi creare o personalizzare il tuo modulo utilizzando il costruttore drag-and-drop di WPForms, facile da usare.

Hai bisogno di una piccola guida? Nessun problema. Abbiamo un documento per insegnarti come creare il tuo primo modulo.

3. Scegli il tuo tema

Ora sei pronto per stilizzare il tema del tuo modulo direttamente all'interno del costruttore di moduli.

Vai su Impostazioni >> Temi per accedere ai controlli di stile.

Il pannello di sinistra mostra tutte le opzioni di stile. Il pannello di destra visualizza un'anteprima in tempo reale utilizzando campi di esempio.

Qui sceglierai il tema.

I temi sono la tua scorciatoia per un modulo dall'aspetto accattivante. Impostano colori e stili coordinati per campi, etichette, pulsanti, contenitore e sfondo, tutto in un clic.

E sono accessibili a tutti gli utenti! Per chi ha WPForms Lite, sono disponibili i temi "Classic" e "Modern (Default)".

Gli utenti con una licenza WPForms hanno accesso alla libreria completa dei temi, inclusi 15 temi diversi.

Lush è il mio preferito!

Ho esaminato personalmente tutti i temi e ho creato questa panoramica descrittiva per ciascuno:

Nome del Tema	Aspetto e Sensazione	Colore d'accento	Colore di sfondo	Note
Moderno (Predefinito)	Pulito, contemporaneo	Blu	Nessuno	Predefinito per tutti i nuovi moduli
Classico	Minimalista	Grigio	Nessuno	Pochissimo CSS, ottimo per un look essenziale
Oceano	Simile a Moderno	Verde acqua scuro	Nessuno	Ottimo per marchi con tonalità fredde
Tangerine	Caldo, energico	Arancione	Nessuno	Spicca su siti neutri
Aero	Leggero e arioso	Blu	Grigio chiaro con ombra a box	Leggero effetto “scheda”
Cemento	Industriale	Rosa	Texture di cemento	Richiede il download di immagini di sfondo
Eleganza	Raffinato	Abbina l'immagine	Immagine decorativa	Angoli arrotondati sul contenitore
Fresco	Ispirato alla natura	Verde	Immagine fogliata	Ottimo per marchi eco/organici
Cupo	Modalità scura	Verde	Sfondo scuro	Elementi del modulo ad alto contrasto
Corridoio	Drammatico	Scuro	Immagine	Contenitore audace e immersivo
Lussureggiante	Tessuto	Nero	Immagine di muro di mattoni	Angoli arrotondati e ombra a scatola
Monstera	Allegro	Verde	Immagine ad acquerello	Angoli arrotondati
Intervallo	Vibrante	Verde	Immagine del tramonto	Bordi e ombre a scatola
Primavera	Gradiente morbido	Blu	Immagine sfumata	Ombra a scatola per profondità
Vintage	Retrò	Giallo	Colore solido	Atmosfera calda e nostalgica

Dai un'occhiata al nostro documento completo che copre molti di questi temi in dettaglio.

4. Personalizza gli stili dei campi

Una volta scelto un tema, vai su Stili campo per regolare:

• Dimensioni: Piccole, Medie, Grandi
• Bordo: Solido, Tratteggiato, Punteggiato
• Dimensioni e raggio del bordo: Controlla lo spessore e l'arrotondamento degli angoli
• Colori: Imposta sfondo, bordo e testo. Usa la palette del tema, il codice HEX o il selettore di colori

Questi tocchi aggiuntivi si prestano davvero all'effetto e all'atmosfera che stai cercando con ogni modulo. Ad esempio, gli angoli arrotondati danno un'impressione amichevole, i bordi squadrati danno un'impressione formale.

Troverai anche qui opzioni per aggiornare i colori dello Sfondo, del Bordo e del Testo dei tuoi campi modulo.

Fai clic sull'etichetta per aprire il selettore di colori ed effettuare le modifiche. Puoi scegliere un colore visivamente o inserire un codice esadecimale specifico per un controllo specifico.

5. Personalizza gli stili delle etichette

Le etichette sono le brevi porzioni di testo sopra i tuoi campi modulo che indicano agli utenti cosa inserire: cose come Nome, Indirizzo email o Messaggio. Se fatte bene, rendono il tuo modulo facile da seguire, aiutando gli utenti a evitare confusione ed errori.

In Stili etichetta, puoi cambiare:

Dimensioni: Testo piccolo, medio o grande. Ad esempio, potresti volere etichette piccole per un modulo di newsletter minimalista, ma etichette grandi e in grassetto per un modulo di candidatura di lavoro in cui la chiarezza è fondamentale.

Colori:

• Testo etichetta: Il titolo principale sopra ogni campo.
• Sottotitoli e suggerimenti: Istruzioni utili, come “Solo nome” o “Non condivideremo mai la tua email”.
• Messaggi di errore: Testo che appare quando l'utente commette un errore, come “Questo campo è obbligatorio”. Questo colore controlla anche l'asterisco sui campi obbligatori

Ad esempio, se il tuo sito ha uno sfondo scuro, potresti impostare il testo dell'etichetta su bianco, i sottotitoli su un grigio tenue e i messaggi di errore su un rosso brillante in modo che risaltino immediatamente quando qualcosa non va.

6. Personalizza gli stili dei pulsanti

Il tuo pulsante di invio è l'ultima "call to action" per il tuo modulo. Dovrebbe risaltare abbastanza da non far sì che i visitatori debbano cercarlo.

In Stili pulsante, puoi regolare:

• Dimensione: Piccola, Media o Grande. I pulsanti grandi funzionano bene su dispositivi mobili, mentre quelli medi potrebbero adattarsi meglio ai layout desktop.
• Stile bordo: Solido, Tratteggiato o Punteggiato—anche se la maggior parte dei design moderni si attiene a Solido o Nessuno per un aspetto più pulito.
• Dimensione e raggio del bordo: Bordi più spessi e angoli più netti danno un'impressione più formale; bordi più sottili e angoli arrotondati danno un'impressione più amichevole e casual.
• Colori di sfondo e testo: Questi impostano l'aspetto principale del tuo pulsante.

💡 Suggerimento: Il colore di sfondo qui diventa anche il colore d'accento per il resto del tuo modulo, inclusi gli stati di focus dei campi, le barre di avanzamento e persino le caselle di controllo. Quindi, se rendi il tuo pulsante color ottanio, aspettati che quel color ottanio appaia sottilmente in tutto il tuo modulo per un look coordinato.

7. Personalizza gli stili del contenitore

Il contenitore è come la "cornice" attorno al tuo modulo. Separa visivamente il modulo dal resto della pagina e può contribuire a renderlo più intenzionale.

In Stili contenitore, puoi cambiare:

• Spaziatura interna: Quanto spazio c'è all'interno del contenitore attorno ai campi del tuo modulo. Più spaziatura interna conferisce un aspetto pulito e arioso; meno spaziatura interna crea un aspetto compatto e salvaspazio.
• Stile, dimensione e raggio del bordo: Abbina questo al tono visivo del tuo sito: angoli quadrati e bordi solidi per un look aziendale, angoli arrotondati e bordi sottili per un tocco più morbido.
• Ombra: Aggiungere un'ombra a goccia piccola o media può far apparire il tuo modulo "sollevato" dalla pagina. Ottimo per farlo risaltare su sfondi piatti.
• Colore del bordo: Spesso trascurato, ma un bordo colorato può legare il tuo modulo alla palette del tuo brand.

Per un sito portfolio di fotografia, ad esempio, potresti usare un contenitore con ampia spaziatura interna, un sottile bordo bianco e una morbida ombra a goccia per creare un elegante effetto "cartolina".

8. Personalizza gli stili dello sfondo

Lo sfondo è dove puoi dare sfogo alla creatività, ma anche dove è facile esagerare. Un buon sfondo completa il modulo senza renderlo difficile da leggere. Quindi resisti alla tentazione!

Le opzioni qui includono:

• Origine immagine: Carica dalla tua Libreria multimediale o sfoglia le Foto stock integrate di WPForms (la prima volta che usi le foto stock, scaricherai l'intera libreria).
• Posizione: Controlla dove si trova l'immagine: in alto al centro, al centro, in basso a destra, ecc.
• Ripetizione: Scegli Nessuna ripetizione per un'immagine singola, Affianca per ripetere sullo sfondo o ripetizioni orizzontali/verticali per i motivi.
• Dimensioni: Copertura fa sì che l'immagine riempia l'area del contenitore. Dimensioni ti consente di impostare larghezza e altezza esatte.
• Colore di sfondo unito: Un'ottima opzione se desideri qualcosa di semplice o se la tua immagine non viene caricata.

💡Evita sfondi troppo carichi che rendono il testo difficile da leggere. Se ami un'immagine complessa, attenuane l'effetto con una sovrapposizione di colore prima di caricarla.

10. Salva, visualizza in anteprima e testa

Una volta apportate le modifiche, non ti resta che salvare il tuo modulo. Fai clic su Salva nel generatore di moduli.

Oppure, usa Anteprima (in alto a destra) per vedere i tuoi stili applicati a un layout di modulo di esempio. Quindi, vai alla tua pagina nell'editor di WordPress e visualizza l'anteprima del modulo effettivo con i campi reali.

Non dimenticare, puoi anche Testarlo:

• Compila ogni campo per controllare spaziatura e allineamento.
• Attiva un messaggio di errore per vedere se i tuoi colori sono chiari.
• Visualizza il modulo su dispositivi mobili, tablet e desktop per confermare che sia reattivo.

E questo è tutto! Ora puoi iniziare a stilizzare i tuoi moduli di contatto (o qualsiasi altro modulo) che hai in WordPress, direttamente nel generatore di moduli.

Buono styling!

Styling dei moduli di contatto – FAQ

Ecco alcune domande comuni sullo styling dei moduli di contatto in WordPress senza codice:

I miei stili si applicheranno ovunque?

Sì. Quando stilizzi un modulo nel generatore WPForms, queste impostazioni vengono salvate con il modulo stesso, non solo con la pagina su cui stai lavorando.

Ciò significa che se incorpori lo stesso modulo su più pagine o post, avrà un aspetto coerente ovunque per impostazione predefinita. L'unica eccezione è se sovrascrivi intenzionalmente lo stile nell'Editor a Blocchi o in Elementor durante l'incorporamento. Tali modifiche si applicano solo a quella specifica pagina.

Posso stilizzare un modello di modulo?

Assolutamente. I modelli in WPForms, come "Modulo di contatto semplice" o "Iscrizione alla newsletter", sono solo set di campi predefiniti. Non appena incorpori un modulo basato su modello, puoi scegliere un tema e regolare il suo stile esattamente nello stesso modo in cui faresti per un modulo creato su misura.

Posso eliminare un tema personalizzato?

Sì, ma fallo con attenzione. Quando elimini un tema personalizzato dal pannello Temi nel generatore, è perso per sempre.

Successivamente, collega i tuoi moduli WordPress a ChatGPT

Curioso di sapere come puoi automatizzare il tuo flusso di lavoro quando si tratta di moduli? Scopri come collegare ChatGPT ai tuoi moduli WordPress e semplifica le risposte con l'IA.

Cerchi un modo per rendere i tuoi moduli più accattivanti? Dai un'occhiata ai nostri suggerimenti per la creazione di moduli interattivi che catturano l'attenzione degli utenti.

Crea subito il tuo modulo WordPress

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più facile. 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.