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

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

Senza l'esperienza di sviluppatori e designer, questi moduli possono funzionare abbastanza bene, ma mancano dell'appeal visivo che può coinvolgere gli utenti e favorire le conversioni.

La cosa positiva è che non è più necessario avere conoscenze di codifica o di design per creare dei bei moduli. È sufficiente il plugin giusto.

In questo post, vi mostrerò un metodo privo di codice per creare uno stile per i vostri moduli di contatto in modo da dare una forte impressione ai vostri visitatori.

Create ora il vostro modulo WordPress personalizzato 🎨

Come abbellire i moduli di contatto in WordPress

Ora che sapete che il nostro strumento di styling è il migliore e più semplice per WPForms, vediamo come procedere passo dopo passo.

1. Installare e attivare WPForms

Per prima cosa, è necessario installare il plugin WPForms, se non lo si possiede già.

Lo stile dei moduli è disponibile con tutte le versioni di WPForms, compresa WPForms Lite (il miglior costruttore di moduli gratuito).

Avete bisogno di aiuto per questo passaggio? Consultate questa guida per principianti su come installare un plugin di WordPress.

Il passo successivo dipende dalla versione di WPForms in uso.

• Per i nuovi utenti che installano WPForms 1.8.1 e successivi, passare al punto 3.
• Se avete installato WPForms prima della versione 1.8.1, dovrete abilitare il markup moderno. Continuate a leggere qui sotto per vedere come fare.

2. Abilitare il markup moderno

Se prima dell'aggiornamento a WPForms 1.8.1 era presente almeno un modulo sul sito web, è necessario abilitare il markup moderno.

A tale scopo, spostarsi nella scheda Generale del menu delle impostazioni di WPForms.

In quella pagina, selezionare la casella Usa markup moderno.

Non dimenticate di salvare le impostazioni una volta completato questo passaggio.

3. Creare il modulo

Ora è il momento di creare il vostro modulo! Per iniziare, passate il cursore su WPForms nella barra laterale del menu di amministrazione di WordPress e cliccate su Aggiungi nuovo.

Dopodiché, è il momento di iniziare a configurare il modulo, a partire dal nome del modulo e dalla selezione del modello. Esistono centinaia di modelli di moduli per il marketing e per varie altre funzioni che si possono utilizzare. Se volete, potete anche creare il vostro modulo completamente da zero.

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

Una volta effettuata la selezione, è possibile costruire o personalizzare il modulo utilizzando il facile costruttore drag-and-drop di WPForms.

Avete bisogno di una piccola guida? Non c'è problema. Abbiamo un documento che vi insegnerà a creare il vostro primo modulo.

4. Incorporare il modulo

Una volta terminata la creazione del modulo, è il momento di incorporarlo nel sito. È necessario completare questo passaggio per accedere alle opzioni di stile del modulo.

Il modo più semplice per incorporare il modulo è fare clic sul pulsante Incorpora nella parte superiore del costruttore di moduli.

Si aprirà una finestra popup modale che chiederà di selezionare la pagina in cui si desidera incorporare il modulo. È possibile selezionare una pagina esistente o crearne una nuova.

Facendo clic sul pulsante Seleziona pagina esistente, si apre un menu a tendina in cui è possibile selezionare una delle pagine esistenti.

Se si seleziona Crea una nuova pagina, si avrà la possibilità di assegnare un nome alla nuova pagina.

È anche possibile incorporare il modulo tramite un widget o uno shortcode.

Cliccando sul pulsante Let's Go, si aprirà la pagina della bozza con il modulo incorporato.

5. Stile del modulo

Ora è il momento della parte più divertente: lo styling della forma!

Fare clic sul modulo nell'editor dei blocchi e le impostazioni per quel blocco si apriranno nella barra laterale a destra. Qui è possibile accedere a tutte le opzioni di stile del modulo.

Se siete utenti di WPForms Pro, noterete che sono disponibili decine di temi. Questi temi, progettati in modo professionale, rendono facile lo stile del vostro modulo con schemi di colori, stili di pulsanti, contenitori e immagini di sfondo predefiniti.

Quindi, se si desidera aggiungere immediatamente un tocco in più al proprio modulo, è sufficiente selezionare un tema qualsiasi dal pannello laterale. Nell'esempio qui sotto, sto usando il tema Frost, uno dei miei preferiti.

Ottenere tutti i temi dei moduli con WPForms Pro 🎨

Sebbene ogni tema utilizzi stili unici per ogni elemento del modulo, è possibile modificare questi singoli elementi senza l'ausilio di CSS.

Esistono 5 elementi principali del modulo che possono essere personalizzati con semplici controlli punta e clicca:

• Stili di campo
• Stili di etichetta
• Stili dei pulsanti
• Stili di contenitori
• Stili di sfondo.

Vediamo cosa fa ciascuno di essi e come si può regolare lo stile del modulo.

Stili di campo

Stili di campo è la sezione in cui si regolano le dimensioni dei campi di input, il raggio dei bordi e i colori. Se si vuole che il proprio modulo si abbini ad altri presenti sul sito, è qui che l'aspetto inizia a prendere forma.

