como-adicionar-ferramentasdicas-para-wordpress-da-forma-fácil

Como adicionar dicas de ferramentas no WordPress (a maneira mais fácil)

Quer adicionar dicas de ferramentas ao seu formulário? As dicas de ferramentas são pequenas caixas que aparecem quando passa o rato por cima de uma área no seu site WordPress e são óptimas para adicionar informações extra sobre um campo sem sobrecarregar as coisas.

Neste post, vamos mostrar-lhe como adicionar dicas de ferramentas no WordPress.

Crie o seu formulário WordPress agora

O que é uma Tooltip no WordPress?

As dicas de ferramentas são sugestões, termos de glossário ou mensagens que aparecem quando o visitante passa o cursor sobre ou toca (em dispositivos móveis) num elemento do seu sítio Web WordPress. E nos formulários do WordPress, as dicas de ferramentas podem ser utilizadas para adicionar informações adicionais sobre um determinado campo.

Por exemplo, veja a captura de ecrã abaixo.

amostra de dica de ferramenta

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 ferramentas estão ocultas por padrão. Só aparecem quando o utilizador quer saber mais detalhes sobre um determinado campo, passando o cursor sobre a descrição do campo.

Adicionar uma dica de ferramenta é uma óptima ideia se quiser fornecer mais detalhes sobre um determinado campo sem criar distracções desnecessárias no seu formulário.

Agora que já sabe o que é uma dica de ferramenta, continue a ler para saber como adicioná-la ao seu site.

Instalar uma dica de ferramenta do WordPress sem um plug-in

Sim, é possível instalar uma dica de ferramenta no WordPress sem um plugin. No entanto, se não quiser usar um plug-in de dica de ferramenta para adicionar facilmente uma dica de ferramenta ao seu site WordPress, terá 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 ao utilizar um plugin de tooltip. Para os utilizadores do WPForms, recomendamos o plugin gratuito Shortcodes Ultimate.

O Shortcodes Ultimate é fácil de utilizar e funciona muito bem com os temas mais populares e melhores do WordPress.

Este plugin WordPress extremamente útil e gratuito dar-lhe-á mais de 50 códigos curtos para usar para adicionar facilmente várias funções ao seu site, incluindo o código curto da dica de ferramenta. A seguir, vamos mostrar-lhe exatamente como adicionar este plugin WordPress de dicas de ferramentas.

Como adicionar dicas de ferramentas no WordPress

Vamos dar uma olhada no guia passo-a-passo sobre como adicionar dicas de ferramentas no WordPress.

Passo 1. Criar um formulário WordPress

A primeira coisa que você precisa fazer é instalar e ativar o WPForms no seu site. Se precisar de ajuda, consulte este guia sobre como instalar um plugin do WordPress.

Depois, terá de criar um formulário simples no WordPress.

O construtor de formulários WPForms

Bom trabalho na criação do formulário. Voltaremos a ele numa etapa posterior.

Passo 2. Instalar o plugin Shortcodes Ultimate

Em seguida, clique aqui para ir ao WordPress e descarregar o plugin gratuito Shortcodes Ultimate.

A página WP Shortcodes Ultimate no repositório do WordPress

Ou, se já estiver no seu painel de controlo do WordPress, clique em Plugins " Adicionar novo, procure Shortcodes Ultimate e clique em Instalar agora.

Instalar o Shortcodes Ultimate

Assim que o plugin estiver ativado, está pronto para começar a utilizá-lo.

Passo 3: Obter o código curto da dica de ferramenta

Agora, encontre o plugin Shortcodes Ultimate no lado esquerdo do seu painel de controlo do WordPress e clique em Available shortcodes. Percorra essa página e selecione o botão Tooltip.

selecionar a dica de ferramenta

Na página seguinte, selecione e copie o código curto:

copiar código curto da dica de ferramenta

Passo 4: Adicione a sua dica de ferramenta ao seu formulário

Agora que tem o seu código de atalho da dica de ferramenta, está na altura de o adicionar ao seu Formulário de Contacto Simples.

Volte ao seu formulário clicando em WPForms " Todos os formulários e, em seguida, selecione Editar no formulário onde gostaria de adicionar a sua dica de ferramenta.

editar o seu formulário de contacto simples

Quando estiver no formulário, clique no campo ao qual pretende adicionar a sua dica de ferramenta e cole o seu código de acesso à dica de ferramenta na caixa de descrição.

