Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come personalizzare e abbellire i moduli di WordPress (2 metodi semplici)

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

Vi state chiedendo come stilizzare i vostri moduli di WordPress?

È possibile personalizzare i moduli per adattarli al design del sito web. In questo modo si può creare un aspetto visivamente più accattivante e professionale per il sito e migliorare l’esperienza dell’utente.

In questo articolo vi mostreremo come personalizzare e stilizzare facilmente i moduli di WordPress, passo dopo passo.

Customize and style your WordPress forms

Perché personalizzare e modellare i vostri moduli di WordPress?

Quando aggiungete un modulo al vostro sito WordPress utilizzando un plugin, noterete che il suo layout è solitamente semplice e di aspetto chiaro.

Ad esempio, se aggiungete un modulo di registrazione al vostro sito web utilizzando un plugin per i moduli di registrazione degli utenti, vedrete che il suo layout è un po’ noioso. Questo può non catturare l’attenzione del visitatore e persino scoraggiarlo dal compilare il modulo.

Registration form preview

Personalizzando i vostri moduli, potete abbinarli al vostro tema WordPress e al vostro branding per renderli più attraenti.

Questo può portare a un aumento delle conversioni, perché i moduli WordPress in stile sono più facili da navigare e possono incoraggiare un maggior numero di utenti a compilarli.

Styled form preview

I moduli con stile possono anche aumentare la consapevolezza del vostro marchio tra gli utenti. Ad esempio, potete utilizzare il logo del vostro sito web e i colori aziendali per rendere il vostro modulo più memorabile ed efficace.

Detto questo, vediamo come personalizzare e stilizzare facilmente i moduli di WordPress, passo dopo passo. In questo post tratteremo due metodi, e potete usare i link rapidi qui sotto per passare a quello che volete usare:

Metodo 1: Come personalizzare e abbellire i moduli di WordPress con WPForms (metodo senza codice)

Con WPForms potete personalizzare e stilizzare facilmente i vostri moduli WordPress. È il miglior plugin per moduli di contatto WordPress sul mercato, utilizzato da oltre 6 milioni di siti web.

WPForms è dotato di un costruttore drag-and-drop che rende facilissima la creazione di qualsiasi tipo di modulo. Inoltre, dispone di una libreria di temi predefiniti e di opzioni di personalizzazione integrate per il modulo che non richiedono alcuna codifica.

Per saperne di più, consultate la nostra recensione dettagliata di WPForms.

Per prima cosa, è necessario installare e attivare il plugin WPForms. Per istruzioni dettagliate, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Nota: WPForms ha anche una versione gratuita che si può utilizzare per questo tutorial. Tuttavia, useremo il plugin premium perché ha più impostazioni e opzioni.

Dopo l’attivazione, visitare la pagina WPForms ” Impostazioni dalla barra laterale dell’amministrazione di WordPress per inserire la chiave di licenza.

Potete trovare queste informazioni nel vostro account sul sito web di WPForms.

Entering the WPForms license key

Una volta fatto ciò, andate alla schermata WPForms ” Aggiungi nuovo dalla dashboard di WordPress.

Si accede così alla pagina “Seleziona un modello”, dove si può iniziare a digitare un nome per il modulo. Dopodiché, si può scegliere il modello di modulo desiderato 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.

Choose the contact form template

Questo lancerà il modello nel costruttore di moduli di WPForms, dove si vedrà un’anteprima del modulo sulla destra e i campi del modulo nella colonna di sinistra.

Da qui, è possibile trascinare e rilasciare qualsiasi campo del modulo di propria scelta, secondo le proprie preferenze. È anche possibile riorganizzare o eliminare i campi.

Per istruzioni dettagliate, consultate il nostro tutorial su come creare un modulo di contatto in WordPress.

Save your form

Una volta terminato il modulo, è sufficiente fare clic sul pulsante “Salva” in alto per uscire dal costruttore di moduli.

Successivamente, è necessario visitare la pagina WPForms ” Impostazioni dalla dashboard di WordPress e fare clic sulla casella di controllo “Usa markup moderno”. Se non si esegue questa operazione, le impostazioni di personalizzazione di WPForms non saranno disponibili nell’editor dei blocchi.

