Como Adicionar Texto de Exemplo aos Seus Formulários WordPress

Quer adicionar texto de espaço reservado em formulários no WordPress? Os espaços reservados facilitam para que seus visitantes preencham cada campo corretamente.

Ele fica dentro de um campo e mostra às pessoas exatamente o que digitar antes de digitarem, o que reduz as suposições e o bate-volta de e-mails que se seguem.

Neste artigo, vou guiá-lo na adição de texto de espaço reservado a cada campo do seu formulário de contato do WordPress usando a solução mais simples disponível com o WPForms!

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'.

Espaços reservados 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 que é super importante para garantir que cada campo seja válido.

Isso significa que há menos chance de abandono do 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.com como 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 @exemplo como texto de exemplo para um campo do Twitter mostra que você quer que eles digitem o @ inicial

Você provavelmente pode pensar em outras maneiras de usar texto de espaço reservado para ajudar seus visitantes. O texto de espaço reservado é um pouco diferente de um valor padrão.

Quando o usuário começa a digitar em um campo com um espaço reservado, o texto do espaço reservado desaparece. Em contraste, um valor padrão será enviado junto com a entrada do formulário, a menos que o usuário o altere.

Como Adicionar Texto de Exemplo a Formulários WordPress

Uma vez que seu formulário exista, o texto de espaço reservado leva alguns cliques por campo, e você não precisa tocar em uma linha de código ou CSS para fazer isso. Siga as etapas abaixo para começar:

Passo 1: Instale o Plugin WPForms

WPForms é um construtor de formulários de arrastar e soltar para WordPress com mais de 2.100 modelos de formulários, para que você possa começar com um formulário de contato pronto em vez de construir do zero.

Cada campo que você arrasta tem seu próprio painel de opções, e o texto de placeholder vive no mesmo local em todos eles. O que eu mais gosto no WPForms para este trabalho em particular é que a prévia do placeholder é atualizada em tempo real.

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.

Comece com o WPForms hoje mesmo

Etapa 2: Crie seu formulário de contato

No WPForms, você pode criar e incorporar um formulário em menos de 5 minutos, graças à sua biblioteca de mais de 2.100 modelos de formulário e recursos avançados de criação de formulários com IA.

Você pode começar indo em WPForms » Adicionar Novo e escolher o modelo Formulário de Contato Simples ou pedir à IA do WPForms para construir o formulário para você.

Depois de selecionar um modelo ou construir seu formulário usando a IA do WPForms, você será redirecionado para o construtor de formulários. Aqui você pode ver uma lista de campos para adicionar à esquerda e uma prévia ao vivo do seu formulário à direita.

É 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.

Etapa 3: Adicione texto de espaço reservado a um campo de texto ou 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 do Placeholder.

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 leitores de tela não conseguem ler o atributo de placeholder HTML5, então você pode querer deixar o rótulo do campo no lugar para acessibilidade.

Por enquanto, vamos desmarcar Ocultar Rótulo para que tenhamos tanto o rótulo quanto o texto do placeholder. Repita isso para cada campo que precise de uma dica.

Etapa 4: Adicione texto de espaço reservado a um campo suspenso

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 dropdown.

No entanto, ele só mostrará 3 hifens ( – – – ) como placeholder, e você não pode personalizar o texto real do placeholder. Portanto, o WPForms lhe dá mais controle sobre a aparência dos seus placeholders.

Vamos começar com um exemplo de dropdown. Adicionamos 3 opções de resposta a este dropdown. Quando publicarmos o formulário, a primeira opção será a seleção padrão.

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 este problema adicionando um placeholder ao campo dropdown. Em Opções Avançadas, digitamos o texto do placeholder à esquerda. A alteração é mostrada instantaneamente na prévia à 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 texto de placeholder, mas quiser uma linha em branco no topo do dropdown, pode deixar o placeholder em branco.

Basta pressionar espaço no campo Texto de Exemplo. Isso mostrará o campo suspenso como vazio até que o visitante faça uma seleção.

Todos os campos do WPForms que suportam texto de espaço reservado

Nem todo campo pode conter texto de exemplo, e saber quais podem economiza tempo procurando configurações que não existem.

Para a referência completa de cada tipo de campo, o WPForms tem a documentação de texto de exemplo que cobre os detalhes.