adicionar código curto à descrição

Quando guardar o seu formulário e o visualizar a partir do frontend, este passará a apresentar a dica de ferramenta:

exibir a dica de ferramenta

Etapa 5: Personalizar a dica de ferramenta

Também pode modificar o código para apresentar o seu próprio texto. Aqui está um exemplo com as alterações efectuadas a negrito:

[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="Esta é a área de conteúdo que será mostrada na bolha da Tooltip depois de o utilizador passar por cima dela!" behavior="hover" close="no" class=""]Este é o texto que será sempre apresentado e mostrará o conteúdo da Tooltip quando passar por cima![/su_tooltip]

dica de ferramenta personalizada

Também pode alterar uma série de opções diferentes nas definições da dica de ferramenta, que pode encontrar deslocando-se para o fundo da página Códigos de acesso " Códigos de acesso disponíveis, como:

  • Estilo + Cores
  • Posição
  • Tamanho
  • Comportamento
  • E mais

O próximo passo é opcional, mas fará com que a sua dica de ferramenta pareça ainda mais personalizada e manterá os seus formulários ainda mais limpos e sem distracções.

Etapa 5: Transforme sua dica de ferramenta em um ícone (opcional)

A menos que indique especificamente e convide as pessoas a passar o cursor sobre a sua dica de ferramenta no seu código de atalho da dica de ferramenta, os seus visitantes podem nem sequer se aperceber de que existe conteúdo extra à espera de ser mostrado nessa dica de ferramenta! Uma óptima forma de garantir que os seus leitores passam o cursor sobre a dica de ferramenta é transformá-la num ícone em vez de utilizarem apenas texto.

Por exemplo, muitas pessoas adicionam um ícone de informação "i" e, quando o utilizador passa o rato sobre esse ícone, é apresentada a dica de ferramenta. Não é giro?

visualização final da dica de ferramenta com ícone

Para o fazer, primeiro, descarregue e active o plugin gratuito Better Font Awesome. Se saltou diretamente para esta parte da publicação, aqui está uma ligação para saber como instalar um plug-in do WordPress, se precisar dele.

ícone no plugin de dica de ferramenta

Assim que o plugin for ativado, terá acesso a milhares de ícones gratuitos que pode utilizar em qualquer parte do seu site WordPress com um simples shortcode. Agora, vamos adicionar o shortcode do ícone Info à nossa dica de ferramenta.

Estamos prestes a colocar o shortcode de um plugin dentro do shortcode de outro plugin. Mas não se preocupe, ambos funcionarão na mesma!

Volte à caixa de descrição do campo do seu formulário que contém a sua dica de ferramenta e substitua simplesmente o texto apresentado dentro do seu código de atalho da dica de ferramenta por este código de atalho:

[icon name="info"]

A área de texto que deve substituir pelo código curto acima está destacada abaixo:

substitua este texto pelo código de acesso better front awesome

E aqui está o aspeto que o código deve ter depois de ter adicionado o shortcode do ícone:

melhor código de acesso para fontes fantásticas adicionado

Em alternativa, pode simplesmente copiar e colar o código curto abaixo na sua caixa de descrição e ajustá-lo a 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 seu ícone de dica de ferramenta.

visualização final da dica de ferramenta com ícone

Excelente trabalho! Agora, se quiser ser ainda mais avançado e colocar o ícone da dica de ferramenta acima do campo ao lado do rótulo, consulte o nosso tutorial detalhado sobre como adicionar ícones aos formulários do WordPress.

Considerações finais

É isso mesmo! Agora já 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, consulte o nosso guia sobre como estilizar WPForms com CSS Hero (sem necessidade de codificação).

De que está à espera? Comece a usar o melhor plugin de formulários do WordPress hoje mesmo.

Se gostou deste artigo, siga-nos no Facebook e no Twitter para mais tutoriais gratuitos sobre o WordPress.

Divulgação: O nosso conteúdo é apoiado pelos leitores. Isso significa que se você clicar em alguns de nossos links, podemos ganhar uma comissão. Veja como o WPForms é financiado, por que isso é importante e como você pode nos apoiar.

Equipa editorial

A equipa editorial do WPForms é composta por especialistas em WordPress e especialistas em crescimento de pequenas empresas. Somos apaixonados por ajudar empresários e proprietários de sites a ter sucesso.Saiba mais

O melhor plug-in de criação de formulários de arrastar e soltar do WordPress

