Personalizando o Botão de Envio

Atualizado:
Ver Markdown

Gostaria de personalizar o botão de envio para que ele se adapte melhor ao design ou à personalidade do seu site? O botão de envio do seu formulário pode desempenhar um papel importante nas taxas de envio.

Este guia abordará como personalizar o texto e o estilo do botão de envio do seu formulário.

Alterando o Texto do Botão de Envio

Para alterar o texto 'Enviar' do botão do seu formulário, abra o construtor de formulários em Configurações » Geral. Aqui, você verá dois campos para definir o texto no botão de envio:

configurações do botão de envio
  • Texto do Botão de Envio: O texto exibido quando este botão ainda não foi clicado
  • Texto de Processamento do Botão de Envio: O texto exibido após o usuário clicar neste botão, mas antes que a confirmação seja exibida ao usuário
texto de processamento de envio

Você pode prosseguir e alterar o texto do botão de envio de acordo com sua preferência. Assim que estiver satisfeito com as alterações, salve o formulário.

Estilizando o Botão de Envio

CSS oferece flexibilidade incrível para personalizar o botão de envio, bem como qualquer outro aspecto do seu formulário.

Se você é novo em CSS ou gostaria de uma atualização, o melhor lugar para começar é com nosso guia introdutório de CSS.

Se você preferir estilizar seu formulário sem escrever código, confira nosso tutorial de estilização de formulários para aprender como personalizar seu formulário no editor de blocos.

Aqui está o CSS padrão para um botão de envio WPForms, bem como comentários para observar o que cada linha de CSS faz:

.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    background-color: #eee; /* Grey background */
    border: 1px solid #ddd; /* Dark grey border */
    color: #333; /* Black text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */
}

Você pode alterar qualquer um desses valores para estilizar o botão de forma diferente. Como exemplo, vamos começar dando ao nosso botão um fundo amarelo.

O primeiro passo é encontrar o código hexadecimal da cor que queremos – htmlcolorcodes.com ou Adobe Color CC são ferramentas gratuitas úteis para isso.

Depois de termos o código hexadecimal do tom de amarelo que queremos, podemos criar nosso CSS:

.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    background-color: #FAF243 !important; /* Yellow background */
}

Ao adicionar CSS ao seu site, pode ser necessário incluir !important antes do ponto e vírgula para garantir que seus estilos personalizados sejam aplicados com sucesso. Confira nosso guia sobre solução de problemas de CSS para mais detalhes.

Em seguida, precisamos adicionar este CSS ao nosso site. A maneira mais simples de fazer isso é usando o Editor de CSS do WordPress. Para abri-lo, vá em Aparência » Personalizar e selecione CSS Adicional.

Adicionar CSS personalizado ao WordPress

Depois de abrir a seção CSS Adicional, cole seu novo CSS. Em seguida, clique no botão Salvar e Publicar, e pronto!

Editor CSS do WordPress

Abaixo está como nosso botão ficará agora com este CSS aplicado:

Botão de envio amarelo

Seu novo CSS não está aparecendo no seu site? Confira nosso tutorial sobre como solucionar esse problema.

Personalizando Estilos de Hover

O CSS permite que você aplique estilos completamente diferentes quando um cursor paira sobre um botão. Essa mudança de estilo ajuda na experiência do usuário porque permite que o usuário saiba que este objeto é clicável.

Abaixo está o CSS padrão no WPForms quando um botão está em foco. Conforme observado nos comentários, a cor de fundo fica um pouco mais escura e a cor da borda fica um pouco mais clara:

.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
    background-color: #ddd; /* Darker grey background */
    border: 1px solid #ccc; /* Lighter grey border */
}

Você pode notar que isso é muito menos CSS do que vimos para o botão quando ele não está em foco. Isso ocorre porque o CSS aplicará todo o CSS anterior ao seu botão em foco, a menos que seja instruído de outra forma.

Se você deixar os estilos padrão, por exemplo, a cor do texto permanecerá preta quando o botão estiver em foco. Isso ocorre porque a cor do texto do botão normalmente seria preta, e não dissemos para alterá-la ao passar o mouse.

Assim como no exemplo anterior de CSS personalizado, você pode alterar qualquer um desses valores para estilizar os estilos de foco do botão de forma diferente. Para nosso exemplo, daremos ao botão um fundo amarelo mais escuro quando em foco.

.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
    background-color: #e5da00 !important; /* Darker yellow background */
}

Veja como o botão ficará com o CSS aplicado:

Estilos de hover do botão de envio

Personalizando Estilos de Foco

Assim como você pode definir um estilo de foco para seu botão com CSS, você também pode definir um estilo de foco. O estilo de foco é aplicado quando o botão é o ponto focal de quaisquer eventos na página. Por exemplo, se você usar a tecla Tab para navegar na página.

Usar um estilo de foco melhora a experiência do usuário, especialmente útil para usuários que dependem da navegação por teclado para navegar na web.

Aqui está o CSS padrão no WPForms quando um botão está em foco:

.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
    background-color: #ddd;
    border: 1px solid #ccc;
    cursor: pointer;
}