Campo	Notas
Texto de Linha Única	Exemplo padrão
Texto de Parágrafo	Exemplo padrão
Nome	Exemplo separado por subcampo (primeiro, meio, último)
E-mail	Exemplo separado para o campo de confirmação
Website / URL	Exemplo padrão
Telefone	Exemplo padrão
Número	Exemplo padrão
Dropdown	Serve também como uma forma de impedir que a primeira opção seja pré-selecionada
Endereço	Exemplo separado por linha, cidade, estado, CEP e país
Data / Hora	Exemplo separado para os seletores de data e hora
Senha	Exemplo separado para o campo de confirmação
Captcha Personalizado	Exemplo padrão

Qualquer coisa em que o leitor clica em vez de digitar não tem opção de exemplo, pois não há uma caixa de texto vazia para colocar uma dica. Isso inclui Caixas de Seleção, Múltipla Escolha, Avaliação, Assinatura, Upload de Arquivo, Controle Deslizante de Número e Texto Rico.

Seis dos campos acima vêm com o WPForms Lite gratuito, incluindo Texto de Linha Única, Nome, E-mail, Texto de Parágrafo, Suspenso e Número. Telefone, Endereço, Data/Hora e Captcha Personalizado são campos avançados que exigem uma licença paga.

Migrando do Contact Form 7 para o WPForms

Se você veio do Contact Form 7, já sabe o porquê. Exemplos lá significam abrir a aba Formulário e digitar um atributo placeholder no shortcode do formulário manualmente para cada campo, ou marcar a caixa "usar este texto como placeholder" em Valor Padrão.

De qualquer forma, você está editando marcação, e cada novo campo significa voltar ao shortcode novamente. Campos suspensos encontram um teto mais difícil, pois o Contact Form 7 pode fornecer uma primeira linha em branco, mas a exibe como três hifens sem uma configuração para mudar o que diz.

Você não pode escrever "Escolha um departamento" ou "Selecione seu orçamento", e nenhuma quantidade de edição de shortcode muda isso. Nossa comparação WPForms Lite vs Contact Form 7 aborda o restante das diferenças se você quiser o quadro completo.

Essa lacuna é o motivo honesto para mudar para este trabalho em particular. O texto de exemplo no WPForms é uma caixa na qual você digita, com uma pré-visualização ao vivo, em cada campo que o suporta.

Você pode importar seus formulários existentes do Contact Form 7 em vez de reconstruí-los, o que torna o WPForms uma alternativa direta ao Contact Form 7 se a edição de shortcode se tornou cansativa.

Perguntas frequentes sobre texto de espaço reservado no formulário de contato

O texto de exemplo aparece com frequência entre usuários do WordPress que configuram formulários de contato. Aqui estão as perguntas que surgem com mais frequência.

O que é texto de espaço reservado?

É o texto de dica dentro de um campo de formulário que mostra o que digitar e desaparece assim que alguém começa a digitar.

Vem do atributo placeholder do HTML5, e no WPForms você o adiciona na aba Avançado de qualquer campo suportado.

Qual é a diferença entre texto de espaço reservado e um valor padrão?

O texto de exemplo é apenas uma dica visual, portanto, nunca é enviado com o formulário. Um valor padrão é conteúdo real no campo e é enviado, a menos que a pessoa o altere primeiro.

Use um placeholder para mostrar o formato desejado e um valor padrão quando quiser preencher uma resposta real.

Os leitores de tela podem ler o texto de espaço reservado?

Não de forma confiável, e é por isso que o texto de espaço reservado não deve ser a única descrição que um campo tem.

Mantenha o rótulo do campo visível em vez de marcar Ocultar rótulo e coloque qualquer coisa genuinamente importante na descrição do campo, onde ela permanece na tela.

Por que meu menu suspenso seleciona a primeira opção automaticamente?

Porque está definido para o estilo Clássico, que sempre pré-seleciona a primeira opção.

Adicione texto de espaço reservado na guia Avançado e isso para, ou mude o Estilo para Moderno na guia Geral, já que os menus suspensos Modernos não pré-selecionam nada.

Posso adicionar texto de espaço reservado no Contact Form 7?

Você pode, digitando um atributo placeholder no shortcode da tag de formulário ou usando a caixa de seleção Valor Padrão.

Menus suspensos são o limite, porque o Contact Form 7 oferece apenas uma linha em branco mostrada como três hifens sem forma de personalizar a redação.

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.

Crie um Formulário de Contato Melhor 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.