Como Personalizar o Link de Guardar e Retomar

Visão geral

Gostaria de personalizar o link de guardar e retomar? Usando um pequeno trecho de CSS, pode facilmente converter o link de texto que aparece quando o addon Guardar e Retomar está ativado para que pareça um botão. Vamos começar!

Adicionar o trecho de CSS

Para efeitos desta documentação, vamos presumir que já criou o seu formulário e ativou o addon Guardar e Retomar.

No entanto, caso necessite de alguma assistência para ativar este addon para o seu formulário, consulte este guia útil.

Assim que o seu formulário for criado e o addon ativado, basta adicionar este CSS ao seu site e personalizar as cores, a font-family, o font-size, etc., como desejar.

Se precisar de ajuda sobre como e onde adicionar trechos de CSS ao seu site, consulte este tutorial.

Estilização para todos os formulários

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;
}

Estilização para formulários específicos

Se quisesse aplicar esta alteração apenas a um formulário específico, use este CSS em vez disso.

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 agora, ao visualizar o formulário, pode ver imediatamente a diferença!

Gostaria também de personalizar a linha de assunto do e-mail para este addon quando as notificações são enviadas? Dê uma vista de olhos ao nosso tutorial sobre Como Alterar o Assunto do E-mail nas Notificações de E-mail de Guardar e Retomar.