Resumo de IA
Quer adicionar tooltips ao seu formulário WordPress? Tooltips são pequenas caixas que aparecem quando alguém passa o rato sobre um elemento no seu site, e são uma ótima forma de adicionar informações extras sobre um campo sem sobrecarregar o formulário.
Neste post, mostrarei exatamente como adicionar um tooltip no WordPress, usando um plugin gratuito e o seu formulário WPForms. Leva apenas alguns minutos, e é um pequeno toque que torna os seus formulários mais fáceis de preencher.
Crie o seu formulário WordPress agora
Como Adicionar Dicas de Ferramenta no WordPress
Vamos dar uma vista de olhos ao guia passo a passo sobre como adicionar dicas de ferramenta no WordPress.
- Passo 1: Criar um Formulário WordPress
- Passo 2: Instalar o Plugin Shortcodes Ultimate
- Passo 3: Obter o seu Shortcode de Dica de Ferramenta
- Passo 4: Adicionar a sua Dica de Ferramenta ao seu Formulário
- Passo 5: Personalizar a sua Dica de Ferramenta
- Passo 6: Transformar o seu Tooltip num Ícone (Opcional)
- FAQs Sobre Adicionar Tooltips no WordPress
O que é uma Dica de Ferramenta no WordPress?
As dicas de ferramenta são sugestões, termos de glossário ou mensagens que aparecem quando o seu visitante passa o rato ou toca (em dispositivos móveis) num elemento do seu site WordPress. E nos seus formulários WordPress, as dicas de ferramenta podem ser usadas para adicionar informações extras sobre um campo específico.
Por exemplo, veja a captura de ecrã abaixo.
O WPForms permite-lhe adicionar facilmente uma descrição para cada campo no construtor de formulários. Ao contrário de uma descrição de campo típica, as dicas de ferramenta estão ocultas por defeito. Só aparecem quando o seu utilizador quer saber mais detalhes sobre um determinado campo ao passar o rato sobre a descrição do campo.
Adicionar uma dica de ferramenta é uma ótima ideia se quiser fornecer mais detalhes sobre um campo específico sem criar distrações desnecessárias no seu formulário.
Agora que sabe o que é uma dica de ferramenta, continue a ler para descobrir como adicioná-las ao seu site.
Instalar uma Dica de Ferramenta no WordPress sem um Plugin
Sim, é possível instalar uma dica de ferramenta no WordPress sem um plugin. No entanto, se não quiser usar um plugin de dica de ferramenta para adicionar facilmente uma dica de ferramenta ao seu site WordPress, precisará de ser um utilizador avançado e usar html ou jquery (ou contratar um programador para o fazer por si).
Felizmente, pode poupar tempo e dinheiro usando um plugin de dica de ferramenta. Para utilizadores do WPForms, recomendamos o plugin gratuito Shortcodes Ultimate.
O Shortcodes Ultimate é fácil de usar e funciona muito bem com os temas WordPress mais populares e melhores.
Este plugin WordPress, extremamente útil e gratuito, dar-lhe-á mais de 50 shortcodes para usar e adicionar facilmente várias funções ao seu site, incluindo o shortcode de dica de ferramenta. De seguida, vamos mostrar-lhe exatamente como adicionar este plugin de dicas de ferramenta para WordPress.
Passo 1: Criar um Formulário WordPress
A primeira coisa que precisa de fazer é instalar e ativar o WPForms no seu site. Se precisar de ajuda, consulte este guia sobre como instalar um plugin WordPress.
Em seguida, precisará de criar um formulário simples no WordPress.
Bom trabalho a criar o seu formulário. Voltaremos a ele num passo posterior.
Passo 2: Instalar o Plugin Shortcodes Ultimate
Em seguida, clique aqui para ir ao WordPress e descarregar o plugin gratuito Shortcodes Ultimate.
Ou se já estiver no seu painel WordPress, clique em Plugins » Adicionar Novo, procure por Shortcodes Ultimate e clique em Instalar Agora.
Assim que o plugin for ativado, estará pronto para começar a usá-lo.
Passo 3: Obter o seu Shortcode de Dica de Ferramenta
Agora, encontre o plugin Shortcodes Ultimate no lado esquerdo do seu painel WordPress e clique em Shortcodes disponíveis. Percorra essa página e selecione o botão Tooltip.
Na página seguinte, realce e copie o shortcode:
Passo 4: Adicionar a sua Dica de Ferramenta ao seu Formulário
Agora que tem o seu shortcode de tooltip, está na hora de o adicionar ao seu Formulário de Contacto Simples.
Volte ao seu formulário clicando em WPForms » Todos os Formulários e depois selecione Editar no formulário onde gostaria de adicionar o seu tooltip.
Assim que estiver no formulário, clique no campo ao qual pretende adicionar o seu tooltip e cole o seu shortcode de tooltip na caixa de descrição.
Depois de guardar o seu formulário e o visualizar no frontend, este apresentará agora o tooltip:
Passo 5: Personalizar a sua Dica de Ferramenta
Também pode modificar o código para apresentar o seu próprio texto. Eis um exemplo com as alterações feitas a negrito:
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="This is the content area which will be shown in the Tooltip bubble after the user hovers over it!" behavior="hover" close="no" class=""]This is the text that will be always be displayed and will show the Tooltip content when hovered over![/su_tooltip]
Também pode alterar um conjunto de opções diferentes nas suas definições de tooltip, que pode encontrar ao percorrer até ao final da página Shortcodes » Shortcodes disponíveis, como:
- Estilo + Cores
- Posição
- Tamanho
- Comportamento
- E muito mais
O próximo passo é opcional, mas fará com que o seu tooltip pareça ainda mais personalizado e manterá os seus formulários ainda mais limpos e sem distrações.
Passo 6: Transformar o seu Tooltip num Ícone (Opcional)
A menos que indique especificamente e convide as pessoas a pairar sobre o seu tooltip no seu shortcode de tooltip, os seus visitantes podem nem sequer se aperceber de que há conteúdo extra à espera de ser mostrado nesse tooltip! Uma ótima maneira de garantir que os seus leitores pairam sobre o tooltip é torná-lo um ícone em vez de usar apenas texto.
Por exemplo, muitas pessoas adicionam um ícone de informação "i" e, em seguida, quando o utilizador paira sobre esse ícone, o tooltip é apresentado. Que elegante!
Para fazer isto, primeiro, descarregue e ative o plugin gratuito Better Font Awesome. Se saltou diretamente para esta parte do artigo, aqui fica um link para como instalar um plugin do WordPress, caso precise.
Após a ativação do plugin, terá acesso a milhares de ícones gratuitos que pode usar em qualquer lugar do seu site WordPress com um simples shortcode. Agora, vamos adicionar o shortcode do ícone de Informação ao nosso tooltip.
Estamos prestes a colocar o shortcode de um plugin dentro do shortcode de outro plugin. Mas não se preocupe, ambos continuarão a funcionar!
Volte à caixa de descrição do campo do seu formulário que contém o seu tooltip e simplesmente substitua o texto apresentado dentro do seu shortcode de tooltip por este shortcode:
[icon name="info"]A área de texto que deve substituir pelo shortcode acima está realçada abaixo:
E aqui está como o código deve ficar depois de ter adicionado o shortcode do ícone:
Alternativamente, pode simplesmente copiar e colar o shortcode abaixo na sua caixa de descrição e ajustá-lo ao seu gosto.
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="Tooltip text" behavior="hover" close="no" class=""][icon name="info"][/su_tooltip]Em seguida, guarde o seu formulário e verifique-o no frontend para ver o ícone do seu tooltip.
Ótimo trabalho! Agora, se quiser ir ainda mais longe e colocar o ícone do tooltip acima do campo ao lado do rótulo, consulte o nosso tutorial aprofundado sobre como adicionar ícones a formulários do WordPress.
Tooltips são uma das formas mais fáceis de tornar um formulário mais claro sem adicionar desordem, que é exatamente o que as boas práticas de design de formulários procuram.
FAQs Sobre Adicionar Tooltips no WordPress
Aqui estão as respostas para algumas das perguntas mais comuns sobre como adicionar um tooltip no WordPress.
Preciso de um plugin para adicionar um tooltip no WordPress?
Tecnicamente não, pode adicionar um com HTML personalizado ou jQuery, mas isso requer conhecimento de codificação. Para a maioria das pessoas, um plugin gratuito como o Shortcodes Ultimate é mais rápido e muito mais fácil, e funciona diretamente nas descrições dos seus campos WPForms.
Como adiciono um tooltip a um campo de formulário?
Crie o seu formulário no WPForms, gere um shortcode de tooltip com o Shortcodes Ultimate e cole-o na caixa de descrição do campo. Quando guardar e visualizar o formulário, o tooltip aparece ao passar o rato.
Posso transformar um tooltip num ícone?
Sim. Adicione o plugin gratuito Better Font Awesome, depois insira um shortcode de ícone (como um "i" de informação) dentro do seu shortcode de tooltip. Passar o rato sobre o ícone revela o tooltip, o que mantém o seu formulário limpo.
Para que serve um tooltip num formulário?
Um tooltip fornece contexto adicional sobre um campo, como por que precisa de um número de telefone ou como formatar uma data, sem sobrecarregar o formulário com texto de ajuda permanente. Só aparece quando o utilizador o deseja.
Pensamentos Finais
É tudo! Agora sabe como adicionar tooltips no WordPress.
Se quiser alterar a aparência dos botões dos seus formulários, leia como personalizar estilos de botões com CSS. Ou, se preferir, veja o nosso guia sobre como estilizar WPForms com CSS Hero (sem necessidade de codificação). E para mais formas de criar um formulário que as pessoas realmente concluam, veja as nossas melhores práticas de formulários WordPress.
Crie o seu formulário WordPress agora
O que está à espera? Comece hoje mesmo com o melhor plugin de formulários WordPress.
Se gostou deste artigo, siga-nos no Facebook e no Twitter para mais tutoriais gratuitos de WordPress.
É possível adicionar múltiplos Tooltips com mensagens diferentes?
Obrigado
Olá!
Claro, pode criar tooltips diferentes para campos diferentes, no entanto, um campo só pode ter um tooltip, pois assim que passar o rato sobre ele, só um tooltip pode ser exibido.
Espero que faça sentido.
Tenha um bom dia 🙂
Como pode adicionar uma dica de ferramenta a um ícone ou imagem no WordPress?
Olá Joshu!
Pode simplesmente cobrir uma tag HTML de imagem ou ícone com o shortcode Tooltip, de acordo com as instruções fornecidas neste tutorial.
Espero que ajude.
Tenha um bom dia 🙂
Olá, obrigado pela dica.
Penso que o formulário ficaria mais elegante se o ícone do tooltip estivesse posicionado ao lado do rótulo do campo em vez de no fundo de cada campo, tal como tem na sua secção de configurações do formulário com o tooltip do ícone de interrogação. Se o fez dessa forma, suponho que também concorda que é melhor. Como conseguimos um efeito semelhante?
Olá Chris!
Pode tentar colocar o shortcode Tooltip no campo Rótulo. Eu não testei pessoalmente, mas pode tentar.
Espero que ajude!
Tenha um bom dia 🙂
Funciona, mas depois todo o código e descrição do tooltip aparecem no seu e-mail e pode ser difícil de ler
Olá Gareth.
Neste caso, pode tentar usar as Smart Tags dos campos nas configurações de Notificação em vez da {all_fields}.
E caso ajude, temos um ótimo tutorial sobre como usar Smart Tags no e-mail de notificação.
Quando usa Smart Tags, não adicionará automaticamente o rótulo do campo, mas apenas o seu valor, pelo que terá de adicionar os rótulos manualmente.
Espero que ajude.
Tenha um bom dia 🙂
Olá, quero adicionar um ícone de tooltip depois do rótulo, mas quando coloco o [tooltip shortcode] nesta secção, ele reconhece-o apenas como texto simples. existe alguma solução?
Olá Sina – Atualmente, o campo de rótulo não suporta shortcode, apenas o campo de descrição suporta shortcode. Se precisar no campo de rótulo, a nossa equipa de suporte poderá ajudar com algum código personalizado. Se for um utilizador com licença paga, pode criar um ticket de suporte aqui.
Tenha um bom dia :)
Olá…
Posso usar isto para títulos de colunas no woocommerce?
Obrigado.
Olá Octavio – Peço desculpa, mas não suportamos qualquer integração com o WooCommerce, principalmente porque estão fortemente integrados com os seus próprios sistemas de formulários.
Se precisar de formulários para funcionar dentro do WooCommerce, sugiro que contacte diretamente a equipa do Woo para ter a certeza de que encontra uma opção que se integre corretamente com o seu sistema.
Obrigado 🙂
Olá,
Estou a tentar adicionar as tooltips ao meu site, mas não está a funcionar. O Shortcodes Ultimate não tem shortcodes disponíveis, a menos que procure na sua documentação. Poderá ser essa a causa?
Olá – É possível alterar a cor e o tamanho da tooltip do ícone? Que código precisaria para isso?
Olá Emma,
Boa pergunta! Consulte este guia do Shortcode Ultimate para formatar o texto.
Espero que isto ajude! 🙂
Como posso fazer com que uma tooltip apareça se o utilizador não preencheu um campo? Sei que já existe essa mensagem, mas é bastante pequena e muitas pessoas ficam confusas ao preencher o formulário. Idealmente, gostaria que ela piscasse de alguma forma.
Olá Myur – Embora atualmente não tenhamos a opção de mostrar a mensagem na tooltip, se preferir, pode aumentar o tamanho da fonte da mensagem de validação usando o seguinte CSS:
div.wpforms-container-full .wpforms-form em.wpforms-error { font-size: 16px !important; /* Por favor, altere os valores de acordo com a sua preferência */ }Caso ajude, pode consultar a nossa documentação aqui para adicionar CSS personalizado.
Também pode mostrar uma mensagem de campo obrigatório no placeholder do campo, como mostrado nesta captura de ecrã.