Como Alterar a Cor do Botão de Envio

Gostaria de personalizar a cor do botão de envio do seu formulário para corresponder à marca do seu site? Embora o WPForms 1.8.1+ ofereça personalização de cores integrada através do editor de blocos, também pode conseguir isto utilizando CSS personalizado para um controlo mais preciso.

Este guia irá mostrar-lhe como alterar a cor do seu botão de envio utilizando CSS.

Com o lançamento do WPForms 1.8.1, pode agora alterar facilmente a cor do botão de Envio sem usar CSS, apenas adicionando o formulário à sua página utilizando um editor de blocos. Com esta funcionalidade de estilização de formulários, pode estilizar os seus formulários sem escrever qualquer CSS. Para saber mais sobre isto, consulte esta documentação útil.

No entanto, também pode usar CSS personalizado para conseguir isto e, para este tutorial, este é o método que usaremos para alterar a estilização da cor do botão Enviar.

Configuração do Formulário

Para começar, abra o construtor de formulários criando um novo formulário ou editando um existente. Adicione os campos do formulário desejados conforme necessário.

Adicionar o Código CSS

O seguinte trecho de CSS irá alterar a cor do seu botão de envio:

O CSS acima irá alterar o fundo da cor do botão de envio para azul (#066AAB) com texto branco em todos os botões Enviar do WPForms no seu site.

Personalizar o Código

Para usar cores diferentes, substitua os códigos hexadecimais no código:

Na linha 7, substitua #066AAB pela cor de botão desejada.

Na linha 8, substitua #066AAB pela mesma cor para corresponder à borda.

Na linha 14, substitua #04446E pela cor de passagem do rato desejada (normalmente uma tonalidade mais escura da cor do seu botão).

Por exemplo, para fazer um botão vermelho, pode usar:

background-color: #ff0000 !important;
border-color: #ff0000 !important;

Perguntas Frequentes

P: Por que é que este CSS não funciona para mim?

R: Se não vir as suas alterações, limpe primeiro a cache do seu navegador. Se ainda não funcionar, o seu tema pode estar a substituir os estilos. Tente adicionar !important às suas regras CSS, como mostrado no nosso exemplo. Para mais ajuda, consulte o nosso guia de resolução de problemas de CSS.

P: Isto também funcionará para os botões Seguinte e Anterior?

R: Se estiver a usar um campo de Quebra de Página no seu formulário e estiver a usar os botões Seguinte e Anterior para navegação, usaremos algum CSS que fará com que todos estes botões tenham exatamente a mesma estilização. Simplesmente copie este CSS para o seu site.

.wpforms-form button[type=submit], button.wpforms-page-button {
    background-color: #024488 !important;
    border-color: #024488 !important;
    color: #fff !important;
    transition: background 0.3s ease-in-out;
}

.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
    background-color: #022B57 !important;
}

P: Posso direcionar apenas um dos meus formulários?

A: Se quisesse alterar apenas um formulário, bastaria selecionar o ID do formulário no seu CSS. Neste exemplo, vamos selecionar o ID do formulário 999 para o botão Enviar, bem como para os botões Seguinte e Anterior do campo Quebra de Página.

Terá de atualizar o 999 para corresponder ao ID do seu próprio formulário.

button#wpforms-submit-999, form#wpforms-form-999 button.wpforms-page-button {
    background-color: #024488;
    border-color: #024488;
    color: #fff;
    transition: background 0.3s ease-in-out;
}

button#wpforms-submit-999:hover, form#wpforms-form-999 button.wpforms-page-button:hover {
    background-color: #022B57;
}

E é tudo! Alterou agora a cor do seu botão de envio. Em seguida, gostaria de usar CSS para personalizar o botão Enviar de outras formas? Por favor, consulte o nosso tutorial sobre usar CSS para personalizar o botão de envio.