Riassunto AI
Desideri personalizzare il pulsante di invio per adattarlo meglio al design o alla personalità del tuo sito? Il pulsante di invio del tuo modulo può svolgere un ruolo importante nei tassi di invio.
Questa guida coprirà come personalizzare il testo e lo stile del pulsante di invio del tuo modulo, sia nel generatore di moduli che con il tuo CSS.
Modifica del testo del pulsante di invio
Per modificare il testo 'Invia' del pulsante del tuo modulo, apri il generatore di moduli in Impostazioni » Generali. Qui vedrai due campi per impostare il testo nel pulsante di invio:
- Testo del pulsante di invio: Il testo mostrato quando questo pulsante non è stato ancora cliccato
- Testo di elaborazione del pulsante di invio: Il testo mostrato dopo che l'utente ha cliccato questo pulsante, ma prima che la conferma venga mostrata all'utente
Puoi procedere e modificare il testo del pulsante di invio secondo le tue preferenze. Una volta soddisfatto delle modifiche, procedi e salva il modulo.
Personalizzazione del pulsante di invio nel generatore di moduli
Il modo più rapido per ridefinire lo stile del tuo pulsante di invio è nel generatore di moduli, dove puoi vedere le tue modifiche mentre le apporti. Non è richiesto alcun CSS.
Apri il generatore di moduli e vai su Impostazioni » Temi.
Quindi cerca la sezione Stili pulsante sulla sinistra.
- Dimensioni: Imposta quanto è grande il tuo pulsante. Le opzioni includono Piccolo, Medio e Grande.
- Bordo: Delinea il tuo pulsante con un bordo Solido, Tratteggiato o Punteggiato.
- Spessore bordo: Imposta quanto è spesso il bordo. L'unità predefinita è pixel (px), ma puoi scegliere un'unità diversa.
- Raggio bordo: Arrotonda gli angoli del tuo pulsante per un aspetto più morbido o più netto. Anche qui l'unità predefinita è pixel (px).
Sotto queste opzioni, troverai tre opzioni di colore per il tuo pulsante. Per cambiare un colore, fai clic sul campione per aprire il selettore di colori. Puoi scegliere un colore visivamente o inserire un codice esadecimale per un controllo preciso.
- Sfondo: Imposta il colore dietro l'etichetta del tuo pulsante.
- Bordo: Imposta il colore del bordo del tuo pulsante. Questo si applica solo se hai scelto uno stile di bordo sopra.
- Testo: Imposta il colore dell'etichetta del tuo pulsante.
Puoi anche scegliere un tema colore già pronto dall'impostazione Temi, che aggiorna il tuo pulsante insieme al resto del tuo modulo. Per saperne di più, consulta il nostro tutorial su come utilizzare i temi dei moduli.
Una volta soddisfatto delle modifiche, fai clic su Salva, quindi utilizza il pulsante Anteprima per vedere il tuo modulo con gli stili applicati.
Il generatore di moduli copre le modifiche necessarie alla maggior parte dei siti. Per un controllo più preciso, come spaziatura esatta, allineamento del pulsante, pulsanti a larghezza intera o un font specifico, avrai bisogno di una piccola quantità di CSS. Lo vedremo tra poco.
Personalizzazione del pulsante di invio con CSS
Il CSS ti dà il controllo completo sul pulsante di invio, così come su qualsiasi altro aspetto del tuo modulo. È lo strumento giusto quando hai bisogno di qualcosa che il generatore di moduli non offre ancora.
Se sei nuovo al CSS o desideri un ripasso, il posto migliore per iniziare è la nostra guida introduttiva al CSS.
Ecco il CSS predefinito per un pulsante di invio WPForms, insieme a commenti per notare cosa fa ogni riga di CSS:
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
background-color: #eee; /* Grey background */
border: 1px solid #ddd; /* Dark grey border */
color: #333; /* Black text color */
font-size: 1em; /* Size of text */
padding: 10px 15px; /* Distance between text and border */
}
Puoi modificare uno qualsiasi di questi valori per stilizzare il pulsante in modo diverso. Ad esempio, iniziamo dando al nostro pulsante uno sfondo giallo.
Il primo passo è trovare il codice esadecimale per il colore che desideriamo. htmlcolorcodes.com e Adobe Color CC sono strumenti gratuiti utili per questo.
Una volta ottenuto il codice esadecimale della tonalità di giallo desiderata, possiamo creare il nostro CSS:
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
background-color: #FAF243 !important; /* Yellow background */
color:#000 !important;
}
Successivamente, dovrai aggiungere questo CSS al tuo sito. WordPress conserva il pannello CSS aggiuntivo in uno dei due posti, a seconda del tipo di tema che stai utilizzando:
- Temi classici: Vai su Aspetto » Personalizza e seleziona CSS aggiuntivo.
- Temi a blocchi: WordPress nasconde il Personalizzatore quando un tema a blocchi è attivo, quindi aggiungerai il tuo CSS nell'editor del sito. Vai su Aspetto » Editor e apri Stili per trovare l'opzione CSS aggiuntivo.
Ecco il pannello CSS aggiuntivo nel Personalizzatore, che è quello che vedrai su un tema classico.
Ed ecco qui nell'editor del sito, che è quello che vedrai su un tema a blocchi.
Una volta aperta la sezione CSS aggiuntivo, incolla il tuo nuovo CSS e salva le modifiche.
Di seguito è riportato l'aspetto del nostro pulsante ora con questo CSS applicato:
Personalizzazione degli stili al passaggio del mouse
Il CSS ti consente di applicare stili completamente diversi quando un cursore passa sopra un pulsante. Questo cambiamento di stile migliora l'esperienza utente perché fa capire all'utente che questo oggetto è cliccabile.
Di seguito è riportato il CSS predefinito in WPForms quando un pulsante viene passato sopra con il mouse. Come indicato nei commenti, il colore di sfondo diventa leggermente più scuro e il colore del bordo diventa leggermente più chiaro:
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #ddd; /* Darker grey background */
border: 1px solid #ccc; /* Lighter grey border */
}
Potresti notare che questo è molto meno CSS rispetto a quello che abbiamo visto per il pulsante quando non è in stato di hover. Questo perché il CSS applicherà tutti i CSS precedenti al tuo pulsante in stato di hover a meno che non venga specificato diversamente.
Se lasci gli stili predefiniti, ad esempio, il colore del testo rimarrà nero quando il pulsante è in stato di hover. Questo perché il colore del testo del pulsante sarebbe normalmente nero e non gli abbiamo detto di cambiare al passaggio del mouse.
Come con il precedente esempio di CSS personalizzato, puoi cambiare uno qualsiasi di questi valori per stilizzare diversamente gli stili di hover del pulsante. Per il nostro esempio, daremo al pulsante uno sfondo giallo più scuro quando è in stato di hover.
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #e5da00 !important; /* Darker yellow background */
}
Ecco come apparirà il pulsante con il CSS applicato:
Personalizzazione degli stili di focus
Proprio come puoi impostare uno stile di hover per il tuo pulsante con CSS, puoi anche impostare uno stile di focus. Lo stile di focus viene applicato quando il pulsante è il punto focale di qualsiasi evento nella pagina. Ad esempio, se usi il tasto tab per navigare nella pagina.
L'utilizzo di uno stile di focus migliora l'esperienza utente, particolarmente utile per gli utenti che si affidano alla navigazione da tastiera per navigare sul web.
Ecco il CSS predefinito in WPForms quando un pulsante è in focus:
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
background-color: #ddd;
border: 1px solid #ccc;
cursor: pointer;
}
In questo caso, il background-color è una tonalità leggermente più scura del predefinito, e anche il bordo è sottilmente cambiato. Questo fa sapere all'utente che il pulsante è ora in focus e riceverà qualsiasi pressione di tasti pertinente.
Per questo esempio, useremo un colore diverso dal giallo, per rendere lo stile di focus distinto dallo stile di hover.
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
background-color: #80ccf6 !important;
}
Con questo CSS personalizzato applicato, ecco come apparirà il pulsante quando è in focus:
Esempio CSS
Ora che abbiamo coperto le basi, passiamo a un esempio completo di CSS personalizzato per un pulsante di invio.
Ecco il CSS che aggiungeremo per questo esempio, che include modifiche di stile sia per l'hover che per il focus:
/* New button styles */
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
padding: 15px !important; /* Increase distance between text and border */
width: 100% !important; /* Make the button full-width */
font-size: 1.5em !important; /* Increase text size */
background-color: #af0000 !important; /* Red background */
color: #fff !important; /* White text */
border: 8px double #860b0b !important; /* Dark red, double-line border */
}
/* New button hover styles */
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #860b0b !important; /* Dark red background */
border: 8px double #af0000 !important; /* Red, double-line border */
}
/* New button focus styles */
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
background-color: red !important; /* Dark red background */
border: 8px double #860b0b !important; /* Red, double-line border */
}
Di seguito è riportato l'aspetto del nostro pulsante ora con questo CSS applicato:
Quando in stato di hover:
E quando in focus. Ricorda, le uniche modifiche sono i colori dello sfondo e del bordo:
Domande frequenti
Queste sono le risposte ad alcune delle domande più frequenti sulla personalizzazione del pulsante di invio in WPForms.
Posso cambiare la dimensione e il padding del pulsante di invio?
In parte. Nel costruttore di moduli, vai su Impostazioni » Temi » Stili del pulsante e usa l'impostazione Dimensione per scegliere tra Piccolo, Medio e Grande. Questo è sufficiente per la maggior parte dei siti e funziona anche in WPForms Lite.
Se hai bisogno di una dimensione del testo esatta o di valori di padding specifici, dovrai aggiungere uno snippet CSS. Ecco un esempio.
div.wpforms-container-full .wpforms-form button[type=submit] {
font-size: 18px !important; /* Text size */
padding: 14px 40px !important; /* Space inside the button */
}
Posso cambiare la posizione del pulsante in modo che venga visualizzato al centro?
L'allineamento del pulsante non è ancora disponibile nel costruttore di moduli, quindi avrai bisogno di un piccolo snippet CSS per questo. Per impostazione predefinita, i pulsanti di invio di WPForms sono allineati sul lato sinistro della pagina. Per centrare il pulsante, aggiungi il seguente snippet di codice al tuo sito.
div.wpforms-container-full .wpforms-form button[type=submit] {
margin: 0 auto !important;
display: block !important;
}
Il codice CSS sopra applicherà lo stile a tutti i moduli sul tuo sito. Se desideri applicare lo stile a un modulo specifico, dovrai utilizzare il selettore CSS #wpforms-submit-FORM-ID. Ecco un esempio di snippet.
#wpforms-submit-FORM-ID {
margin: 0 auto !important;
display: block !important;
}
Ecco come apparirà il pulsante sul frontend.
Se desideri che il pulsante venga visualizzato a larghezza intera, utilizza la proprietà CSS width: 100%. Ecco una versione aggiornata dello snippet sopra.
div.wpforms-container-full .wpforms-form button[type=submit] {
margin: 0 auto !important;
display: block !important;
width: 100% !important;
}
Visualizzazione pulsante a larghezza intera.
Posso personalizzare il pulsante di invio di WPForms in Elementor Builder?
Sì. WPForms si integra con Elementor per fornire la stilizzazione dei moduli direttamente all'interno di Elementor Builder. Puoi personalizzare i campi del modulo, le etichette, i colori e il pulsante di invio.
Per saperne di più sulla personalizzazione del tuo modulo in Elementor, consulta la nostra guida su aggiungere WPForms a una pagina Elementor.
Posso stilizzare il pulsante di invio in Divi?
Sì, anche se lo stilizzerai nel costruttore di moduli WPForms anziché all'interno di Divi. Il modulo WPForms non include controlli di stile del modulo, quindi le sue impostazioni coprono solo le opzioni di Divi come dimensioni e spaziatura.
Imposta gli stili del tuo pulsante in Impostazioni » Temi nel costruttore di moduli, e questi verranno applicati al tuo modulo nella pagina Divi. Questo funziona sia che tu incorpori il tuo modulo con il modulo WPForms o con lo shortcode. Per maggiori dettagli, consulta la nostra guida su come aggiungere una pagina WPForms a Divi.
Come nascondo il pulsante di invio sul mio modulo?
Nascondere il pulsante di invio è particolarmente utile se stai utilizzando l'addon Calcoli per creare calcolatrici sul tuo sito. Per nascondere il pulsante di invio del tuo modulo, dovrai aggiungere uno snippet CSS personalizzato al tuo sito. Lo snippet di codice è disponibile nella libreria snippet di codice WPForms.
Per i dettagli su come importare questo snippet sul tuo sito, assicurati di consultare la nostra guida su come nascondere il pulsante di invio.
Fatto! Ora puoi personalizzare il pulsante di invio del tuo modulo, sia nel costruttore di moduli che con il tuo CSS.
Successivamente, vuoi stilizzare il resto del tuo modulo per abbinarlo? Dai un'occhiata alla nostra guida completa su come stilizzare i tuoi moduli per vedere tutte le opzioni disponibili nel costruttore di moduli.