Non dimenticate di fare clic sul pulsante “Salva modifiche” per memorizzare le impostazioni.

Enable modern markup in WPForms

Quindi, aprire la pagina o il post in cui si desidera aggiungere il modulo appena creato.

Da qui, è necessario fare clic sul pulsante Aggiungi blocco ‘+’ nell’angolo in alto a sinistra per aprire il menu dei blocchi e aggiungere il blocco WPForms.

Una volta fatto ciò, è sufficiente selezionare il modulo che si desidera aggiungere al sito dal menu a discesa all’interno del blocco stesso.

Add the WPForms block

Ora che il modulo è stato aggiunto, è il momento di personalizzarlo e di dargli uno stile.

Per farlo, è necessario aprire il pannello di blocco sul lato destro dello schermo e scorrere fino alla sezione “Temi”. Da qui, è possibile scegliere tra una libreria di oltre 40 temi predefiniti per dare immediatamente al proprio modulo un aspetto splendido.

Select a form theme

Successivamente, è possibile scorrere la sezione “Stili di campo” per personalizzare ulteriormente il modulo.

È possibile selezionare una dimensione per i campi del modulo dal menu a discesa e persino impostare una dimensione e un raggio per i bordi.

Change form field size and radius

Successivamente, è possibile modificare il colore dello sfondo, del testo e del bordo dei campi del modulo utilizzando lo strumento di selezione dei colori.

In questo caso, potete utilizzare i colori caratteristici del vostro marchio o altri colori utilizzati nel resto del vostro blog WordPress per creare un modulo visivamente accattivante.

Change field color

Una volta fatto ciò, scorrere fino alla sezione “Stili delle etichette”, dove è possibile selezionare la dimensione dei caratteri delle etichette dal menu a discesa.

Successivamente, è possibile modificare il colore dei caratteri delle etichette dei campi, delle sottoetichette e dei messaggi di errore che verranno visualizzati nel modulo.

Configure label style

Per personalizzare il pulsante nel modulo, è necessario scorrere fino alla sezione ‘Stili del pulsante’ e scegliere la sua dimensione dal menu a discesa.

È inoltre possibile impostare il raggio del bordo e modificare lo sfondo e il colore del testo del pulsante di invio del modulo.

Configure button style

Una volta terminata la personalizzazione del modulo, è sufficiente fare clic sul pulsante “Aggiorna” o “Pubblica” in alto per memorizzare le impostazioni.

Ora potete visitare il vostro sito per vedere il modulo WordPress stilizzato in azione.

Form customization preview

Metodo 2: Come modellare i moduli di WordPress con i CSS (personalizzazione avanzata)

Se non volete usare le opzioni di personalizzazione offerte da WPForms o volete applicare diverse personalizzazioni con i CSS, potete anche usare uno snippet CSS personalizzato.

Per farlo, dovrete innanzitutto creare un modulo utilizzando WPForms, che è il costruttore di moduli numero 1 sul mercato.

Si tratta di un costruttore drag-and-drop dotato di molti modelli che si possono utilizzare per creare moduli di contatto, moduli per il caricamento di file, moduli di registrazione, moduli RSVP e molto altro.

Per istruzioni dettagliate, potete consultare il nostro tutorial su come creare un modulo di contatto in WordPress oppure vedere il metodo 1.

Una volta creato un modulo, è il momento di personalizzarlo utilizzando WPCode, il miglior plugin di snippets di codice per WordPress sul mercato.

WPCode WordPress code snippets plugin

È il modo più semplice e sicuro per aggiungere codice CSS per lo styling dei moduli di WordPress.

Per prima cosa, è necessario installare e attivare il plugin WPCode. Per istruzioni dettagliate, potete consultare la nostra guida per principianti su come installare un plugin di WordPress.

Nota: WPCode ha una versione gratuita che si può usare per questa esercitazione. Tuttavia, noi utilizzeremo il piano premium.

Dopo l’attivazione, visitare la pagina Code Snippets ” + Add Snippet dalla dashboard di WordPress.

Una volta arrivati, basta fare clic sul pulsante “Usa snippet” sotto l’opzione “Aggiungi il tuo codice personalizzato (nuovo snippet)”.