Ecco come appariranno le impostazioni di stile predefinite.

Le modifiche sono facili da apportare senza bisogno di modificare il CSS. Ecco cosa significano le diverse opzioni:

• Dimensione: Regola la dimensione complessiva dei campi.
• Bordo: Controlla lo stile del bordo. Le opzioni includono bordi pieni, tratteggiati o punteggiati.
• Dimensione del bordo: Imposta lo spessore dei bordi dei campi.
• Raggio del bordo: Permette di applicare angoli arrotondati per un look elegante e moderno.

Sotto queste opzioni, si trovano anche le impostazioni per i Colori. Queste consentono di utilizzare un selezionatore di colori per aggiungere colori a diversi aspetti dei campi.

Se si desidera che il modulo si integri perfettamente con i colori del tema di WordPress, è possibile scegliere tra queste opzioni. I colori che vedete dipendono dal tema che state utilizzando.

È possibile selezionare anche dei colori predefiniti.

Il colore personalizzato in alto consente di personalizzare i colori dei campi del modulo. È possibile utilizzare il selezionatore di colori, inserire un codice esadecimale e regolare l'opacità senza modificare il CSS.

Ad esempio, è possibile utilizzare il selezionatore di colori se si desidera aggiungere un colore personalizzato al testo del campo di immissione. Se si dispone del codice esadecimale del colore che si desidera aggiungere, è anche possibile incollare direttamente il codice esadecimale per ottenere il colore esatto desiderato.

Una volta apportati gli aggiornamenti, si dovrebbe vedere che le modifiche si riflettono immediatamente sul modulo nell'editor dei blocchi. È ora di passare alla modifica degli stili di etichetta.

Stili di etichette

Le etichette sono il testo che appare sopra un campo del modulo. Ad esempio, Nome o Indirizzo e-mail. Regolare gli stili di etichetta per controllare le dimensioni e il colore delle etichette del modulo e creare un aspetto coerente in tutto il sito.

È possibile utilizzare il menu a tendina Dimensione per modificare le dimensioni del testo dell'etichetta. La sezione Sottoetichetta e suggerimenti consente di scegliere i colori delle sottoetichette e dei suggerimenti aggiuntivi che appaiono sotto il campo per richiedere informazioni specifiche.

Il colore Messaggio di errore è per i messaggi di convalida del campo che appaiono se il campo riceve un input inatteso. Lo stesso colore è usato per l'asterisco che indica un campo obbligatorio.

Come nella sezione Campi modulo, è possibile utilizzare i colori predefiniti, i colori del tema o utilizzare il selettore di colori per scegliere un colore personalizzato per gli stili di etichetta.

Stili di pulsanti

Per gli Stili di pulsanti, si ottengono impostazioni simili agli Stili di campo, con la possibilità di modificare le dimensioni, il bordo, il raggio del bordo e il colore. In questo modo è possibile assicurarsi che i pulsanti si distinguano sempre e si adattino agli altri pulsanti del sito.

Ecco come appaiono le impostazioni di stile predefinite per il tema che sto usando (Frost).

Si noti che le scelte del colore dei pulsanti saranno utilizzate in altri campi del modulo, come quelli a scelta multipla, le caselle di controllo, le valutazioni e i sondaggi NPS.

Il tema che sto utilizzando applica un raggio del bordo leggermente rotondo di 8 px. Il bordo è selezionato come Nessuno, il che significa che il pulsante non ha un contorno.

Per ulteriori idee sulla personalizzazione dei pulsanti dei moduli, vi consiglio di leggere la nostra guida dettagliata sulle migliori pratiche per i pulsanti di invio.

Stili di contenitori

WPForms consente anche di aggiungere un contenitore personalizzato al modulo. Troverete la maggior parte delle impostazioni delle sezioni precedenti, con l'eccezione di due opzioni che sono uniche per i contenitori:

• Padding: Si usa per regolare la spaziatura all'interno del contenitore del modulo.
• Ombra: aggiunge un effetto ombra di dimensioni particolari o non ne sceglie nessuno.

Il tema che sto usando ha aggiunto automaticamente queste impostazioni predefinite del contenitore e, poiché sono abbastanza soddisfatto del risultato, le lascerò così come sono.

Tuttavia, sentitevi liberi di sperimentare e modificare il contenitore se volete aggiungere il vostro tocco creativo a questo progetto.

Stili di sfondo

Con le impostazioni degli stili di sfondo, è possibile aggiungere un'immagine di sfondo o dei colori solidi per accentuare ulteriormente le qualità di richiamo del modulo.

È disponibile una libreria di foto stock che il nostro team ha accuratamente curato per integrare i moduli WordPress. Potete aggiungere rapidamente un'immagine di sfondo al vostro modulo selezionandone una dalle Foto stock.

E se preferite caricare le vostre immagini personalizzate, avete anche questa possibilità. È possibile caricare una nuova immagine o selezionarne una dalla libreria multimediale di WordPress comodamente dalle opzioni Stili di sfondo.

