Você gostaria de personalizar o botão de envio para se adequar 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 formulário.
Como alterar o texto do botão Enviar
Para alterar o texto "Enviar" do botão do 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:
- Texto do botão Enviar: O texto mostrado quando esse botão ainda não foi clicado
- Texto de processamento do botão Enviar: O texto mostrado depois que o usuário clica nesse botão, mas antes que a confirmação seja mostrada ao usuário
Você pode prosseguir e alterar o texto do botão Enviar de acordo com sua preferência. Quando estiver satisfeito com as alterações, vá em frente e salve o formulário.
Estilizando o botão Enviar
O CSS oferece uma flexibilidade incrível para personalizar o botão de envio, bem como qualquer outro aspecto do formulário.
Se você é novo no CSS ou gostaria de se atualizar, o melhor lugar para começar é com nosso guia introdutório ao CSS.
Aqui está o CSS padrão para um botão de envio do 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.
A primeira etapa é encontrar o código hexadecimal da cor desejada - htmlcolorcodes.com ou Adobe Color CC são ferramentas úteis e gratuitas para isso.
Quando tivermos o código hexadecimal para o tom de amarelo desejado, poderemos criar nosso CSS:
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
background-color: #FAF243 !important; /* Yellow background */
}
Em seguida, precisamos adicionar esse CSS ao nosso site. A maneira mais simples de fazer isso é usar o Editor de CSS do WordPress. Para abri-lo, vá para Appearance " Customize e selecione Additional CSS.
Depois de abrir a seção Additional CSS, cole seu novo CSS. Em seguida, clique no botão Save & Publish e está tudo pronto!
Abaixo está a aparência do nosso botão agora com esse CSS aplicado:
Personalização de estilos de Hover
O CSS permite que você aplique estilos completamente diferentes quando o cursor passa sobre um botão. Essa alteração no estilo ajuda a experiência do usuário, pois permite que ele saiba que esse objeto é clicável.
Abaixo está o CSS padrão no WPForms quando se passa o mouse sobre um botão. 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 há muito menos CSS do que vimos para o botão quando ele não está sobre o mouse. Isso ocorre porque o CSS aplicará todo o CSS anterior ao botão focalizado, a menos que seja dito o contrário.
Se você deixar os estilos padrão, por exemplo, a cor do texto permanecerá preta quando o botão passar o mouse sobre ele. Isso ocorre porque a cor do texto do botão normalmente seria preta, e não dissemos a ele para mudar 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. No nosso exemplo, daremos ao botão um fundo amarelo mais escuro quando passar o mouse sobre ele.
.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 */
}
Esta é a aparência do botão com o CSS aplicado:
Personalização de estilos de foco
Assim como você pode definir um estilo hover para o seu botão com CSS, também pode definir um estilo de foco. O estilo de foco é aplicado quando o botão é o ponto focal de qualquer evento na página. Por exemplo, se você usar a tecla Tab para navegar na página.
O uso de um estilo de foco melhora a experiência do usuário, o que é especialmente útil para usuários que dependem da navegação pelo 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;
}
Nesse caso, o background-color é um tom um pouco mais escuro do que o padrão, e a borda também é sutilmente alterada. Isso permite que o usuário saiba que o botão agora está em foco e receberá qualquer pressionamento de tecla relevante.
Para este exemplo, usaremos uma cor diferente do amarelo, para que o estilo de foco seja diferente 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 esse CSS personalizado aplicado, o botão terá a seguinte aparência quando estiver em foco:
Exemplo de CSS
Agora que já abordamos os conceitos básicos, vamos ver um exemplo completo de CSS personalizado para um botão de envio.
Aqui está o CSS que adicionaremos para este exemplo, que inclui alterações de estilo para passar o mouse e focalizar:
/* 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á a aparência do nosso botão agora com esse CSS aplicado:
Quando passar o mouse sobre ele:
E quando focado. Lembre-se de que as únicas alterações são as cores do plano de fundo e da borda:
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 ao lado esquerdo 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 quiser aplicar o estilo em um formulário específico, será necessário usar a tag #wpforms-submit-FORM-ID seletor CSS. Aqui está um exemplo de snippet.
#wpforms-submit-FORM-ID {
margin: 0 auto !important;
display: block !important;
}
Veja como o botão será exibido no frontend.
Se você quiser que o botão seja exibido em largura total, use a opção width: 100% propriedade CSS. Aqui está uma versão atualizada do snippet acima.
div.wpforms-container-full .wpforms-form button[type=submit] {
margin: 0 auto !important;
display: block !important;
width: 100% !important;
}
Tela de botões de largura total.
Posso personalizar o botão de envio do WPForms no Elementor Builder?
Sim. O WPForms se integra ao Elementor para fornecer estilo de formulário 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 como adicionar WPForms a uma página do Elementor.
Como faço para ocultar o botão de envio em meu formulário?
Ocultar o botão de envio é particularmente útil se você estiver usando o complemento Calculations para criar calculadoras em seu site. Para ocultar o botão de envio do formulário, você precisará adicionar um trecho de CSS personalizado ao seu site. O snippet de código está disponível na biblioteca de snippets de código do WPForms.
Para obter detalhes sobre como importar esse snippet para o seu site, não deixe de conferir nosso guia sobre como ocultar o botão de envio.
É isso aí! Agora você pode personalizar seu botão de envio usando CSS personalizado.
Deseja mais exemplos? Confira nosso tutorial com ainda mais CSS de botão de envio que você pode copiar e colar diretamente em seu site.