Add new snippet

Si accede così alla pagina “Crea snippet personalizzato”, dove si può iniziare a digitare un nome per il proprio snippet di codice.

Quindi, selezionare l’opzione ‘CSS Snippet’ dal menu a discesa nell’angolo destro dello schermo.

Choose CSS snippet option from the dropdown menu

Quindi, copiare e incollare il seguente codice nella casella “Anteprima codice”:

#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;
}

Una volta fatto questo, dovrete sostituire lo shortcode predefinito in alto con lo shortcode del modulo che volete personalizzare.

Per farlo, visitate la pagina WPForms ” Tutti i moduli dalla dashboard di WordPress e copiate il numero ID WPForms del modulo che desiderate stilizzare.

copy the form ID number

Quindi, incollare il numero ID del modulo accanto alla riga wpforms- nel codice. Ora, tutto il codice sarà eseguito solo in questo modulo specifico.

Poi, si può facilmente modificare il codice esadecimale del colore di sfondo, aggiungere una famiglia di caratteri a scelta e configurare il padding e i raggi dei bordi del modulo modificando lo snippet di codice.

Add form ID number in the code snippet

Una volta fatto ciò, scorrere fino alla sezione “Inserimento” e selezionare la modalità “Inserimento automatico”.

Il codice verrà eseguito automaticamente sul vostro sito al momento dell’attivazione.

Choose an insertion method

Infine, scorrere indietro fino alla parte superiore della pagina e spostare l’interruttore su “Attivo”.

Quindi, fare clic sul pulsante “Salva snippet” per memorizzare le impostazioni.

Save form styling snippet

A questo punto, il modulo di WordPress verrà automaticamente personalizzato in base allo snippet CSS e sarà possibile visualizzarlo.

Tuttavia, se non avete ancora aggiunto il modulo al vostro sito web, aprite una pagina o un post nell’editor dei blocchi.

Una volta lì, fare clic sul pulsante “+” nell’angolo in alto a sinistra per aprire il menu dei blocchi e aggiungere il blocco WPForms.

Add the WPForms block

Successivamente, selezionare il modulo che è stato stilizzato utilizzando lo snippet CSS dal menu a discesa del blocco stesso.

Infine, fare clic sul pulsante “Aggiorna” o “Pubblica” per memorizzare le impostazioni.

Ora, potete visitare il vostro sito WordPress per vedere il modulo personalizzato in azione.

Form CSS styling preview

Bonus: Come creare pagine personalizzate per il sito web

Lo styling dei moduli di WordPress è solo un modo per rendere il vostro sito più attraente e visivamente interessante. Potete anche progettare le vostre pagine web completamente personalizzate utilizzando SeedProd.

È il miglior plugin per il page builder di WordPress sul mercato, che consente di creare pagine attraenti senza utilizzare alcun codice.

SeedProd è dotato di un costruttore drag-and-drop, di modelli e kit di siti già pronti, di facili opzioni di personalizzazione, di tavolozze di colori e di blocchi di pagina avanzati. Inoltre, è possibile incorporare facilmente i moduli WPForms nell’editor di SeedProd.

Adding a contact form to your maintenance page

Potete usare SeedProd anche per creare una pagina di lista d’attesa virale, una pagina di vendita, una pagina di manutenzione, una pagina coming soon e molto altro ancora.

Per maggiori dettagli, potete consultare il nostro tutorial su come creare una landing page in WordPress.

Ci auguriamo che questo articolo vi abbia aiutato a capire come personalizzare e rendere più belli i vostri moduli WordPress. Vi consigliamo di consultare anche il nostro tutorial su come aggiungere un campo per il codice coupon ai moduli WordPress e il nostro confronto tra WPForms e Gravity Forms e Formidable Forms.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

4 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    Thanks for the tutorial. I placed a contact form on the website using WPForms and left it in its default state. Actually, I didn’t even think that I could customize it somehow. Thanks to this article, I got several ideas on how to make it more graphically appealing. Thanks

  3. Ralph says

    Thank you for this guide.
    Now my contact form will look better and more professional than default white blank space with light grey lines. This will level up my website design!

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.