Per farlo, basta selezionare Media Library dal menu a tendina Immagine e poi premere Scegli immagine.

A questo punto si aprirà il modello della libreria multimediale di WordPress, dove è possibile caricare una nuova immagine o sceglierne una esistente, come si fa di solito.

Ora, si potrebbe finire qui. A questo punto, il vostro modulo è perfettamente in stile. Ma c'è un'altra funzione per gli stili dei moduli che voglio mostrarvi.

Accesso alle funzioni avanzate di stilizzazione di WPForms 🎨

Avanzato

Sotto gli stili dei campi, delle etichette e dei pulsanti, c'è un'altra sezione per le Avanzate. Non lasciatevi ingannare dal nome: è comunque facile da gestire!

Apritelo e vedrete un sacco di codice CSS personalizzato.

Quando si utilizza lo styler integrato di WPForms, questo codice CSS personalizzato viene generato automaticamente e memorizzato qui. Se volete usare lo stesso identico stile su più moduli del vostro sito, copiate questo codice CSS e incollatelo nelle impostazioni avanzate dello stile del modulo in ognuno di essi. In pochi secondi, i vostri moduli corrisponderanno!

Se si desidera ripristinare gli stili del modulo ai valori predefiniti, è possibile fare clic sul pulsante Ripristina impostazioni stile .

E se, dopo tutto questo semplice stile del modulo, si desidera ancora apportare ulteriori personalizzazioni al foglio di stile, c'è ancora un campo per le classi CSS aggiuntive.

E questo è davvero tutto! Avete creato lo stile del vostro modulo ed è stato super facile, giusto? Non c'è bisogno di scrivere il vostro CSS!

Non dimenticate di salvarlo e testarlo prima di pubblicarlo!

Stilizzazione dei moduli di contatto - Domande frequenti

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

Quali sono le opzioni di stile tipicamente disponibili nei plugin per i moduli di contatto?

Ogni plugin per i moduli di contatto offre diversi livelli di personalizzazione. In molti plugin, l'unico modo per modificare lo stile del modulo è l'uso di CSS personalizzati. Opzioni più avanzate come WPForms e Formidable Forms offrono personalizzazioni dello stile senza codice che consentono di modificare le etichette dei campi, i bordi dei campi, i messaggi di errore e di convalida e gli stili dei pulsanti di invio.

WPForms offre anche la possibilità di personalizzare le e-mail di notifica dei moduli con intestazioni personalizzate, schemi di colori, temi chiari e scuri e diversi modelli di notifica preconfigurati.

Posso vedere in anteprima le modifiche al modulo di contatto prima di pubblicarle?

Sì, con WPForms avete diversi modi per visualizzare l'anteprima del vostro modulo prima di pubblicarlo. Il modo più semplice è quello di utilizzare il pulsante Anteprima nella parte superiore del costruttore di moduli, che consente di vedere l'aspetto del modulo in una pagina tipica del sito dopo l'incorporazione.

È possibile visualizzare l'anteprima del modulo anche dalla pagina dell'editor di WordPress. Se volete vedere un'anteprima del vostro modulo che mostri anche le modifiche stilistiche apportate al campo e al pulsante di invio, l'opzione di anteprima dall'editor di WordPress vi permetterà di vedere tutte queste modifiche stilistiche.

Infine, se si usa Elementor per incorporare un modulo costruito con WPForms, si può usare l'opzione di anteprima nativa di Elementor per vedere un'anteprima dal vivo del modulo insieme a qualsiasi altro elemento aggiunto alla pagina.

Come posso assicurarmi che il mio modulo di contatto stilizzato sia responsive e mobile-friendly?

WPForms è progettato per essere reattivo e mobile-friendly di default. Ciò significa che non è necessario apportare ulteriori modifiche per garantire che il modulo costruito con WPForms sia reattivo su tutti i dispositivi.

È possibile creare uno stile per WPForms con Elementor?

Sì, WPForms supporta un'ampia gamma di opzioni di stile dei moduli quando viene utilizzato con Elementor. Inoltre, WPForms si integra automaticamente con Elementor senza richiedere alcuna operazione manuale per sincronizzare i moduli con Elementor. Quindi, se preferite costruire le pagine con Elementor piuttosto che usare l'editor predefinito di WordPress, potete sfruttare liberamente Elementor per creare lo stile dei moduli di contatto che avete precedentemente creato con WPForms.

Quindi, collegare i moduli di WordPress a ChatGPT

Siete curiosi di sapere come automatizzare il vostro flusso di lavoro quando si tratta di moduli? Scoprite come collegare ChatGPT ai vostri moduli WordPress e ottimizzare le risposte con l'intelligenza artificiale.

Cercate un modo per rendere i vostri moduli più attraenti? Date un'occhiata ai nostri suggerimenti per creare moduli interattivi che catturino l'attenzione degli utenti.

Create ora il vostro modulo WordPress

Siete pronti a creare il vostro modulo? Iniziate oggi stesso con il più semplice plugin per la creazione di moduli per WordPress. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo vi ha aiutato, seguiteci su Facebook e Twitter per altre guide e tutorial gratuiti su WordPress.