Neste caso, a background-color é um tom ligeiramente mais escuro que o padrão, e a borda também é sutilmente alterada. Isso permite que o usuário saiba que o botão está agora em foco e receberá quaisquer pressionamentos de tecla relevantes.

Para este exemplo, vamos usar uma cor diferente de amarelo, para tornar o estilo de foco distinto do estilo de foco.

.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
    background-color: #80ccf6 !important;
}

Com este CSS personalizado aplicado, veja como o botão ficará quando em foco:

Estilo de foco do botão de envio

Para opções de personalização mais avançadas para seu botão de envio usando CSS, incluindo estilos de largura total, efeitos de pressionado e animações ao passar o mouse, consulte nossa documentação do desenvolvedor para uma ampla variedade de exemplos e tutoriais.

Exemplo de CSS

Agora que cobrimos o básico, vamos passar por um exemplo completo de CSS personalizado para um botão de envio.

O código abaixo alterará o botão de envio para todos os formulários criados em seu site com o WPForms. Se você quiser estilizar o botão de envio apenas em um único formulário, precisará encontrar o ID exclusivo desse formulário. Para mais detalhes, consulte nosso guia completo sobre estilização de formulários de contato com CSS.

Aqui está o CSS que adicionaremos para este exemplo, que inclui alterações de estilo tanto para foco quanto para foco:

/* New button styles */
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    padding: 15px !important; /* Increase distance between text and border */
    width: 100% !important; /* Make the button full-width */
    font-size: 1.5em !important; /* Increase text size */
    background-color: #af0000 !important; /* Red background */
    color: #fff !important; /* White text */
    border: 8px double #860b0b !important; /* Dark red, double-line border */
}

/* New button hover styles */
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
    background-color: #860b0b !important; /* Dark red background */
    border: 8px double #af0000 !important; /* Red, double-line border */
}

/* New button focus styles */
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
    background-color: red !important; /* Dark red background */
    border: 8px double #860b0b !important; /* Red, double-line border */
}

Abaixo está como nosso botão ficará agora com este CSS aplicado:

Novo CSS para o botão

Ao passar o mouse:

CSS do novo botão ao passar o mouse

E quando em foco. Lembre-se, as únicas alterações são as cores de fundo e de borda:

CSS do novo botão ao focar

Perguntas Frequentes

Estas são as respostas para algumas das principais perguntas sobre a personalização do botão de envio no WPForms.

Posso alterar a posição do botão para que ele seja exibido no centro?

Por padrão, os botões de envio do WPForms são alinhados à esquerda da página. No entanto, você pode usar CSS personalizado para alinhar o botão ao centro. Para fazer isso, adicione o seguinte trecho de código ao seu site.

div.wpforms-container-full .wpforms-form button[type=submit] {
    margin: 0 auto !important;
    display: block !important;
}

O código CSS acima aplicará o estilo a todos os formulários em seu site. Se você quiser aplicar o estilo em um formulário específico, precisará usar o seletor CSS #wpforms-submit-FORM-ID. Aqui está um exemplo de trecho.

#wpforms-submit-FORM-ID {
     margin: 0 auto !important;
     display: block !important;
}

Certifique-se de substituir FORM-ID no trecho acima pelo ID do formulário que você deseja estilizar.

Veja como o botão ficará no frontend.

Botão centralizado

Se você quiser que o botão seja exibido em largura total, use a propriedade CSS width: 100%. Aqui está uma versão atualizada do trecho acima.

div.wpforms-container-full .wpforms-form button[type=submit] {
     margin: 0 auto !important;
     display: block !important;
     width: 100% !important;
}

Exibição do botão em largura total.

Botão de largura total

Posso personalizar o botão de envio do WPForms no Elementor Builder?

Sim. O WPForms se integra ao Elementor para fornecer estilização de formulários diretamente no Elementor Builder. Você pode personalizar seus campos de formulário, rótulos, cores e o botão de envio.

Para saber mais sobre como personalizar seu formulário no Elementor, consulte nosso guia sobre adicionar WPForms a uma página do Elementor.

Como oculto o botão de envio no meu formulário?

Ocultar o botão de envio é particularmente útil se você estiver usando o addon de Cálculos para criar calculadoras em seu site. Para ocultar o botão de envio do seu formulário, você precisará adicionar um trecho de CSS personalizado ao seu site. O trecho de código está disponível na biblioteca de trechos de código do WPForms.

Para obter detalhes sobre como importar este trecho para o seu site, certifique-se de conferir nosso guia sobre como ocultar o botão de envio.

É isso! Agora você pode personalizar seu botão de envio usando CSS personalizado.

Quer mais exemplos? Confira nosso tutorial com ainda mais CSS para botões de envio que você pode copiar e colar diretamente em seu site.

Ainda com dificuldades? Como podemos ajudar?
Última atualização em 11 de set. de 2024

O Melhor Plugin Construtor de Formulários de Arrastar e Soltar para WordPress

Fácil, Rápido e Seguro. Junte-se a mais de 6 milhões de proprietários de sites que confiam no WPForms.