Resumo de IA
Os botões de envio são um dos aspetos mais facilmente ignorados do design de formulários. Embora sejam uma pequena parte dos formulários, escondidos 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 imensos tipos diferentes de formulários de contacto para aumentar as conversões, posso dizer-lhe que um botão de envio bem elaborado pode fazer toda a diferença para captar a atenção dos seus visitantes.
Neste artigo, partilharei algumas dicas e melhores práticas com base na minha experiência na otimização de formulários de contacto para conversões. Vamos a isso.
Dicas Básicas de Estilo para Botões de Envio no WPForms
O WPForms oferece diferentes formas de estilizar o botão de envio no seu formulário. Eu prefiro usar as opções de Estilo do Formulário no editor de blocos do WordPress. É a forma 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 o uso do WPForms Pro para desbloquear toda a gama de opções de estilo, incluindo temas de formulário prontos a usar, bem como definições para o fundo e os contentores do seu formulário.
Pode encontrar as definições para os estilos do botão de envio no painel direito das opções do seu formulário, dentro do editor de blocos.
Estas definições permitem controlar o tamanho, a borda e as cores do botão de envio sem qualquer 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 de um ponto de vista de design. Não estará a violar nenhuma das melhores práticas ao escolher qualquer tamanho de botão aqui.
O que é mais importante aqui é a consistência do design. Por exemplo, se estiver a usar tamanhos de campo pequenos e botões grandes, o seu formulário pode parecer um pouco desproporcional em alguns locais.
Para o melhor equilíbrio, tente usar um dimensionamento consistente para todos os elementos nos seus formulários.
O 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 estes diferentes aspetos juntam-se para criar o design perfeito do formulário.
Tipo de Borda
Os tipos de borda são inteiramente uma escolha estilística. Se reparou, é cada vez mais comum usar um design sem bordas para um estilo limpo e minimalista.
No entanto, 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 aspeto profissional e refinado.
- As fronteiras tracejadas ou pontilhadas são menos comuns, mas adicionam um toque de criatividade lúdica. Use-as se o tema do seu website for mais casual, mas tenha cuidado para não as usar em excesso.
- Os designs sem fronteira são elegantes e modernos, frequentemente usados para enfatizar o minimalismo ou para integrar o botão perfeitamente com o fundo. Ao optar por não ter fronteira, certifique-se de que há contraste ou sombra suficientes para distinguir o botão dos elementos circundantes.
Tamanho da Borda
Também pode ajustar o tamanho da sua fronteira. É uma boa prática ter uma espessura de fronteira que complemente o tamanho do botão. Quando uso um tamanho de botão pequeno, certifico-me de o complementar com uma fronteira fina de tamanho 3-4px. Isto cria o aspeto visualmente mais equilibrado na minha experiência.
Para botões grandes, uma largura de fronteira de 4-6px é mais adequada. Uma boa regra a seguir é usar fronteiras subtis que adicionem estrutura sem sobrecarregar o design do botão.
Raio da Borda
A definição de raio da fronteira no WPForms dá-lhe controlo total sobre o quão arredondados quer que os seus botões pareçam. Botões mais arredondados funcionam bem em temas que usam estilos modernos.
Na verdade, alguns estudos descobriram uma correlação entre botões redondos e maiores conversões. Vale a pena experimentar botões redondos se estiver a otimizar para conversões.
Pode usar um raio de fronteira de cerca de 15-20 px para obter o aspeto de botão em forma de cápsula que muitos sites modernos utilizam hoje em dia.
Se preferir manter uma aparência formal, sinta-se à vontade para manter o raio da fronteira em 0px para manter o seu botão em forma quadrada.
O importante é equilibrar a curvatura do seu botão com o tema geral do design do seu website.
Tenho a teoria de que formas mais arredondadas funcionam melhor quando usadas com moderação. Desta forma, é mais provável que se destaquem das formas geométricas populares que geralmente usa noutras 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 o seu botão o mais visível possível para todos os dispositivos.
A sua marca também desempenha um papel na seleção de cores. Se o design do seu site se baseia numa paleta de cores de marca, é geralmente uma boa ideia manter-se próximo das cores temáticas da sua marca.
Em qualquer caso, certifique-se de evitar cores excessivamente brilhantes ou conflituantes que possam distrair os utilizadores desnecessariamente.
Cor da Borda
A fronteira é 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 fronteiras parecem mais atraentes quando contrastam bem com a cor de fundo do seu botão. Isto não só adiciona personalidade ao seu design, como também melhora a visibilidade do seu botão.
Recomendo usar tons subtis para evitar chamar demasiada atenção para a própria borda. 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, deve ter um único objetivo: priorizar a legibilidade. A forma mais fácil de tornar o texto do seu botão fácil de ler é usar 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 cinzento escuro para tons mais claros de fundos.
Embora possa safar-se com cores ousadas e vibrantes noutros componentes do botão de envio, é melhor evitar desviar-se demasiado das cores neutras padrão para a cor do texto, a fim de manter uma boa legibilidade.
Técnicas Avançadas de Estilo para Botões de Envio
O WPForms não exige que utilize qualquer código para o estilo básico do seu botão. No entanto, precisará de usar CSS simples para alguns efeitos avançados, como cores gradientes.
Isto é muito mais fácil do que parece. Primeiro, precisará do plugin WPCode instalado no seu site, o que lhe permitirá inserir facilmente trechos de código para alterações nos estilos do seu botão de envio.
Instalar WPCode
Abra o seu painel WordPress e vá para Plugins » Adicionar Novo.
No ecrã Adicionar Plugins, use a caixa de pesquisa para procurar 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 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 WordPress e clique em + Adicionar Trecho à medida que o menu se expande.
Em seguida, clique em Usar Trecho em Adicionar o Seu Código Personalizado (Novo Trecho)
Em seguida, precisará de selecionar o tipo de trecho. Para ajustes de estilo, adicionará trechos personalizados de CSS. Portanto, prossiga e selecione Trecho CSS das opções disponíveis.
Agora, basta copiar e colar trechos de código na janela do editor de código para aplicar alterações de estilo aos seus formulários. Partilharei exemplos de códigos CSS comuns que pode usar para alterar o estilo do seu botão de envio.
Adicionar Cores Gradientes ao Botão de Envio
Um gradiente de cor é bastante apelativo e geralmente indica um design de formulário altamente profissional. Isto é ótimo quando quer transmitir o seu profissionalismo e atenção aos detalhes com cores gradientes para botões.
Aqui está o código para um trecho que 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 a editar tem o ID 8. Se o seu ID de Formulário for diferente, digamos 17, pode adicionar o número correto a este trecho de código (ou seja, “#wpforms-17”).
Pode encontrar o ID do Formulário do seu formulário olhando para o número mencionado no shortcode de um formulário específico. Isto é mencionado na coluna Shortcode do seu formulário no ecrã Visão Geral do Formulário.
A segunda parte personalizável deste código são os valores para linear-gradient. Estes três valores dentro dos parênteses, separados por vírgulas, são:
- Se procura um efeito de passagem do rato mais único, pode aplicar o efeito de pulsação com este código:
- Código hexadecimal da primeira cor
- Código hexadecimal da segunda cor
Pode alterar estes valores conforme desejar. Se precisar de encontrar os códigos hexadecimais exatos para as cores de que necessita, pode usar este gerador de cores HTML.
Depois de terminar de criar o seu trecho de CSS personalizado, clique no botão Guardar Trecho e no botão de alternância ao lado para guardar e ativar o trecho.
O seu formulário terá agora cores de gradiente aplicadas ao seu botão de envio.
Adicionar Efeitos de Hover ao Botão de Envio
Por defeito, o WPForms adiciona um efeito de passagem do rato ao botão de Envio para indicar que é interativo e fornecer feedback visual imediato a um visitante que pretenda clicar.
Mas se quiser adicionar um efeito de passagem do rato 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 apenas quiser alterar o efeito de passagem do rato predefinido num botão com cores sólidas, pode usar as definições de Estilos do Formulário do WPForms no editor de blocos para definir a cor de fundo base que pretende.
Em seguida, use este código simplificado para alterar as cores na passagem do rato adicionando o código hexadecimal da sua cor pretendida:
#wpforms-8 .wpforms-submit:hover {
background: #0f88d4; /* Solid color on hover */
transition: background 0.3s ease; /* Smooth transition */
}Certifique-se de que clica em Guardar Trecho e o ativa para aplicar os efeitos de passagem do rato no botão de envio do seu formulário.
Se procura um efeito de destaque mais único, 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;
}
Isto adiciona um toque criativo com um botão que pulsa na passagem do rato, convidando os visitantes a clicar.
Dicas de Otimização para o Texto do Botão de Envio
O estilo é um aspeto 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 de viragem em que os seus utilizadores decidem se agem ou desistem.
Um bom texto de botão inspira ação, focando-se num benefício específico que o seu visitante pode esperar ao clicar. Evite usar simplesmente 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:
- Obter a Minha Cotação Gratuita
- Descarregar o Meu Ebook
- Juntar-se à Comunidade
- Iniciar a Minha Jornada
- Aceder a Modelos Gratuitos
- Poupar 20% Hoje
Mas como 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 se mover instantaneamente para Definições » Geral.
Em seguida, basta digitar o seu texto na caixa Texto do Botão de Envio. Também pode editar o texto que aparece durante o tempo em que o formulário está a ser enviado na caixa Texto de Processamento do Botão de Envio.
E é tudo.
Agora que tem uma ideia melhor sobre as melhores práticas para botões de envio e como pode aplicá-las aos seus formulários, é hora de otimizar o texto do seu botão para mais cliques.
Ler também: Como ver o histórico do seu formulário no WordPress
Criar botões de submissão eficazes para os seus formulários não é uma ciência exata. Não tenha receio de experimentar diferentes estilos e textos de botões e monitorizar os seus resultados (isto pode ser tão simples como testar um formulário A/B e medir a diferença nas taxas de submissão de formulários).
Em seguida, Estilizar Notificações por Email do WPForms
Estilizar formulários com o WPForms é um processo rápido e sem esforço. Mas esta flexibilidade de personalização também se estende às suas notificações por email. Com notificações direcionadas aos clientes, tem uma ótima oportunidade de incorporar a sua marca nas notificações para adicionar uma aparência mais profissional em que os seus clientes podem confiar.
O nosso guia sobre personalizar notificações por email de formulários guia-o através da forma mais fácil de estilizar as suas notificações.
Crie o Seu Formulário WordPress Agora
Pronto para construir o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo o ajudou, por favor siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
