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 spiegherà come personalizzare il testo e lo stile del pulsante di invio del tuo modulo.
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.
Stile del pulsante di invio
CSS offre un'incredibile flessibilità per personalizzare il pulsante di invio, così come qualsiasi altro aspetto del tuo modulo.
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 o 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 */
}
Successivamente, dobbiamo aggiungere questo CSS al nostro sito. Il modo più semplice per farlo è utilizzare l'editor CSS di WordPress. Per aprirlo, vai su Aspetto » Personalizza e seleziona CSS aggiuntivo.
Una volta aperta la sezione CSS aggiuntivo, incolla il tuo nuovo CSS. Quindi fai clic sul pulsante Salva e pubblica e il gioco è fatto!
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 posizione del pulsante in modo che venga visualizzato al centro?
Per impostazione predefinita, i pulsanti di invio di WPForms sono allineati sul lato sinistro della pagina. Tuttavia, puoi utilizzare CSS personalizzato per allineare il pulsante al centro. Per farlo, 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.
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 tuo pulsante di invio utilizzando CSS personalizzato.
Vuoi altri esempi? Dai un'occhiata al nostro tutorial con ancora più CSS per il pulsante di invio che puoi copiare e incollare direttamente sul tuo sito.