Panoramica
Volete personalizzare il collegamento a Salva e riprendi? Utilizzando un piccolo snippet CSS, è possibile convertire facilmente il link di testo che appare quando l'addon Salva e riprendi è abilitato in un pulsante. Cominciamo!
Aggiunta dello snippet CSS
Ai fini di questa documentazione, si presume che il modulo sia già stato creato e che sia stato attivato il componente aggiuntivo Salva e riprendi.
Tuttavia, se avete bisogno di assistenza per abilitare questo addon per il vostro modulo, consultate questa utile guida.
Una volta creato il modulo e abilitato l'addon, è sufficiente aggiungere questo CSS al sito e personalizzare i colori, il tipo di carattere, la dimensione del carattere, ecc.
Se avete bisogno di aiuto su come e dove aggiungere gli snippet CSS al vostro sito, consultate questo tutorial.
Styling per tutte le forme
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;
}
Styling per moduli specifici
Se si desidera applicare questa modifica solo a un modulo specifico, utilizzare 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;
}
Si noti che è necessario aggiornare l'ID del modulo nel CSS da 999 per farlo corrispondere al proprio ID del modulo. Se avete bisogno di aiuto per trovare il vostro ID modulo, consultate questa utile guida.
E ora, quando si visualizza il modulo, si nota immediatamente la differenza!
Volete personalizzare anche l'oggetto dell'e-mail di questo addon quando vengono inviate le notifiche? Date un'occhiata al nostro tutorial su Come modificare l'oggetto dell'e-mail sulle notifiche e-mail di salvataggio e ripresa.