Riassunto AI
I pulsanti di invio sono uno degli aspetti più facilmente ignorati del design dei moduli. Anche se sono una piccola parte dei moduli, posizionati in fondo, i pulsanti di invio possono comunque avere un grande impatto sull'aspetto visivo generale del tuo modulo.
Dopo aver testato tonnellate di diversi tipi di moduli di lead per aumentare le conversioni, posso dirti che un pulsante di invio ben realizzato può fare la differenza nel catturare l'attenzione dei tuoi visitatori.
In questo articolo, condividerò alcuni suggerimenti e best practice basati sulla mia esperienza nell'ottimizzazione dei moduli di lead per le conversioni. Iniziamo.
Suggerimenti di base per lo stile del pulsante di invio in WPForms
WPForms ti offre diversi modi per stilizzare il pulsante di invio nel tuo modulo. Preferisco utilizzare le opzioni di stile del modulo nell'editor a blocchi di WordPress. È il modo più semplice per personalizzare quasi ogni componente del tuo modulo.
Le personalizzazioni dello stile del pulsante sono disponibili in tutte le versioni di WPForms. Ma consiglio di utilizzare WPForms Pro per sbloccare la gamma completa di opzioni di stile, inclusi temi di moduli pronti all'uso e impostazioni per lo sfondo e i contenitori del tuo modulo.
Puoi trovare le impostazioni per gli stili del pulsante di invio nel pannello di destra delle opzioni del modulo all'interno dell'editor a blocchi.
Queste impostazioni ti consentono di controllare le dimensioni, il bordo e i colori del pulsante di invio senza alcun codice.
Dimensione del pulsante di invio
WPForms ti offre tre preset per le dimensioni dei pulsanti: piccolo, medio e grande.
Tutte e 3 le opzioni sono perfettamente valide dal punto di vista del design. Non violerai alcuna best practice scegliendo una qualsiasi dimensione del pulsante qui.
Ciò che è più importante qui è la coerenza del design. Ad esempio, se stai utilizzando dimensioni ridotte dei campi e pulsanti grandi, il tuo modulo potrebbe apparire un po' sproporzionato in alcuni punti.
Per il miglior equilibrio, cerca di utilizzare dimensioni coerenti per tutti gli elementi nei tuoi moduli.
La nostra guida allo stile dei moduli tramite l'editor a blocchi esplora le diverse opzioni di personalizzazione per ogni componente del modulo. Tutti questi diversi aspetti si uniscono per creare il design perfetto del modulo.
Tipo di bordo
I tipi di bordo sono interamente una scelta stilistica. Se hai notato, è sempre più comune utilizzare un design senza bordi per uno stile pulito e minimale.
Tuttavia, hai anche la possibilità di utilizzare tipi di bordo meno comuni in WPForms:
- I bordi solidi sono piuttosto popolari e conferiscono ai tuoi moduli un aspetto professionale e raffinato.
- I bordi tratteggiati o punteggiati sono meno comuni, ma aggiungono un tocco di giocosa creatività. Usali se il tema del tuo sito web è più informale, ma fai attenzione a non abusarne.
- I design senza bordi sono eleganti e moderni, spesso usati per enfatizzare il minimalismo o per integrare il pulsante senza soluzione di continuità con lo sfondo. Quando non usi bordi, assicurati che ci sia abbastanza contrasto o ombra per distinguere il pulsante dagli elementi circostanti.
Dimensione del bordo
Puoi anche regolare le dimensioni del tuo bordo. È buona norma avere uno spessore del bordo che completi le dimensioni del pulsante. Quando uso una dimensione di pulsante piccola, mi assicuro di completarla con un bordo sottile di dimensioni 3-4px. Questo crea l'aspetto più equilibrato visivamente, secondo la mia esperienza.
Per i pulsanti grandi, una larghezza del bordo di 4-6px è più adatta. Una buona regola da seguire è usare bordi sottili che aggiungano struttura senza sopraffare il design del pulsante.
Raggio del bordo
L'impostazione del raggio del bordo in WPForms ti dà il pieno controllo su quanto arrotondati vuoi che appaiano i tuoi pulsanti. I pulsanti più arrotondati funzionano benissimo nei temi che utilizzano stili moderni.
Infatti, alcuni studi hanno riscontrato una correlazione tra pulsanti rotondi e conversioni più elevate. Vale la pena sperimentare con pulsanti rotondi se stai ottimizzando per le conversioni.
Puoi usare un raggio del bordo di circa 15-20 px per ottenere l'aspetto del pulsante a forma di capsula che molti siti moderni utilizzano oggi.
Se preferisci attenerti a un'atmosfera formale, sentiti libero di mantenere il raggio del bordo a 0px per mantenere il tuo pulsante di forma quadrata.
La cosa importante è bilanciare la curvatura del tuo pulsante con il tema generale del design del tuo sito web.
Ho una teoria secondo cui le forme più rotonde funzionano meglio se usate con parsimonia. In questo modo, è più probabile che si distinguano dalle forme geometriche popolari che generalmente usi in altre parti del tuo sito.
Colore di sfondo del pulsante
In WPForms, il colore di sfondo del pulsante è facile da selezionare con il selettore di colore. La scelta del colore è importante perché influisce sulla visibilità del tuo pulsante.
Seleziona un colore di sfondo che contrasti con lo sfondo del tuo modulo per rendere il tuo pulsante il più visibile possibile per ogni dispositivo.
Anche il tuo branding gioca un ruolo nella selezione del colore. Se il design del tuo sito web si basa su una palette di colori del marchio, è generalmente una buona idea attenersi ai colori del tema del tuo marchio.
In ogni caso, assicurati di evitare colori eccessivamente brillanti o stridenti che potrebbero distrarre inutilmente gli utenti.
Colore del bordo
Il bordo è solo una piccola frazione del pulsante di invio. Ma è un ottimo posto per aggiungere colori d'accento per aumentare l'attrattiva visiva del tuo modulo.
I bordi appaiono più attraenti quando contrastano bene con il colore di sfondo del tuo pulsante. Questo non solo aggiunge personalità al tuo design, ma migliora anche la visibilità del tuo pulsante.
Consiglio di usare toni tenui per evitare di attirare troppa attenzione sul bordo stesso. L'obiettivo è accentuare il pulsante piuttosto che aumentare le distrazioni con bordi appariscenti.
Colore del testo del pulsante
Con il colore del testo del pulsante, dovresti avere un unico obiettivo: dare priorità alla leggibilità. Il modo più semplice per rendere il testo del tuo pulsante facile da leggere è usare un colore del testo che contrasti nettamente con lo sfondo del pulsante.
Una buona regola generale da seguire è usare testo bianco per sfondi di pulsanti scuri e testo nero o grigio scuro per sfumature più chiare di sfondi.
Mentre puoi cavartela con colori audaci e vivaci in altri componenti del pulsante di invio, è meglio evitare di discostarsi troppo dai colori neutri standard per il colore del testo per mantenere una buona leggibilità.
Tecniche di stile avanzate per i pulsanti di invio
WPForms non richiede l'uso di codice per lo stile di base del tuo pulsante. Tuttavia, avrai bisogno di usare semplici CSS per alcuni effetti avanzati come i colori sfumati.
Questo è molto più facile di quanto sembri. Per prima cosa, avrai bisogno del plugin WPCode installato sul tuo sito, che ti permetterà di inserire facilmente snippet di codice per le modifiche agli stili del tuo pulsante di invio.
Installa WPCode
Apri la tua bacheca di WordPress e vai su Plugin » Aggiungi Nuovo.
Nella schermata Aggiungi Plugin, usa la casella di ricerca per cercare WPCode. Quindi, premi il pulsante Installa Ora per aggiungere il plugin al tuo sito.
Il pulsante "Installa Ora" cambierà in "Attiva" dopo che l'installazione sarà completata. Premi il pulsante Attiva e sarai pronto per usare WPCode per aggiungere snippet di codice al tuo sito.
Dopo di che, passa il cursore del mouse su Snippet di Codice nel pannello laterale della tua bacheca di WordPress e fai clic su + Aggiungi Snippet mentre il menu si espande.
Quindi, fai clic su Usa Snippet sotto Aggiungi il tuo codice personalizzato (Nuovo Snippet)
Dovrai quindi selezionare il tipo di snippet. Per le modifiche di stile, aggiungerai snippet personalizzati CSS. Quindi procedi e seleziona Snippet CSS dalle opzioni disponibili.
Ora, dovrai solo copiare e incollare gli snippet di codice nella finestra dell'editor di codice per applicare le modifiche di stile ai tuoi moduli. Condividerò esempi di codici CSS comuni che puoi usare per cambiare lo stile del tuo pulsante di invio.
Aggiungi colori sfumati al pulsante di invio
Una sfumatura di colore è piuttosto accattivante e di solito indica un design del modulo altamente professionale. Questo è ottimo quando vuoi trasmettere la tua professionalità e attenzione ai dettagli con colori sfumati per i pulsanti.
Ecco il codice per uno snippet che puoi usare per aggiungere una sfumatura lineare al colore del pulsante di invio:
#wpforms-8 .wpforms-submit {
background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
}
In questo codice, "#wpforms-8" si riferisce all'ID del modulo del tuo modulo specifico. Il modulo che sto modificando ha l'ID 8. Se il tuo ID modulo è diverso, diciamo 17, puoi aggiungere il numero corretto a questo pezzo di codice (cioè, "#wpforms-17").
Puoi trovare l'ID del modulo del tuo modulo guardando il numero menzionato nello shortcode di un modulo specifico. Questo è menzionato nella colonna Shortcode del tuo modulo nella schermata Panoramica Moduli.
La seconda parte personalizzabile di questo codice sono i valori per linear-gradient. Questi tre valori all'interno delle parentesi separati da virgole sono:
- Se stai cercando un effetto hover più unico, puoi applicare l'effetto pulsante con questo codice:
- Codice esadecimale del primo colore
- Codice esadecimale del secondo colore
Puoi cambiare questi valori a tuo piacimento. Se hai bisogno di trovare i codici esadecimali esatti per i colori che ti servono, puoi usare questo generatore di colori HTML.
Dopo aver creato il tuo snippet CSS personalizzato, fai clic sul pulsante Salva Snippet e sul pulsante di attivazione accanto ad esso per salvare e attivare lo snippet.
Il tuo modulo avrà ora colori sfumati applicati al suo pulsante di invio.
Aggiungi effetti al passaggio del mouse al pulsante di invio
Per impostazione predefinita, WPForms aggiunge un effetto hover al pulsante di invio per indicare che è interattivo e fornire un feedback visivo immediato a un visitatore che intende fare clic.
Ma se vuoi aggiungere un effetto hover quando usi un gradiente, puoi usare questo codice:
#wpforms-8 .wpforms-submit {
background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
transition: background 0.3s ease; /* Smooth transition on hover */
}
#wpforms-8 .wpforms-submit:hover {
background: linear-gradient(45deg, #0f88d4, #066aab); /* Changes gradient on hover */
}Questo codice include anche un effetto di transizione per garantire che le interazioni con il pulsante risultino curate. In generale, un effetto di transizione di 0,3s – 0,4s fornisce l'effetto più fluido.
Se vuoi solo cambiare l'effetto hover predefinito su un pulsante con colori solidi, puoi usare le impostazioni di WPForms Form Styles nell'editor a blocchi per impostare il colore di sfondo di base desiderato.
Quindi, usa questo codice semplificato per cambiare i colori al passaggio del mouse aggiungendo il codice esadecimale del colore desiderato:
#wpforms-8 .wpforms-submit:hover {
background: #0f88d4; /* Solid color on hover */
transition: background 0.3s ease; /* Smooth transition */
}Assicurati di fare clic su Salva Snippet e di attivarlo per applicare gli effetti hover al pulsante di invio del tuo modulo.
Se stai cercando un effetto di hover più unico, puoi applicare l'effetto pulse con questo codice:
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(15, 136, 212, 0.4);
}
70% {
box-shadow: 0 0 0 20px rgba(15, 136, 212, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(15, 136, 212, 0);
}
}
#wpforms-8 .wpforms-submit:hover {
animation: pulse 1.5s infinite;
}
Questo aggiunge un tocco creativo con un pulsante che pulsa al passaggio del mouse, invitando i clic dei visitatori.
Suggerimenti di ottimizzazione per il testo del pulsante di invio
Lo stile è un aspetto che influenza i clic sul pulsante di invio. Il secondo componente importante è il testo del pulsante di invio. Queste poche parole possono essere il punto di svolta in cui i tuoi utenti decidono se agire o abbandonare.
Un buon testo del pulsante ispira all'azione concentrandosi su un beneficio specifico che il tuo visitatore può aspettarsi cliccando. Evita di usare semplicemente un generico "invia". Invece, usa un linguaggio diretto e orientato all'azione che indichi un obiettivo.
Ecco alcuni esempi di testo del pulsante di invio ottimizzato per le conversioni:
- Ottieni il Mio Preventivo Gratuito
- Scarica il Mio eBook
- Unisciti alla Community
- Inizia il Mio Viaggio
- Accedi ai Modelli Gratuiti
- Risparmia il 20% Oggi
Ma come si modifica effettivamente il testo del pulsante di invio in WPForms? È facile. Nell'editor del modulo, fai clic sul pulsante Invia in fondo al modulo per passare istantaneamente a Impostazioni » Generali.
Quindi, digita semplicemente il tuo testo nella casella Testo del pulsante di invio. Puoi anche modificare il testo che appare durante l'invio del modulo nella casella Testo di elaborazione del pulsante di invio.
E questo è tutto.
Ora che hai una migliore idea delle migliori pratiche per i pulsanti di invio e di come puoi applicarle ai tuoi moduli, è il momento di ottimizzare il testo del tuo pulsante per ottenere più clic.
Leggi anche: Come visualizzare la cronologia del tuo modulo in WordPress
Creare pulsanti di invio efficaci per i tuoi moduli non è una scienza esatta. Non aver paura di sperimentare con stili e testi diversi per i pulsanti e monitorare i tuoi risultati (questo potrebbe essere semplice come testare un modulo A/B e misurare la differenza nei tassi di invio del modulo).
Successivamente, Stile Notifiche Email WPForms
Lo styling dei moduli con WPForms è un processo rapido e semplice. Ma questa flessibilità di personalizzazione si estende anche alle tue notifiche via email. Con le notifiche rivolte ai clienti, hai una grande opportunità di incorporare il tuo branding nelle notifiche per aggiungere un aspetto più professionale di cui i tuoi clienti possono fidarsi.
La nostra guida su personalizzare le notifiche email dei moduli ti accompagna nel modo più semplice per stilizzare le tue notifiche.
Crea ora il tuo modulo WordPress
Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. 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.
