Como Personalizar o Link Salvar e Continuar

Visão geral

Gostaria de personalizar o link Salvar e Continuar? Usando um pequeno trecho de CSS, você pode facilmente converter o link de texto que aparece quando o addon Salvar e Continuar está ativado para que ele apareça como um botão. Vamos começar!

Adicionando o trecho de CSS

Para fins desta documentação, vamos presumir que você já criou seu formulário e ativou o addon Salvar e Continuar.

No entanto, caso precise de ajuda para ativar este addon em seu formulário, consulte este guia útil.

Depois que seu formulário for criado e o addon ativado, basta adicionar este CSS ao seu site e personalizar as cores, font-family, 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 você quisesse aplicar essa 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, você pode ver imediatamente a diferença!

Gostaria também de personalizar o assunto do e-mail para este addon quando as notificações forem enviadas? Dê uma olhada em nosso tutorial sobre Como Alterar o Assunto do E-mail nas Notificações de E-mail Salvar e Continuar.