Resumo de IA
Os botões de envio são um dos aspectos mais facilmente ignorados do design de formulários. Embora sejam uma pequena parte dos formulários, localizados na parte inferior, os botões de envio ainda podem ter um grande impacto no apelo visual geral do seu formulário.
Depois de testar toneladas de diferentes tipos de formulários de leads para aumentar as conversões, posso dizer que um botão de envio bem elaborado pode fazer toda a diferença ao chamar a atenção dos seus visitantes.
Neste artigo, compartilharei algumas dicas e melhores práticas com base na minha experiência otimizando formulários de leads para conversões. Vamos lá.
Dicas Básicas de Estilização do Botão de Envio no WPForms
O WPForms oferece diferentes maneiras de estilizar o botão de envio em seu formulário. Eu prefiro usar as opções de Estilo do Formulário no editor de blocos do WordPress. É a maneira mais fácil de personalizar praticamente todos os componentes do seu formulário.
As personalizações de estilo do botão estão disponíveis em todas as versões do WPForms. Mas recomendo usar o WPForms Pro para desbloquear toda a gama de opções de estilo, incluindo temas de formulário prontos, bem como configurações para o fundo e contêineres do seu formulário.
Você pode encontrar as configurações de estilos do botão de envio no painel direito das opções do seu formulário dentro do editor de blocos.
Essas configurações permitem controlar o tamanho, a borda e as cores do botão de envio sem nenhum código.
Tamanho do Botão de Envio
O WPForms oferece três predefinições para o tamanho do botão: pequeno, médio e grande.
Todas as 3 opções são perfeitamente viáveis do ponto de vista do design. Você não estará violando nenhuma melhor prática ao escolher qualquer tamanho de botão aqui.
O que é mais importante aqui é a consistência do design. Por exemplo, se você estiver usando tamanhos de campo pequenos e botões grandes, seu formulário pode parecer um pouco desproporcional em alguns lugares.
Para o melhor equilíbrio, tente usar tamanhos consistentes para todos os elementos em seus formulários.
Nosso guia sobre estilização de formulários usando o editor de blocos explora as diferentes opções de personalização para cada componente do formulário. Todos esses aspectos diferentes se unem para criar o design perfeito do formulário.
Tipo de Borda
Os tipos de borda são inteiramente uma escolha estilística. Se você notou, é cada vez mais comum usar um design sem bordas para um estilo limpo e minimalista.
No entanto, você também tem opções para usar tipos de borda menos comuns no WPForms:
- Bordas sólidas são bastante populares e dão aos seus formulários um visual profissional e refinado.
- Bordas tracejadas ou pontilhadas são menos comuns, mas adicionam um toque de criatividade lúdica. Use-as se o tema do seu site for mais casual, mas cuidado para não exagerar.
- Designs sem borda são elegantes e modernos, frequentemente usados para enfatizar o minimalismo ou para integrar o botão perfeitamente ao fundo. Ao optar por botões sem borda, certifique-se de que haja contraste ou sombra suficientes para distinguir o botão dos elementos ao redor.
Tamanho da Borda
Você também pode ajustar o tamanho da sua borda. É uma boa prática ter uma espessura de borda que complemente o tamanho do botão. Quando uso um botão pequeno, certifico-me de complementá-lo com uma borda fina de 3-4px. Isso cria o visual mais equilibrado, na minha experiência.
Para botões grandes, uma largura de borda de 4-6px é mais adequada. Uma boa regra a seguir é usar bordas sutis que adicionem estrutura sem sobrecarregar o design do botão.
Raio da Borda
A configuração de raio da borda no WPForms oferece controle total sobre o quão arredondados seus botões ficarão. Botões mais arredondados funcionam bem em temas que usam estilos modernos.
Na verdade, alguns estudos encontraram uma correlação entre botões redondos e maiores taxas de conversão. Vale a pena experimentar com botões redondos se você estiver otimizando para conversões.
Você pode usar um raio de borda de cerca de 15-20px para obter o visual de botão em forma de pílula que muitos sites modernos usam hoje.
Se preferir manter um visual formal, sinta-se à vontade para manter o raio da borda em 0px para manter seu botão quadrado.
O importante é equilibrar a curvatura do seu botão com o tema geral do design do seu site.
Tenho a teoria de que formas mais arredondadas funcionam melhor quando usadas com moderação. Dessa forma, elas têm maior probabilidade de se destacar das formas geométricas populares que você geralmente usa em outras partes do seu site.
Cor de Fundo do Botão
No WPForms, a cor de fundo do botão é fácil de selecionar com o seletor de cores. A escolha da cor é importante porque afeta a visibilidade do seu botão.
Selecione uma cor de fundo que contraste com o fundo do seu formulário para tornar seu botão o mais visível possível em todos os dispositivos.
Sua marca também desempenha um papel na seleção de cores. Se o design do seu site é baseado em uma paleta de cores de marca, geralmente é uma boa ideia manter-se próximo às cores temáticas da sua marca.
De qualquer forma, certifique-se de evitar cores excessivamente brilhantes ou conflitantes que possam distrair os usuários desnecessariamente.
Cor da Borda
A borda é apenas uma pequena fração do botão de envio. Mas é um ótimo lugar para adicionar cores de destaque para aumentar o apelo visual do seu formulário.
As bordas ficam mais atraentes quando contrastam bem com a cor de fundo do seu botão. Isso não só adiciona personalidade ao seu design, mas também aumenta a visibilidade do seu botão.
Recomendo o uso de tons sutis para evitar chamar muita atenção para a borda em si. O objetivo é acentuar o botão em vez de aumentar as distrações com bordas de botões chamativas.
Cor do Texto do Botão
Com a cor do texto do botão, você deve ter um único objetivo: priorizar a legibilidade. A maneira mais fácil de tornar o texto do seu botão fácil de ler é usando uma cor de texto que contraste acentuadamente com o fundo do botão.
Uma boa regra geral a seguir é usar texto branco para fundos de botões escuros e texto preto ou cinza escuro para tons mais claros de fundos.
Embora você possa usar cores ousadas e vibrantes em outros componentes do botão de envio, é melhor evitar se desviar muito das cores neutras padrão para a cor do texto, a fim de manter uma boa legibilidade.
Técnicas Avançadas de Estilização para Botões de Envio
O WPForms não exige que você use nenhum código para a estilização básica do seu botão. No entanto, você precisará usar CSS simples para alguns efeitos avançados, como cores gradientes.
Isso é muito mais fácil do que parece. Primeiro, você precisará do plugin WPCode instalado em seu site, o que permitirá inserir facilmente trechos de código para alterações nos estilos do seu botão de envio.
Instalar WPCode
Abra seu painel do WordPress e vá para Plugins » Adicionar Novo.
Na tela Adicionar Plugins, use a caixa de pesquisa para procurar por WPCode. Em seguida, pressione o botão Instalar agora para adicionar o plugin ao seu site.
O botão "Instalar agora" mudará para "Ativar" após terminar a instalação. Pressione o botão Ativar e você estará pronto para usar o WPCode para adicionar trechos de código ao seu site.
Depois disso, passe o cursor sobre Trechos de Código no painel lateral do seu painel do WordPress e clique em + Adicionar Trecho conforme o menu se expande.
Em seguida, clique em Usar Trecho em Adicionar seu Código Personalizado (Novo Trecho)
Você precisará selecionar o tipo de trecho. Para ajustes de estilo, você adicionará trechos personalizados de CSS. Portanto, prossiga e selecione Trecho de CSS nas opções disponíveis.
Agora, você só precisará copiar e colar trechos de código na janela do editor de código para aplicar alterações de estilo aos seus formulários. Compartilharei exemplos de códigos CSS comuns que você pode usar para alterar a estilização do seu botão de envio.
Adicionar Cores Gradientes ao Botão de Envio
Um gradiente de cor é bastante atraente e geralmente indica um design de formulário altamente profissional. Isso é ótimo quando você deseja transmitir seu profissionalismo e atenção aos detalhes com cores gradientes para botões.
Aqui está o código para um trecho que você pode usar para adicionar um gradiente linear à cor do botão de envio:
#wpforms-8 .wpforms-submit {
background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
}
Neste código, "#wpforms-8" refere-se ao ID do Formulário do seu formulário específico. O formulário que estou editando tem o ID 8. Se o seu ID de Formulário for diferente, digamos 17, você pode adicionar o número correto a este trecho de código (ou seja, "#wpforms-17").
Você pode encontrar o ID do formulário olhando o número mencionado no shortcode de um formulário específico. Isso é mencionado na coluna Shortcode do seu formulário na tela Visão Geral do Formulário.
Certifique-se de clicar em Salvar Trecho e ativá-lo para aplicar os efeitos de passagem de mouse ao botão de envio do seu formulário.
- O ângulo do gradiente
- Código hexadecimal da primeira cor
- Código hexadecimal da segunda cor
Você pode alterar esses valores conforme desejado. Se precisar encontrar os códigos hexadecimais exatos para as cores que precisa, pode usar este gerador de cores HTML.
Depois de terminar de criar seu trecho de CSS personalizado, clique no botão Salvar Trecho e no botão de alternância ao lado dele para salvar e ativar o trecho.
Seu formulário agora terá cores gradientes aplicadas ao seu botão de envio.
Adicionar Efeitos de Hover ao Botão de Envio
Por padrão, o WPForms adiciona um efeito de passagem de mouse (hover) ao botão de Envio para indicar que ele é interativo e fornecer feedback visual imediato a um visitante que pretende clicar.
Mas se você quiser adicionar um efeito de passagem de mouse ao usar um gradiente, pode usar este código:
#wpforms-8 .wpforms-submit {
background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
transition: background 0.3s ease; /* Smooth transition on hover */
}
#wpforms-8 .wpforms-submit:hover {
background: linear-gradient(45deg, #0f88d4, #066aab); /* Changes gradient on hover */
}Este código também inclui um efeito de transição para garantir que as interações com o botão pareçam polidas. Geralmente, um efeito de transição de 0,3s – 0,4s proporciona o efeito mais suave.
Se você quiser apenas alterar o efeito de passagem de mouse padrão em um botão com cores sólidas, pode usar as configurações de Estilos de Formulário do WPForms no editor de blocos para definir a cor de fundo base desejada.
Em seguida, use este código simplificado para alterar as cores na passagem de mouse adicionando o código hexadecimal da sua cor desejada:
#wpforms-8 .wpforms-submit:hover {
background: #0f88d4; /* Solid color on hover */
transition: background 0.3s ease; /* Smooth transition */
}Make sure to click Save Snippet and activate it to apply the hover effects on your form submit button.
Se você estiver procurando por um efeito de passagem de mouse mais exclusivo, pode aplicar o efeito de pulsação com este código:
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(15, 136, 212, 0.4);
}
70% {
box-shadow: 0 0 0 20px rgba(15, 136, 212, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(15, 136, 212, 0);
}
}
#wpforms-8 .wpforms-submit:hover {
animation: pulse 1.5s infinite;
}
Isso adiciona um toque criativo com um botão que pulsa na passagem de mouse, convidando os cliques dos visitantes.
Dicas de Otimização para o Texto do Botão de Envio
A estilização é um aspecto que influencia os cliques no botão de envio. O segundo componente importante é o texto do botão de envio. Estas poucas palavras podem ser o ponto decisivo em que seus usuários decidem se agem ou desistem.
Um bom texto de botão inspira ação focando em um benefício específico que seu visitante pode esperar ao clicar. Evite simplesmente usar um "enviar" genérico. Em vez disso, use linguagem direta e orientada para a ação, apontando para um objetivo.
Aqui estão alguns exemplos de texto de botão de envio otimizado para conversão:
- Receber Minha Cotação Gratuita
- Baixar Meu eBook
- Entrar na Comunidade
- Iniciar Minha Jornada
- Acessar Modelos Gratuitos
- Economize 20% Hoje
Mas como você realmente edita o texto do botão de envio no WPForms? É fácil. No construtor de formulários, clique no botão Enviar na parte inferior do formulário para ir instantaneamente para Configurações » Geral.
Em seguida, basta digitar seu texto na caixa Texto do Botão de Envio. Você também pode editar o texto que aparece durante o tempo em que o formulário está sendo enviado na caixa Texto de Processamento do Botão de Envio.
E é só isso.
Agora que você tem uma ideia melhor sobre as melhores práticas para botões de envio e como aplicá-las aos seus formulários, é hora de otimizar o texto do seu botão para mais cliques.
Leia Também: Como Visualizar o Histórico do Seu Formulário no WordPress
Criar botões de envio eficazes para seus formulários não é uma ciência exata. Não tenha medo de experimentar diferentes estilos e textos de botões e monitorar seus resultados (isso pode ser tão simples quanto testar um formulário A/B e medir a diferença nas taxas de envio de formulários).
Em seguida, Estilize as Notificações por E-mail do WPForms
Estilizar formulários com o WPForms é um processo rápido e sem esforço. Mas essa flexibilidade de personalização também se estende às suas notificações por e-mail. Com notificações voltadas para o cliente, você tem uma ótima oportunidade de incorporar sua marca às notificações para adicionar uma aparência mais profissional na qual seus clientes podem confiar.
Nosso guia sobre como personalizar notificações por e-mail de formulários mostra a maneira mais fácil de estilizar suas notificações.
Crie seu formulário WordPress agora
Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
