Como alterar a cor do botão Enviar com o WPForms

Gostaria de personalizar a cor do botão de envio do seu formulário para combinar com a marca do seu site? Embora o WPForms 1.8.1+ ofereça uma personalização de cores incorporada através do editor de blocos, também é possível conseguir isso usando CSS personalizado para um controlo mais preciso.

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

é aplicado o estilo predefinido ao botão de submissão

Com o lançamento do WPForms 1.8.1, agora é possível alterar facilmente a cor do botão Enviar sem usar CSS, bastando adicionar o formulário à sua página usando um editor de blocos. Com este recurso de estilo de formulário, você pode estilizar seus formulários sem escrever qualquer CSS. Para saber mais sobre isso, consulte esta documentação útil.

No entanto, também pode utilizar CSS personalizadas para o conseguir e, para este tutorial, este é o método que utilizaremos para alterar o estilo da cor do botão Submeter.

Configurar o formulário

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

Para obter assistência na criação de um formulário, consulte o nosso guia completo sobre como criar o seu primeiro formulário.

Adicionar o código CSS

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

Se precisar de ajuda sobre como e onde adicionar CSS ao seu site, consulte o nosso tutorial sobre como adicionar estilos CSS personalizados.

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

As cores neste CSS são definidas utilizando códigos hexadecimais, sobre os quais pode ler mais nesta documentação

foi assim que alterámos a cor do botão de envio

Nota: Para mais alterações de estilo ao botão de envio, como estilos de foco, consulte o nosso tutorial de estilo do botão de envio.

Personalização do código

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

Em linha 7, substituir #066AAB com a cor de botão pretendida.

Em linha 8, substituir #066AAB com a mesma cor para combinar com o rebordo.

Em linha 14, substituir #04446E com a cor de foco pretendida (normalmente, um tom mais escuro da cor do botão).

Por exemplo, para criar um botão vermelho, pode utilizar:

cor de fundo: #ff0000 !important;
cor das margens: #ff0000 !important;

Perguntas mais frequentes

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

A: Se não vir as suas alterações, limpe primeiro a cache do seu browser. Se continuar a 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 obter mais ajuda, consulte o nosso Guia de resolução de problemas CSS.

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

R: Se estiver a utilizar um campo Quebra de página no seu formulário e estiver a utilizar os botões Seguinte e Anterior para navegação, utilizaremos algum CSS que fará com que todos estes botões tenham exatamente o mesmo estilo. Basta copiar 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 selecionar apenas um dos meus formulários?

R: Se quiser alterar apenas um formulário, basta selecionar o ID do formulário no CSS. Neste exemplo, vamos selecionar o ID de formulário 999 para o botão Submeter, bem como os botões Seguinte e Anterior do campo Quebra de página.

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

Se não tiver a certeza de onde encontrar o ID do formulário, consulte o nosso guia sobre a localização do ID do campo e do 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 já está! Agora você alterou a cor do seu botão Enviar. A seguir, gostaria de usar CSS para personalizar o botão Enviar de outras maneiras? Dê uma olhada no nosso tutorial sobre como usar CSS para personalizar o botão Enviar.

Como alterar a cor do botão Enviar