Come personalizzare il collegamento Salva e Riprendi

Panoramica

Desideri personalizzare il link Salva e Riprendi? Utilizzando un piccolo snippet CSS, puoi facilmente convertire il link di testo che appare quando il componente aggiuntivo Salva e Riprendi è abilitato, facendolo apparire come un pulsante. Iniziamo!

Aggiungere lo snippet CSS

Ai fini di questa documentazione, presumiamo che tu abbia già creato il tuo modulo e abilitato il componente aggiuntivo Salva e Riprendi.

Tuttavia, se hai bisogno di assistenza per abilitare questo componente aggiuntivo per il tuo modulo, dai un'occhiata a questa guida utile.

Una volta creato il tuo modulo e abilitato il componente aggiuntivo, aggiungi semplicemente questo CSS al tuo sito e personalizza colori, font-family, font-size, ecc., come preferisci.

Se hai bisogno di aiuto su come e dove aggiungere snippet CSS al tuo sito, dai un'occhiata a questo tutorial.

Stile per tutti i moduli

a.wpforms-save-resume-button {
    padding: 10px;
    text-decoration: none !important;
    background-color: #e27730;
    border-radius: 3px;
    color: #ffffff !important;
    font-family: 'Roboto' !important;
    font-size: 17px !important;
    border: 1px solid #e27730;
    transition: all 0.3s ease-out;
}

a.wpforms-save-resume-button:hover {
    color: #e27730 !important;
	background-color: #ffffff;
}

Stile per moduli specifici

Se volessi applicare questa modifica solo a un modulo specifico, usa invece questo CSS.

form#wpforms-form-999 a.wpforms-save-resume-button {
    padding: 10px;
    text-decoration: none !important;
    background-color: #e27730;
    border-radius: 3px;
    color: #ffffff !important;
    font-family: 'Roboto' !important;
    font-size: 17px !important;
    border: 1px solid #e27730;
    transition: all 0.3s ease-out;
}

form#wpforms-form-999 a.wpforms-save-resume-button:hover {
    color: #e27730 !important;
	background-color: #ffffff;
}

E ora, quando visualizzi il modulo, puoi vedere immediatamente la differenza!

Desideri personalizzare anche l'oggetto dell'email per questo componente aggiuntivo quando vengono inviate le notifiche? Dai un'occhiata al nostro tutorial su Come modificare l'oggetto dell'email nelle notifiche email di Salva e Riprendi.