Gostaria de personalizar o botão de envio para se adequar melhor ao design ou à personalidade do seu sítio? O botão de envio do seu formulário pode desempenhar um papel importante nas taxas de envio.
Este guia explica como personalizar o texto e o estilo do botão de envio do seu formulário.
Alterar o texto do botão Enviar
Para alterar o texto "Submeter" do botão do seu formulário, abra o construtor de formulários em Definições " Geral. Aqui, verá dois campos para definir o texto no botão de envio:
- Texto do botão Enviar: O texto mostrado quando este botão ainda não foi clicado
- Texto de processamento do botão Enviar: O texto apresentado depois de o utilizador clicar neste botão, mas antes de a confirmação ser apresentada ao utilizador
Pode alterar o texto do botão de envio de acordo com as suas preferências. Quando estiver satisfeito com as alterações, vá em frente e guarde o formulário.
Estilizar o botão Enviar
O CSS proporciona uma flexibilidade incrível para personalizar o botão de envio, bem como qualquer outro aspeto do seu formulário.
Se é novo no domínio das CSS ou gostaria de se atualizar, a melhor forma de começar é com o nosso guia de introdução às 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 */
}
Pode alterar qualquer um destes valores para estilizar o botão de forma diferente. Por exemplo, vamos começar por dar ao nosso botão um fundo amarelo.
O primeiro passo é encontrar o código hexadecimal da cor que pretendemos - htmlcolorcodes.com ou Adobe Color CC são ferramentas úteis e gratuitas para o fazer.
Assim que tivermos o código hexadecimal para o tom de amarelo que pretendemos, podemos criar o nosso CSS:
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
background-color: #FAF243 !important; /* Yellow background */
}
De seguida, precisamos de adicionar este CSS ao nosso site. A maneira mais simples de fazer isso é usando o Editor CSS do WordPress. Para o abrir, vá a Aparência " Personalizar e selecione CSS adicional.
Depois de abrir a secção CSS adicional, cole o seu novo CSS. Em seguida, clique no botão Salvar e publicar e está tudo pronto!
Abaixo está o aspeto do nosso botão agora com este CSS aplicado:
Personalizar estilos de Hover
As CSS permitem-lhe aplicar estilos completamente diferentes quando o cursor passa por cima de um botão. Esta alteração de estilo ajuda a experiência do utilizador, pois permite-lhe saber que este objeto é clicável.
Abaixo está o CSS padrão no WPForms quando se passa o mouse sobre um botão. Como 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 */
}
Poderá reparar que isto é muito menos CSS do que o que vimos para o botão quando este não está sobre o rato. Isto deve-se ao facto de as CSS aplicarem todas as CSS anteriores ao botão em que o rato está a pairar, salvo indicação em contrário.
Se deixar os estilos predefinidos, por exemplo, a cor do texto permanecerá preta quando se passar o rato por cima do botão. Isto deve-se ao facto de a cor do texto do botão ser normalmente preta e não lhe termos dito para mudar ao passar o rato.
Tal como no exemplo anterior de CSS personalizado, pode alterar qualquer um destes valores para estilizar de forma diferente os estilos de foco do botão. Para o nosso exemplo, vamos dar ao botão um fundo amarelo mais escuro quando passar o rato por cima.
.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 */
}
Aqui está o aspeto do botão com o CSS aplicado:
Personalizar estilos de focagem
Tal como pode definir um estilo de foco 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 utilizar a tecla de tabulação para navegar na página.
A utilização de um estilo de foco melhora a experiência do utilizador, especialmente útil para utilizadores 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, o background-color é um tom ligeiramente mais escuro do que o padrão, e a borda também é subtilmente alterada. Isto permite ao utilizador saber que o botão está agora em foco e que irá receber quaisquer pressões de teclas relevantes.
Para este exemplo, vamos utilizar uma cor diferente do 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, este é o aspeto do botão quando está em foco:
Exemplo de CSS
Agora que já cobrimos o básico, vamos ver um exemplo completo de CSS personalizado para um botão de envio.
Aqui está o CSS que vamos adicionar para este exemplo, que inclui alterações de estilo para pairar e focar:
/* 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á o aspeto do nosso botão agora com este CSS aplicado:
Quando se passa o rato por cima:
E quando focado. Lembre-se de que as únicas alterações são as cores do fundo e do contorno:
Perguntas mais frequentes
Estas são as respostas a algumas das principais perguntas sobre como personalizar o botão de envio no WPForms.
Posso alterar a posição do botão para que seja apresentado 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 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 do seu site. Se pretender aplicar o estilo a um formulário específico, terá de utilizar a opção #wpforms-submit-FORM-ID seletor CSS. Aqui está um exemplo de snippet.
#wpforms-submit-FORM-ID {
margin: 0 auto !important;
display: block !important;
}
Eis o aspeto do botão no frontend.
Se pretender que o botão seja apresentado a toda a largura, utilize a opção width: 100% propriedade CSS. Aqui está uma versão actualizada do excerto acima.
div.wpforms-container-full .wpforms-form button[type=submit] {
margin: 0 auto !important;
display: block !important;
width: 100% !important;
}
Ecrã 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 é que oculto o botão de submissão no meu formulário?
A ocultação do botão de submissão é particularmente útil se estiver a utilizar o suplemento Cálculos para criar calculadoras no seu site. Para ocultar o botão de envio do seu formulário, terá de adicionar um snippet 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 este snippet para o seu site, consulte o nosso guia sobre como ocultar o botão de envio.
É isso mesmo! Agora pode personalizar o seu botão de envio utilizando CSS personalizado.
Quer mais exemplos? Consulte o nosso tutorial com ainda mais CSS de botão de envio que pode copiar e colar diretamente no seu site.