Resumo de IA
Quer adicionar texto de exemplo em formulários no WordPress?
Os placeholders facilitam para que seus visitantes preencham cada campo corretamente. Isso ajuda você a obter as informações certas e reduz a frustração dos seus visitantes.
Neste artigo, mostraremos a maneira fácil de adicionar texto de exemplo a qualquer tipo de formulário.
Crie Seu Formulário WordPress Agora
O Que é Texto de Exemplo?
Texto de exemplo é o texto dentro de um campo de formulário que mostra ao usuário o que digitar. Ele foi introduzido na especificação HTML5, então você às vezes o verá referido como o 'atributo placeholder HTML5'.
Os placeholders são úteis para qualquer campo que tenha um formato específico, como um endereço de e-mail. Ele mostra ao seu visitante como formatar a entrada.
O texto de exemplo é super importante para garantir que cada campo seja válido. Isso significa que há menos chance de abandono de formulário porque o visitante não terá que voltar e corrigir o que digitou.
É especialmente útil para campos como:
- URLs: Você pode adicionar
https://exemplo.comcomo texto de exemplo para mostrar ao visitante como digitar o endereço do site corretamente - Números de telefone: Por exemplo, se você quiser obter o código do país do usuário junto com o número regular dele, você pode adicionar texto de exemplo para mostrar como digitá-lo.
- Nomes de usuário de mídia social: O texto de exemplo pode mostrar às pessoas como digitar o nome de usuário corretamente. Por exemplo, adicionar
@exemplocomo texto de exemplo para um campo do Twitter mostra que você quer que eles digitem o@inicial
Você provavelmente consegue pensar em outras maneiras de usar texto de exemplo para ajudar seus visitantes.
O texto de exemplo é um pouco diferente de um valor padrão. Quando o usuário começa a digitar em um campo com um placeholder, o texto de exemplo desaparece. Em contraste, um valor padrão será enviado junto com a entrada do formulário, a menos que o usuário o altere.
Agora que sabemos como usar o atributo placeholder HTML5, mostraremos a maneira fácil de adicioná-lo aos seus formulários.
Como Adicionar Texto de Exemplo a Formulários WordPress
Mostraremos como adicionar facilmente texto de exemplo nas etapas abaixo.
Neste Artigo
Vamos começar instalando o melhor plugin de criação de formulários para WordPress.
1. Instale o Plugin WPForms
Primeiro, instale e ative o plugin WPForms.
Todas as versões do WPForms permitem adicionar placeholders a campos de formulário, incluindo o WPForms Lite. Tenha em mente que a versão Pro permite adicionar campos avançados aos seus formulários, tornando-a muito mais poderosa que a versão gratuita.
Baixe o arquivo zip da aba Downloads na sua conta WPForms e faça o upload para o seu site WordPress. Aqui está um guia passo a passo sobre como instalar um plugin do WordPress se precisar de ajuda com esta etapa.
2. Crie um Formulário de Contato Simples
Em seguida, você vai querer criar um formulário de contato simples. No WPForms, você pode criar e incorporar um formulário em menos de 5 minutos.
É fácil personalizar seu formulário e adicionar os campos que você precisa. Você pode até mesmo adicionar um acordo de GDPR facilmente arrastando o campo GDPR para a pré-visualização do formulário.
Precisa de mais ajuda? Temos um guia detalhado mostrando como criar um formulário de contato simples no WordPress.
Quando seu formulário estiver pronto, clique em Salvar no topo do construtor de formulários para salvar seu progresso até agora.
3. Adicione Texto de Exemplo ao Campo de E-mail
Agora estamos prontos para adicionar texto de espaço reservado ao seu formulário do WordPress. Mostraremos 2 maneiras úteis de usar este recurso para tornar seus formulários mais fáceis de preencher.
Vamos usar o campo de e-mail como primeiro exemplo.
No construtor de formulários, clique no campo de e-mail à direita para abrir as configurações.
Em seguida, no lado esquerdo, expanda o submenu Opções Avançadas.
Você verá um campo para o Texto de Espaço Reservado.
Digite o texto de espaço reservado que você deseja usar. Conforme você digita, verá o mesmo texto aparecer na pré-visualização do formulário à direita para que você possa ver como ficará em seu formulário do WordPress.
Se desejar, você também pode marcar a caixa de seleção Ocultar Rótulo. Isso ocultará o rótulo acima do campo para tornar o formulário mais compacto. No entanto, lembre-se de que os leitores de tela não conseguem ler o atributo de espaço reservado do HTML5, portanto, você pode querer deixar o rótulo do campo no lugar para acessibilidade.
Por enquanto, vamos desmarcar Ocultar Rótulo para que tenhamos o rótulo e o texto de espaço reservado.
4. Adicione Texto de Exemplo a um Campo de Lista Suspensa
Você pode usar texto de espaço reservado em qualquer campo, mas o menu suspenso é especialmente útil. Por padrão, uma lista suspensa terá a primeira opção da lista como padrão, mas podemos usar um espaço reservado para evitar isso.
Se você leu nossa comparação de WPForms Lite vs Contact Form 7, saberá que o Contact Form 7 permite adicionar uma linha em branco no topo de um menu suspenso. No entanto, ele mostrará apenas 3 hifens ( – – – ) como espaço reservado, e você não pode personalizar o texto real do espaço reservado.
Portanto, o WPForms oferece mais controle sobre a aparência de seus espaços reservados.
Vamos começar com um exemplo de menu suspenso. Adicionamos 3 opções de resposta a este menu suspenso.
Quando publicarmos o formulário, a 1ª opção será a seleção padrão. Seu visitante poderá enviar este formulário sem clicar no menu suspenso para alterá-lo.
Isso pode ser um problema em qualquer formulário, e particularmente em formulários de pesquisa e questionários. Em qualquer tipo de pesquisa, você deseja garantir que seu visitante escolha conscientemente uma resposta.
Podemos resolver facilmente esse problema adicionando um espaço reservado ao campo suspenso.
Em Opções Avançadas, digitamos o texto de espaço reservado à esquerda. A alteração é mostrada instantaneamente na pré-visualização à direita.
Agora o formulário mostrará o espaço reservado em vez da 1ª opção.
Quando a lista for expandida, você poderá ver que o texto de espaço reservado está esmaecido para mostrar que não é uma seleção válida.
Se você não quiser usar um texto de espaço reservado, mas quiser uma linha em branco no topo da lista suspensa, você pode deixar o espaço reservado em branco. Basta pressionar espaço no campo Texto de espaço reservado. Isso mostrará o campo suspenso como vazio até que o visitante faça uma seleção.
E é isso! Agora você sabe como adicionar um texto de espaço reservado útil aos seus formulários do WordPress.
Crie Seu Formulário WordPress Agora
Próximo Passo: Estilizar seu Texto de Espaço Reservado
Por padrão, o texto de espaço reservado do seu formulário de contato do WordPress será cinza. Se você quiser adicionar algum contraste, pode usar CSS para estilizar.
Confira os trechos de código em nossa documentação: como estilizar texto de espaço reservado. Também temos ótimos exemplos de páginas de contato se você quiser alguma inspiração de design.
Não sabe como adicionar CSS no WordPress? Leia este guia para adicionar trechos de código sem quebrar seu site.
Pronto para construir seu formulário? Comece hoje mesmo com o plugin construtor 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.