Fácil, rápido e seguro. Junte-se a mais de 6 milhões de proprietários de sites que confiam no WPForms.

Active o JavaScript no seu browser para preencher este formulário.

17 comentários sobre "Como adicionar dicas de ferramentas no WordPress (a maneira mais fácil)"

    1. Olá!
      Claro que pode criar diferentes dicas de ferramentas para diferentes campos, no entanto, um campo só pode ter uma dica de ferramenta, uma vez que quando passa o rato sobre o campo só pode ser apresentada uma dica de ferramenta.
      Espero que isto faça sentido.
      Tenha um bom dia 🙂

    1. Olá Joshu!
      Pode simplesmente cobrir uma imagem ou uma etiqueta HTML de ícone com o código de atalho Tooltip, de acordo com as instruções fornecidas neste tutorial.
      Espero que isto ajude.
      Diverte-te 🙂

  1. Olá, obrigado pela dica.
    Penso que o formulário ficaria mais bonito se o ícone da dica de ferramenta estivesse posicionado junto à etiqueta do campo, em vez de na parte inferior de cada campo, tal como acontece na secção de definições do formulário com o ícone do ponto de interrogação da dica de ferramenta. Se já o fez dessa forma, penso que também concorda que é melhor. Como é que conseguimos um efeito semelhante?

    1. Olá, Chris!
      Pode tentar colocar o shortcode Tooltip no campo Label. Não testei isto pessoalmente, mas pode tentar.
      Espero que isto ajude!
      Diverte-te 🙂

      1. Funciona, mas todo o código e a descrição da dica de ferramenta aparecem no seu e-mail e podem ser difíceis de ler

      2. Olá Gareth.
        Neste caso, pode tentar utilizar as etiquetas inteligentes dos campos nas definições de notificação em vez da etiqueta {all_fields}.
        E, caso ajude, temos um excelente tutorial sobre como usar as Smart Tags no e-mail de notificação.
        Quando estiver a utilizar as Smart Tags, não adicionará automaticamente a etiqueta do campo, mas apenas o seu valor, pelo que terá de adicionar as etiquetas manualmente.
        Espero que isto ajude.
        Bom trabalho 🙂

  2. Olá, quero adicionar um ícone de dica de ferramenta após a etiqueta, mas quando coloco o [tooltip shortcode] nesta secção, apenas o reconhece como um texto simples.

    1. Olá Sina - Atualmente, o campo de etiqueta não suporta shortcode, apenas o campo de descrição suporta shortcode. Se precisar dele no campo de etiqueta, a nossa equipa de apoio poderá ajudar com algum código personalizado. Se for um utilizador de licença paga, pode criar um pedido de assistência aqui.

      Boa viagem 🙂

    1. 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 que os formulários funcionem no WooCommerce, sugiro que contacte diretamente a equipa do Woo para ter a certeza de que encontra uma opção que se integre corretamente no sistema.

      Obrigado 🙂

  3. Hi,
    Estou a tentar adicionar as dicas de ferramentas ao meu sítio, mas não está a funcionar. O último código de atalho não tem códigos de atalho disponíveis, a menos que eu procure na documentação. Será essa a causa?

  4. Como é que posso fazer aparecer uma dica de ferramenta se o utilizador não tiver preenchido um campo. Sei que já existe essa mensagem, mas é bastante pequena e muitas pessoas estão a ficar confusas quando preenchem o formulário. Idealmente, gostaria que a mensagem aparecesse de alguma forma

    1. Olá Myur - Embora atualmente não tenhamos a opção de mostrar a mensagem na dica de ferramenta, se preferir, pode aumentar o tamanho da fonte da mensagem de validação utilizando o seguinte CSS:

      div.wpforms-container-full .wpforms-form em.wpforms-error {
      font-size: 16px !important; /* Please change the values as per your preference */
      }

      Caso seja útil, pode consultar o nosso documento aqui para adicionar CSS personalizadas.

      Também pode mostrar uma mensagem obrigatória no marcador de posição do campo, como mostra esta captura de ecrã.

Adicionar um comentário

Ficamos satisfeitos por ter escolhido deixar um comentário. Tenha em atenção que todos os comentários são moderados de acordo com a nossa política de privacidade e que todas as hiperligações são nofollow. NÃO utilize palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.

Este formulário é protegido pelo Cloudflare Turnstile e aplicam-se a Política de Privacidade e os Termos de Serviço da Cloudflare.