Riassunto AI
Vuoi cambiare l'aspetto dei pulsanti dei tuoi moduli?
WPForms ti consente di personalizzare gli stili dei pulsanti utilizzando i controlli di stile integrati nell'editor a blocchi o tramite CSS.
Personalizza ora gli stili dei pulsanti del modulo!
In questo articolo, ti mostreremo come personalizzare gli stili dei pulsanti utilizzando entrambi i metodi. Scopri quale funziona per te!
In Questo Articolo
Come personalizzare gli stili dei pulsanti in WPForms con CSS
Prima di iniziare, dovrai installare e attivare il plugin WPForms sul tuo sito. Inoltre, dovrai creare almeno un modulo. Vedi il nostro tutorial su come creare un semplice modulo di contatto come esempio per iniziare.
Opzione 1: Effettuare la personalizzazione su tutto il sito (CSS)
Personalizzare gli stili dei pulsanti del tuo modulo è abbastanza facile una volta che hai il codice CSS che vuoi usare. Se vuoi, puoi semplicemente copiare e incollare uno degli esempi qui sotto o anche combinarli.
Lo snippet di codice deve essere incollato nella sezione CSS aggiuntivo del pannello Personalizza. Puoi farlo navigando su Aspetto » Personalizza » CSS aggiuntivo. Quindi fai clic su Salva e pubblica e hai finito.
Un metodo ancora più semplice è utilizzare un plugin come WPCode, che ti consente di aggiungere diversi tipi di snippet di codice al tuo sito. In questo caso, dovrai solo incollare il codice CSS per lo stile del pulsante facendo clic sul pulsante Usa snippet.
Ora diamo un'occhiata a diversi modi per stilizzare i pulsanti del tuo modulo con CSS.
Come creare un pulsante con uno sfondo trasparente
Vuoi creare uno sfondo trasparente per il tuo pulsante WPForms? I pulsanti con sfondo trasparente, noti anche come pulsanti fantasma, sono una tendenza popolare nel web design.
Viene solitamente utilizzato nei moduli e nelle call to action posizionate sopra ampie immagini di sfondo. Dai un'occhiata ad alcuni esempi di pulsanti trasparenti su diversi siti web.
Esempio n. 1: Pulsante modulo trasparente
Esempio n. 2: Pulsante call-to-action trasparente
Per creare un pulsante con sfondo trasparente, tutto ciò che devi fare è copiare lo snippet di codice sottostante nella tua sezione CSS aggiuntivo .
div.wpforms-container-full .wpforms-form button[type=submit] {
color: #0099CC; /* Text color */
background-color: transparent; /* Remove background color */
border: 2px solid #0099CC; /* Border thickness, line style, and color */
border-radius: 5px; /* Adds curve to border corners */
text-transform: uppercase; /* Make letters uppercase */
}
Ecco come apparirà il pulsante:
Come creare un pulsante con una sfumatura di colore
A differenza dei pulsanti fantasma, l'uso di un pulsante sfumato non è una nuova tendenza. Tuttavia, se quei pulsanti in stile sfumato multicolore si adattano meglio al tuo sito web, puoi seguire questo tutorial.
Poiché è fatto con CSS, puoi facilmente scalarlo su o giù senza perdere risoluzione. Se stai cercando uno strumento per creare CSS per sfumature, puoi usare l'editor di sfumature di ColorZilla.
Nel CSS sottostante, abbiamo utilizzato stili specifici per il browser per garantire che la sfumatura appaia sul maggior numero possibile di browser diversi.
div.wpforms-container-full .wpforms-form button[type=submit] {
border-radius: 30px; /* Curve of border corners */
text-transform: uppercase; /* Make letters uppercase */
color: white; /* Text color */
background: #0099cc; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* Standard syntax */
}
Ecco come apparirà il pulsante:
Come creare un pulsante con angoli arrotondati
Vuoi attirare l'attenzione degli utenti sulle call to action? Secondo alcune ricerche, gli angoli arrotondati migliorano l'elaborazione delle informazioni e attirano il nostro sguardo verso il centro dell'elemento.
Se stai cercando di attirare l'attenzione degli utenti, potresti voler testare i tuoi tassi di conversione dei moduli creando un pulsante con angoli arrotondati per il tuo modulo WordPress.
div.wpforms-container-full .wpforms-form button[type=submit] {
background-color: #0099CC; /* Blue background color */
border-radius: 30px; /* Curve of border corners */
text-transform: uppercase; /* Make letters uppercase */
color: white; /* Text color */
}
Ecco come apparirà il pulsante:
Come Sostituire il Tuo Pulsante con un'Immagine
Usare un pulsante grafico è probabilmente il modo più semplice per personalizzare il pulsante del tuo modulo.
Puoi trovare facilmente diversi pulsanti grafici da scaricare e utilizzare su siti di stock photo. Quindi puoi sostituire il pulsante del tuo modulo con un pulsante grafico.
Assicurati di caricare la grafica del pulsante nell'uploader multimediale andando su Media » Aggiungi Nuovo. Quindi sostituisci l'URL sottostante con l'URL della tua immagine:
http://yoursite.com/your-image.jpg
div.wpforms-container-full .wpforms-form button[type=submit] {
background-image: url(http://yoursite.com/your-image.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: transparent; /* Hide the 'submit' text */
border: none; /* Remove the border */
}
Come Creare un Pulsante Multilinea
Prima di inviare il tuo modulo, i tuoi utenti avranno diverse domande in mente. Per aumentare le conversioni, puoi rispondere a queste domande con il testo appropriato all'interno o intorno al tuo pulsante.
Quando crei un pulsante per il tuo modulo, guardalo attraverso gli occhi dei tuoi visitatori. Ti aiuta a scrivere il testo appropriato per il tuo pulsante orientato alla conversione.
Nella maggior parte dei casi, per includere tutti questi dettagli nel tuo pulsante dovrai creare un pulsante multilinea. Ecco come creare un pulsante modulo multilinea in WPForms.
div.wpforms-container-full .wpforms-form button[type=submit]:after {
content: 'Second line text'; /* Text for second line of button */
display: block; /* Puts this text on its own line */
font-size: 10px;
margin-top: 5px; /* Add distance from first line of text */
font-weight: normal; /* Remove bold style */
}
Ecco come apparirà il pulsante:
Opzione 2: Personalizzare uno stile di pulsante individualmente
Cosa succede se vuoi che il tuo nuovo stile venga utilizzato solo su un singolo modulo WPForms, ma non su tutti i moduli del tuo sito?
Se preferisci cambiare lo stile del pulsante di un singolo modulo utilizzando CSS, devi trovare l'ID univoco del tuo modulo.
Per prima cosa, apri una pagina contenente il modulo che desideri modificare. Porta il mouse su qualsiasi campo del modulo, fai clic con il tasto destro » Ispeziona elemento.
Lo schermo del browser si dividerà e vedrai il codice sorgente della pagina. Nel codice sorgente, devi individuare la riga di inizio del codice del modulo.
Come puoi vedere nello screenshot qui sopra, il codice del nostro modulo di contatto inizia con la riga:
div class="wpforms-container wpforms-container-full" id="wpforms-14"
Useremo questo ID nel nostro CSS per stilizzare il nostro modulo di contatto. Sostituiremo .wpforms nel nostro primo snippet CSS con #wpforms-14.
L'attributo id è un identificatore univoco generato da WPForms per questo particolare modulo, quindi lo stile non verrà applicato altrove.
Ad esempio, puoi semplicemente inserire il seguente snippet all'inizio del primo snippet di codice.
div#wpforms-14 {background-color: transparent; !important}
Per un metodo più diretto per individuare l'ID del tuo modulo, vai su Tutti i moduli e individua la colonna Shortcode. Troverai l'ID del modulo qui in men che non si dica.
Personalizza ora gli stili dei pulsanti del modulo!
Come personalizzare gli stili dei pulsanti senza CSS
Prima di aggiungere CSS, valuta se i controlli di stile integrati in WPForms ti aiuteranno a ottenere lo stile del pulsante desiderato più facilmente.
Questo post su come stilizzare i moduli di contatto in WordPress spiega di più sulle opzioni di stile dei moduli di WPForms senza codice all'interno dell'editor a blocchi di WordPress.
Il processo è semplice. Apri un modulo e, nell'editor a blocchi, fai clic sul modulo per aprire opzioni di stile aggiuntive per il blocco WPForms.
Opzioni di stile per il blocco WPForms
Puoi cambiare il tema colore, i campi del modulo, le etichette, i pulsanti e gli stili del contenitore e dello sfondo senza scrivere alcun CSS nelle impostazioni del blocco WPForms.
Accedi alle impostazioni degli stili dei pulsanti
Sotto Stili pulsante, puoi modificare la dimensione, il colore, il bordo, lo spessore del bordo, il raggio del bordo e lo stile del bordo dei tuoi pulsanti. Ecco le opzioni tra cui puoi scegliere.
- Dimensione: Questa opzione indica la dimensione del pulsante. Puoi scegliere tra Piccolo, Medio e Grande.
- Bordo: Con questa impostazione, puoi dare ai tuoi pulsanti un bordo che sia solido, tratteggiato o punteggiato.
- Spessore del bordo: Questo indica ai tuoi pulsanti quanto devono essere spessi i loro bordi. Puoi scegliere un'unità diversa se i pixel (px) non sono ciò di cui hai bisogno per il tuo design.
- Raggio del bordo: Puoi cambiare quanto sono arrotondati gli angoli dei tuoi pulsanti per renderli più morbidi o più netti. Sebbene i pixel (px) siano l'unità standard, puoi cambiarla per soddisfare le esigenze del tuo design.
Puoi anche cambiare i colori dello sfondo e del testo del tuo pulsante nel pannello Colori sottostante.
Personalizza ora gli stili dei pulsanti del modulo!
Domande frequenti sulla personalizzazione degli stili dei pulsanti con CSS
La personalizzazione degli stili dei pulsanti è un argomento di grande interesse per i nostri lettori. Ecco le risposte ad alcune domande comuni al riguardo:
Come si modifica lo stile di un pulsante in CSS?
Per modificare l'aspetto di un pulsante utilizzando CSS, puoi specificare stili personalizzati per proprietà come colore di sfondo, bordo, dimensione del carattere, spaziatura interna e altro. In WordPress, puoi incollare i tuoi stili CSS in CSS aggiuntivo nel Personalizzatore.
Come posso creare un modulo con pulsanti personalizzati?
Per creare un modulo con pulsanti personalizzati, considera l'utilizzo di un plugin WordPress come WPForms. Offre strumenti drag-and-drop per semplificare la creazione di moduli.
Per stili di pulsanti personalizzati, vai alla sezione CSS aggiuntivo in WordPress e inserisci il tuo codice CSS, mirando ai nomi delle classi specifiche del modulo o del pulsante forniti da WPForms.
Come personalizzo il mio pulsante di invio?
Per personalizzare il tuo pulsante di invio in WPForms, modifica il modulo, seleziona "Pulsante di invio" e modifica direttamente l'etichetta del testo. Utilizza l'Editor a blocchi o CSS aggiuntivo per regolare ulteriormente gli stili del pulsante con colori, caratteri e dimensioni personalizzati.
Successivamente, scopri come personalizzare la tua pagina di accesso in WordPress
Ora che sai come stilizzare i moduli di contatto con CSS, potresti voler dare un'occhiata a come creare una pagina di accesso personalizzata per il tuo sito. Abbiamo anche alcune raccolte di plugin per aiutarti a scegliere i migliori plugin man mano che il tuo sito cresce:
- Migliori plugin SEO
- Migliori plugin per i social media
- Migliori plugin di backup
- Migliori Plugin per Log Email
- I migliori plugin per TikTok
- Migliori plugin SMTP
Crea subito il tuo modulo WordPress
Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più facile. 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.
Come posso aggiungere una funzione di quantità a un modulo WP di base.
Ho una serie di articoli del negozio che possono essere selezionati tramite una casella di controllo. Ho bisogno di poter consentire a qualcuno di scegliere le quantità di ciascun articolo e quindi di poterlo inviare via e-mail.
Articolo e costo sono tutti in un unico campo. Ho solo bisogno di poter aggiungere un pulsante +/- accanto a ciascun articolo.
Qualche idea su come posso farlo facilmente?
Grazie
Ciao Paul,
Non abbiamo ancora la possibilità di includere le quantità degli articoli in questo modo, anche se è nel nostro radar per aggiungerlo in futuro!
Se sei disposto a considerare un'alternativa modificata, puoi sfruttare il campo Elementi menu a discesa per fare ciò che stai chiedendo in un modo leggermente diverso: la dimostrazione più semplice è guardare il breve video qui: https://cl.ly/3Y2f3o3q1C0M. In sostanza, crei un campo Elementi menu a discesa per ogni prodotto e inserisci le opzioni del menu a discesa con varie quantità e prezzi associati. Ciò ti consente di offrire sia più prodotti che varie quantità di ciascuno di tali prodotti.
Mi dispiace di non poterti offrire esattamente quello che cerchi, ma spero che questo ti sia d'aiuto!
Se hai altre domande in merito, non esitare a contattarci al supporto 🙂
Questi sono tutti ottimi esempi. Ma come si disattiva l'ombra al passaggio del mouse? Voglio solo un pulsante che sia puro testo in grassetto maiuscolo che dica "INVIA". Il testo dovrebbe diventare grigio al passaggio del mouse e attivo. Nessun bordo, sfondo, ombra...
Ciao Gary,
Il nostro pulsante di invio non include alcuna ombra per impostazione predefinita, quindi se ne vedi una, è probabilmente aggiunta dal tuo tema. Poiché tutti i temi lo fanno in modo leggermente diverso, avremmo bisogno di vedere un modulo incorporato per aiutarti a rimuoverla.
Per rimuovere tutti questi altri stili, avrai bisogno di qualche riga di CSS aggiuntiva. Abbiamo un tutorial qui specificamente sulla personalizzazione del pulsante di invio, inclusi gli stili al passaggio del mouse. Gli esempi mostrati lì dovrebbero guidarti attraverso tutto ciò di cui avrai bisogno per creare l'aspetto personalizzato che stai descrivendo.
Spero che questo ti sia d'aiuto! Se hai domande, faccelo sapere! Supportiamo tutte le licenze a pagamento nel nostro canale di supporto privato e WPForms Lite nel nostro forum 🙂
Ho provato a copiare e incollare il codice per lo stile del pulsante trasparente nel mio tema figlio Genesis e non ha avuto alcun effetto nel cambiare l'aspetto dei pulsanti. Perché pensi che sia così?
Ho seguito le istruzioni: Aspetto>Personalizza>CSS aggiuntivo>Salva.
Grazie!
Ciao Toni,
Questa è un'ottima domanda, e la risposta può variare molto da sito a sito (anche all'interno dello stesso tema). Ti suggerirei di iniziare con il nostro tutorial Come risolvere i problemi del CSS che non funziona, che esamina tutti i problemi più comuni e come affrontarli.
Se ci provi e sei ancora bloccato, non esitare a contattarci al supporto in modo che possiamo aiutarti a risolvere ulteriormente il problema 🙂
Non riesco a capire perché questo non funzioni. Ho inserito il codice nella sezione CSS personalizzabile ma il pulsante è rimasto invariato.
Voglio renderlo trasparente come il primo esempio trasparente che hai sopra, ma semplicemente non viene registrato.
Spero anche di spostare il modulo effettivo più in basso nella pagina, ma anche questo non sembra funzionare.
Ciao Jeremy,
Scusa per il disturbo! Alcuni temi rendono più difficile l'applicazione di CSS personalizzato, anche se di solito l'aggiunta di
!importantaiuta. Ecco un semplice esempio per dimostrare come aggiungerlo:div.wpforms-container-full .wpforms-form button[type=submit] { background-color: transparent !important; }Abbiamo molti altri suggerimenti su come far funzionare il CSS qui nel tutorial di risoluzione dei problemi CSS.
Se provi questi suggerimenti per la risoluzione dei problemi e riscontri ancora problemi, faccelo sapere! Forniamo supporto ai nostri utenti con licenza a pagamento qui e ai nostri utenti Lite qui.
Spero che questo aiuti! 🙂
Volevo solo ringraziarti per aver creato questo post... Ottimo lavoro, mi ha aiutato molto!
Nancy,
Sono davvero felice di vedere che trovi utile il post 🙂
Ciao,
Come posso cambiare l'altezza del pulsante di invio. La sua altezza è maggiore di altri pulsanti in Wordpress e non so quale CSS usare.
Grazie in anticipo.
Ciao Lewis,
Il modo più semplice per personalizzare l'altezza del pulsante di invio è regolare il suo padding (la distanza tra il testo del pulsante e il bordo). Ecco il CSS di cui avresti bisogno per farlo:
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit] { padding-top: 10px; padding-bottom: 10px; }Questi sono attualmente impostati sui valori predefiniti (10 pixel sopra e sotto), ma puoi cambiarli in qualsiasi numero desideri. Per mantenere il testo centrato verticalmente, assicurati solo di mantenere il padding superiore e inferiore allo stesso valore.
E nel caso ti fosse utile, puoi trovare il nostro tutorial completo sulla personalizzazione del pulsante di invio qui.
Spero che questo aiuti! 🙂
Ciao,
Come posso cambiare la dimensione delle caselle di controllo per renderle più piccole?
Grazie in anticipo.
Ciao Lewis,
Mi scuso, tuttavia le caselle di controllo sono generate dal browser e quindi non siamo in grado di personalizzarne le dimensioni. Mentre alcuni temi forniscono ampie modifiche al codice per stilizzare le caselle di controllo in modi personalizzati, questi tendono a causare problemi (incontrano conflitti su alcuni browser, a volte addirittura rompono alcune funzionalità, ecc.) motivo per cui generalmente viene evitato.
Ciao @ JESS ho notato che sei la star qui, attualmente ho un problema con il mio pulsante di invio, non appena passi il mouse sul pulsante di invio, il colore al passaggio del mouse si estende oltre il pulsante di invio e questo è molto brutto e non professionale, come posso risolvere questo problema. Sospetto che stia prendendo il colore dal mio tema, ma non so come disattivarlo. Ecco il link per una migliore comprensione. Passa il mouse sul pulsante di invio e vedrai l'effetto brutto. [URL rimosso]
Ciao Emmanuel,
Saremmo felici di aiutarti! Quando hai un momento, contattaci tramite il supporto in modo che possiamo assisterti.
Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi per favore invia un ticket di supporto.
Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite su WordPress.org.
Grazie :)
Ci sono piani per creare un pacchetto di add-on con alcuni stili diversi per il pulsante di invio?
Ciao Alex — Al momento non abbiamo piani per questo, ma ho annotato l'idea nella nostra lista di richieste di funzionalità. Grazie per il suggerimento! :)
Ciao
Mi stavo giusto chiedendo come possiamo aggiungere questo a tutti i campi del modulo? Ho il mio modulo su un'immagine e vorrei un bordo bianco attorno a un font bianco con sfondo trasparente. Grazie
Ciao Jennifer,
Certo, gli esempi sopra sono specifici per i pulsanti, ma abbiamo anche tutorial per aiutarti a stilizzare i tuoi moduli in generale! Ti suggerirei di iniziare con la nostra guida per principianti (che copre l'aggiunta di un bordo, ecc.). Poi, se desideri un po' di ispirazione in più, potresti dare un'occhiata alle nostre idee di stile aggiuntive (incluso CSS).
Spero che questo aiuti! 🙂
Salve
È possibile nascondere il pulsante di invio? Ho provato diversi CSS ma non riesco a farlo funzionare. Voglio usare il modulo solo per informazioni, quindi non ho bisogno del pulsante.
Grazie
Ciao Nicole,
Saremmo felici di aiutarti! Per fare ciò, avremmo solo bisogno che tu ci contatti con l'URL del tuo modulo (questo ci permetterà di preparare uno snippet CSS per te).
Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi per favore invia un ticket di supporto.
Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite su WordPress.org.
Grazie :)
Ciao, grazie per l'articolo. Vorrei cambiare la posizione del pulsante di invio sul lato destro. Lo standard è sul lato sinistro. Non riesco a trovare alcuna descrizione CSS su come fare. Potresti per favore aiutarmi?
Grazie.
Efkan
Ciao Efkan,
Puoi riposizionare il pulsante di invio a destra usando il seguente codice CSS:
div.wpforms-container-full .wpforms-form .wpforms-submit-container { text-align: right !important; }Nel caso ti fosse utile, ecco un ottimo tutorial di WPBeginner su come aggiungere CSS personalizzato come questo al tuo sito. :)
Salve!
Grazie per tutte queste informazioni utili. Ho ancora una domanda, però.
Ho cambiato con successo il colore di sfondo del pulsante di invio e ho anche aggiunto con successo un colore separato al passaggio del mouse e al focus, in modo che il colore del pulsante cambi quando gli utenti vi accedono tramite tabulazione.
Quello che non riesco a capire è come mantenere il colore al passaggio del mouse in posizione una volta che il pulsante è stato cliccato e sta attivamente inviando. Una volta che un utente sposta il cursore lontano dal pulsante, il colore al passaggio del mouse ritorna al colore originale, il che può far sembrare che il pulsante non sia stato cliccato affatto (anche se il testo dice "invio...").
È un problema del selettore :active che mi sfugge, o c'è qualcos'altro che mi sfugge?
Apprezzo qualsiasi consiglio che puoi offrire.
Ciao Joe,
Potremmo dover dare un'occhiata al codice stesso, quindi quando hai un momento, contatta il nostro team di supporto e lo esamineremo ulteriormente e ti guideremo. :)
sono desideroso di cambiare il colore di sfondo dei messaggi di validazione. Qualche raccomandazione?
Ciao Janine,
Puoi usare il seguente snippet di codice per cambiare il colore di sfondo:
div.wpforms-container-full .wpforms-form label.wpforms-error { background-color: #FFFFFF !important; }E nel caso ti fosse d'aiuto, ecco un ottimo tutorial di WPBeginner su come aggiungere CSS personalizzato come questo al tuo sito.
Spero che questo aiuti! 🙂
grazie Daisy
ho provato quel codice per cambiare il colore di sfondo del messaggio di validazione e non ha cambiato nulla. Continua a presentarsi nel colore verde chiaro con cui è venuto originariamente. Qualsiasi suggerimento?
Ciao Janine,
Se hai un plugin di caching installato sul tuo sito (o se il tuo host fa caching) vorrai prima svuotarlo/flusarlo e riprovare il codice. Se il problema persiste e hai una licenza a pagamento, contatta il nostro team di supporto e loro daranno un'occhiata. :)
Ciao Daisy,
Sto solo seguendo la mia richiesta di 5 post sopra. Come istruito, ho inviato la mia richiesta al team di supporto circa tre settimane fa e non ho ricevuto risposta.
Ho trovato una specie di soluzione alternativa, ma sono ancora interessato a sapere se è possibile cambiare il colore del pulsante di invio - e mantenerlo cambiato - quando i moduli vengono inviati.
Grazie per l'aiuto.
Ciao Joe,
Mi scuso per la confusione – sembra che uno dei membri del nostro team di supporto abbia risposto alla tua email il 25 marzo, ma non siamo sicuri che tu l'abbia mai ricevuta (potrebbe essere stata filtrata come spam/posta indesiderata, quindi vale la pena controllare lì, per sicurezza).
Per riassumere la loro risposta, tuttavia, sfortunatamente non abbiamo modo di realizzare ciò che stai cercando di fare. Il problema è che il testo "Invio" è visualizzato da JavaScript e non cambia il CSS del pulsante – e quindi non c'è nulla di buono da, in un certo senso, "afferrare" in termini di CSS personalizzato. Potrebbe essere possibile ottenerlo utilizzando un po' di JavaScript/jQuery creativo, ma non possiamo fornire alcun supporto per questo livello di personalizzazione. Mi scuso per l'inconveniente!
Ciao, come posso far sì che il pulsante di invio sia allineato con le caselle di testo Nome ed Email. Ho reso le caselle di testo Nome ed Email in linea usando l'opzione di layout.
Ciao Mike,
Ti consiglio vivamente di consultare la nostra guida che ti mostra come visualizzare il tuo modulo su una sola riga.
Spero che questo aiuti! 🙂
Ciao! Come posso cambiare il mio pulsante di invio in modo che contenga solo una riga di testo? Ora il pulsante è enorme a causa di due righe di testo...
Il modulo di contatto è realizzato in linea come un modulo a riga singola.
Ciao Thomas!
Certo, puoi provare a personalizzare il pulsante di invio con il CSS personalizzato. Abbiamo un ottimo tutorial su come farlo qui.
Spero che questo aiuti!
Buona giornata 🙂
Ciao!
Cosa succede quando vogliamo che il pulsante di invio di Wpforms abbia lo stesso aspetto degli altri pulsanti del tema?
Pensavo che sarebbe bastato incollare la classe CSS del pulsante principale del tema nel campo “Classe CSS del pulsante di invio” del modulo.
Tuttavia, il pulsante non cambia affatto aspetto... Dobbiamo inserire il nome della classe in qualche modo speciale?
Ciao Juanma.
Mi scuso per l'eventuale confusione!
Puoi ottenerlo con CSS personalizzato. Dai un'occhiata a questo articolo sul nostro sito per maggiori dettagli.
Spero che questo aiuti!
Buona giornata 🙂
Ciao team di supporto!
Quale codice CSS dovrei usare per cambiare la posizione del pulsante? Ad esempio, vorrei spostare il pulsante di invio al centro del modulo e più in basso.
Grazie!
Ciao Jacqueline.
Si prega di notare che il codice personalizzato è al di fuori del nostro ambito di supporto, non possiamo aiutare con le personalizzazioni o l'implementazione del codice personalizzato.
Tuttavia, ho controllato nel nostro sistema e vedo che abbiamo un suggerimento per ottenere ciò che stai cercando:
div.wpforms-container-full .wpforms-form .wpforms-submit-container { text-align: center !important; }Spero che questo aiuti.
Buona giornata 🙂
Ciao! Come cambio il colore di sfondo del pulsante per il colore che ha il pulsante mentre sta “inviando” dopo aver premuto invio? Grazie!! (^_^)y
Ciao Kate — Saremo felici di aiutarti! Quando hai un momento, scrivici in supporto in modo che possiamo assisterti.
Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi per favore invia un ticket di supporto. Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite su WordPress.org.
Grazie :)
Come posso cambiare il colore di sfondo al passaggio del mouse?
Ciao Francesco - Ottima domanda!
Il modo più semplice per personalizzare il colore di sfondo del pulsante di invio al passaggio del mouse è aggiungere il codice CSS come mostrato qui nel tutorial
Spero che questo aiuti!
Grazie e buona giornata 🙂
Forse semplice, ma non l'ho trovato:
Per favore, come posso dare al pulsante “Invia” la funzione di reindirizzamento (link) a un'altra pagina? Quindi non inviare ma reindirizzare?
Ciao Roman – Buona domanda!
Sì, puoi reindirizzare a un'altra pagina navigando in Costruttore moduli > Impostazioni > Conferma > seleziona ‘Tipo di conferma’ come ‘Vai all'URL (Reindirizza)’ > e aggiungi l'URL di reindirizzamento della conferma. Ecco una ottima guida a riguardo.
Spero che questo aiuti! Grazie e buona giornata 🙂
Aiuto per favore. Ho provato a cambiare il pulsante di invio per avere un raggio di 5px. Non so se sto inserendo il codice CSS sbagliato?
Grazie!
Ciao Jillian – Saremo felici di aiutarti 🙂
Nel caso possa esserti utile, ecco un ottimo tutorial di WPBeginner su come aggiungere CSS personalizzato come questo al tuo sito.
Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi ti preghiamo di inviare un ticket di supporto. In questo modo potremo discutere maggiori dettagli e indagare ulteriormente.
Grazie :)
Ciao,
Ecco il link al mio sito web dove ho inserito WPForms.
[URL Rimosso]
Voglio che i pulsanti "Avanti, Indietro, Invia ecc." abbiano lo stesso stile dei pulsanti del mio tema.
Per favore aiutami
Ciao Abubakar, grazie per averci contattato 🙂
Puoi personalizzare i pulsanti di invio sul tuo sito facendo riferimento a questo articolo. Inoltre, abbiamo un'ottima guida sulla personalizzazione dei singoli campi del modulo.
Se hai bisogno di aiuto, non esitare a contattare il nostro team di supporto.
Grazie e buona giornata 🙂
Ciao! Ottimo articolo!
Come faccio ad aggiungere un'icona al passaggio del mouse sul pulsante di invio? Ho cercato ovunque questo codice e non riesco a trovarlo.
Grazie!
Ciao JP, grazie per averci contattato!
Per fare ciò che hai menzionato, puoi considerare l'uso di FontAwesome, e un modo per aggiungere Font Awesome al tuo sito è utilizzare il plugin 'Better Font Awesome'
Una volta aggiunto Font Awesome al tuo sito, avremo bisogno di un CSS personalizzato per aggiungere un'icona al pulsante di invio, che ho incluso qui
Questo snippet con il codice '\f1d8' visualizzerà un'icona di aeroplano di carta, e puoi sostituirlo con il codice della tua icona preferita andando sulla galleria di Font Awesome
Spero che questo aiuti! :)
Ciao. Uso la versione Lite. Quando passo il mouse, il pulsante si muove leggermente e sembra avere un contorno bianco. Il CSS che sto usando:
.wpforms-form button[type=submit] { border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background-color: #024488 !important; color: #fff !important; } .wpforms-form button[type=submit]:hover { background-color: #d62598 !important; }
Come faccio a rimuovere il focus al passaggio del mouse o il movimento del pulsante? Grazie
Ciao Kas, il codice CSS mi sembra buono. Sospetto che si tratti di un conflitto di stile del tema che causa il comportamento anomalo dello stile al passaggio del mouse.
In questo caso, contatta il nostro supporto gratuito nel forum di supporto di WPForms Lite su WordPress.org.
Grazie :)
Ciao,
Sto cercando aiuto su come centrare il mio pulsante di invio nei miei moduli. Non ho visto alcun modo per farlo e il normale CSS di allineamento al centro non funziona.
Come posso risolvere questo problema? Grazie!
Ciao Seth, usa questo codice CSS per centrare il pulsante di invio.
Spero che questo aiuti! :)
Ciao
Ho un modulo con campi in linea, ma non accetta le mie impostazioni di padding sul pulsante di invio, il testo di invio è disallineato.
Ho già provato le opzioni sopra:
padding-top, padding-bottom e solo padding – ma nessuna ha funzionato…
Puoi aiutarmi?
Grazie in anticipo!
Ciao Rodrigo, sembra che lo stile del tema stia sovrascrivendo il modulo in questo caso.
Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi ti preghiamo di inviare un ticket di supporto. Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite su WordPress.org.
Grazie 🙂
Ciao
Sono un principiante assoluto di CSS, ma so copiare e incollare 🙂 quindi…
Come posso aggiungere un pulsante di invio PayPal "Acquista ora"?
Grazie per qualsiasi aiuto. Google non è gentile con me… 😉
Darren
Ciao Robert! Mi scuso per qualsiasi confusione. I pulsanti PayPal sono forniti specificamente da PayPal, con codice fornito da loro. Puoi fare riferimento alla loro documentazione qui: https://www.paypal.com/buttons/
Nel caso ti fosse utile, il nostro plugin ha la capacità di elaborare pagamenti con PayPal tramite uno dei nostri componenti aggiuntivi. È disponibile con la nostra licenza di livello Pro e puoi trovare maggiori dettagli qui: https://wpforms.com/addons/paypal-standard-addon/
Spero che questo aiuti a chiarire 🙂 Se hai ulteriori domande in merito, ti preghiamo di contattarci se hai un abbonamento attivo. In caso contrario, non esitare a porci alcune domande nei nostri forum di supporto.
Come posso far lampeggiare il pulsante di invio in modo che le persone non lo trascurino in un modulo lungo?
Ciao David. Per ottenere ciò che stai cercando, dovresti utilizzare animazioni e stili keyframes sul tuo pulsante. Tuttavia, non è qualcosa con cui possiamo assisterti dalla nostra parte.
Per ulteriori personalizzazioni, ti suggeriamo di rivolgerti a codeable o WPBuff.
Grazie e buona giornata!
Gentile staff di WP Form,
Vorrei sapere come posso incorporare un modulo in un pulsante Elementor.
Ho già preparato il modulo WP e ho provato a utilizzare l'opzione di incorporamento 'shortcode' sul modulo WP. Tuttavia, quando copio e incollo lo shortcode nell'URL del pulsante usando Elementor, viene reindirizzato a una pagina vuota.
Puoi per favore aiutarmi con questo senza la necessità di passare a un piano a pagamento (né su WP Form né su Elementor)?
Grazie
Ciao Reni, ecco una guida completa per incorporare WPForms in una pagina Elementor.
Spero che questo aiuti! :)
Buonasera, la mia domanda è la seguente:
Come posso configurare i campi in modo che invece di un rettangolo, in cui si scrive, appaia una linea continua.
Grazie
Ciao Marcos, per assicurarci di rispondere alla tua domanda nel modo più completo possibile ed evitare qualsiasi confusione.
Potresti contattarci con dettagli aggiuntivi in modo che possiamo aiutarti ulteriormente in questo caso?
Grazie.
Puoi modificare il codice dell'URL di reindirizzamento della conferma in modo che il link si apra in una nuova finestra?
Ciao Allison, per ottenere questo risultato, dovrai implementare del codice personalizzato, ed ecco la nostra guida per sviluppatori a riguardo.
Poiché ciò che stai cercando richiederebbe del codice personalizzato, non siamo in grado di fornire supporto per lo sviluppo personalizzato che sarebbe necessario. Nel caso ti fosse d'aiuto, potresti considerare di cercare un servizio come Codeable o Upwork per potenziali opzioni di sviluppatori.
Grazie!
Ciao, staff di WP Forms! Adoro WP Forms e sto creando un modulo intelligente utilizzando le opzioni di logica condizionale. Adoro questo, tra l'altro. Per rendere il mio modulo perfetto, c'è un modo per applicare la stessa logica condizionale al PULSANTE DI INVIO? In altre parole, voglio che il mio PULSANTE DI INVIO si nasconda finché le caselle appropriate non vengono selezionate (o i campi obbligatori non vengono completati). Grazie mille per qualsiasi aiuto!
Ciao Christine,
Mi dispiace, ma al momento non abbiamo una funzionalità integrata per nascondere/mostrare il pulsante di invio in modo condizionale. Tuttavia, questo può essere ottenuto utilizzando un po' di codice personalizzato, come mostrato in questa guida per sviluppatori.
Spero sia d'aiuto 🙂
Salve,
È possibile aggiungere un'icona al pulsante di invio?
Grazie.
Ciao Arnold – Puoi considerare di utilizzare il seguente CSS per aggiungere un'icona al pulsante di invio:
.wpforms-form button[type=submit]:after { content: "\f345"!important; vertical-align: middle!important; font-size: 1em!important; transition: all 0.5s ease!important; opacity: 1; }Ciao!
Ho notato che wpforms sta sostituendo la variabile ‘–theme-button-padding’ e impostando la propria:
.wpforms-submit { –theme-button-padding: 5px 35px; }
Posso chiedere perché stai sovrascrivendo l'impostazione della proprietà personalizzata del tema qui, invece di usare la proprietà padding meno specifica?
Grazie :)
Ciao Team,
Ho un modulo multipagina e sono desideroso di posizionare due set di pulsanti “successivo e precedente” sul modulo. Un set in alto e un altro in fondo a ogni pagina, è possibile?
Grazie
Ciao Grant, attualmente non abbiamo questa funzionalità di default. Per una consulenza personalizzata, puoi metterti in contatto con i nostri Trusted Advisors del team di supporto se hai una licenza WPForms. Ti preghiamo di inviare un ticket di supporto e ti risponderanno al più presto (solitamente entro 1 giorno lavorativo). Se stai usando la nostra versione gratuita, visita il forum di supporto di WPForms Lite su WordPress.org e apri un nuovo thread. Grazie!