Como Adicionar Texto de Placeholder aos Seus Formulários WordPress

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

Ele fica dentro de um campo e mostra às pessoas exatamente o que digitar antes de o fazerem, o que reduz as suposições e os e-mails de vaivém que se seguem.

Neste artigo, irei guiá-lo através da 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 o Seu Formulário WordPress Agora! :)

O que é Texto de Espaço Reservado?

Texto de espaço reservado é o texto dentro de um campo de formulário que mostra ao utilizador o que digitar. Foi introduzido na especificação HTML5, pelo que por vezes verá referenciado como o 'atributo de espaço reservado HTML5'.

Os placeholders são úteis para qualquer campo que tenha um formato específico, como um endereço de email. Mostra ao seu visitante como formatar a sua entrada é super importante para garantir que cada campo é válido.

Isso significa que há menos hipóteses de abandono do formulário porque o visitante não terá de voltar atrás e corrigir o que digitou. É especialmente útil para campos como:

• URLs: Pode adicionar https://example.com como texto de espaço reservado para mostrar ao visitante como digitar o seu endereço de website corretamente
• Números de telefone: Por exemplo, se quiser obter o código do país do utilizador juntamente com o seu número normal, pode adicionar texto de espaço reservado para lhes mostrar como digitá-lo.
• Nomes de utilizador de redes sociais: O texto de espaço reservado pode mostrar às pessoas como digitar o seu nome de utilizador corretamente. Por exemplo, adicionar @example como texto de espaço reservado para um campo do Twitter mostra que pretende que digitem o @ inicial

Provavelmente consegue pensar em outras formas de usar texto de preenchimento para ajudar os seus visitantes. O texto de preenchimento é um pouco diferente de um valor predefinido.

Quando o utilizador começa a digitar num campo com um placeholder, o texto do placeholder desaparece. Em contraste, um valor predefinido será enviado juntamente com a entrada do formulário, a menos que o utilizador o altere.

Como Adicionar Texto de Espaço Reservado a Formulários WordPress

Uma vez que o seu formulário exista, o texto de preenchimento leva alguns cliques por campo, e não precisa de tocar numa linha de código ou CSS para o fazer. Siga os passos abaixo para começar:

Passo 1: Instalar 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 possa começar a partir de um formulário de contacto pronto em vez de construir a partir do zero.

Cada campo que arrasta tem o seu próprio painel de opções, e o texto de substituição encontra-se no mesmo local em todos eles. O que mais gosto no WPForms para esta tarefa em particular é que a pré-visualização do texto de substituição é atualizada em tempo real.

Todas as versões do WPForms permitem adicionar espaços reservados a campos de formulário, incluindo o WPForms Lite. Tenha em atenção que a versão Pro permite adicionar campos avançados aos seus formulários, pelo que é muito mais poderosa do que a versão gratuita.

Descarregue o ficheiro zip do separador Downloads na sua conta WPForms e carregue-o para o seu site WordPress. Aqui está um guia passo a passo sobre como instalar um plugin WordPress se precisar de ajuda com este passo.

Comece Hoje Mesmo Com o WPForms

Passo 2: Crie o seu Formulário de Contacto

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

Pode começar por ir a WPForms » Adicionar Novo e escolher o modelo Formulário de Contacto Simples ou pedir à IA do WPForms para construir o formulário para si.

Depois de selecionar um modelo ou construir o seu formulário usando a IA do WPForms, será redirecionado para o construtor de formulários. Aqui pode ver uma lista de campos para adicionar à esquerda e uma pré-visualização em tempo real do seu formulário à direita.

É fácil personalizar o seu formulário e adicionar quaisquer campos de que necessite. Pode até adicionar um acordo de RGPD facilmente, arrastando o campo RGPD para a pré-visualização do formulário.

Precisa de mais ajuda? Temos um guia detalhado que mostra como criar um formulário de contacto simples no WordPress. Quando o seu formulário estiver pronto, clique em Guardar no topo do construtor de formulários para guardar o seu progresso até agora.

Passo 3: Adicione Texto de Preenchimento a um Campo de Texto ou Email

Agora estamos prontos para adicionar texto de exemplo aos seus formulários WordPress. Vamos mostrar-lhe 2 formas úteis de usar esta funcionalidade para tornar os 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 definições.

Em seguida, no lado esquerdo, expanda a sub-secção Opções Avançadas. Verá um campo para o Texto de Substituição.

Escreva o texto de exemplo que pretende usar. À medida que escreve, verá o mesmo texto aparecer na pré-visualização do formulário à direita, para que possa ver como ficará no seu formulário WordPress.

Se desejar, também pode clicar na caixa de seleção Ocultar Etiqueta. Isto ocultará a etiqueta acima do campo para tornar o formulário mais compacto.

No entanto, tenha em atenção que os leitores de ecrã não conseguem ler o atributo de texto de substituição HTML5, pelo que pode querer deixar a etiqueta do campo no lugar para acessibilidade.

Por agora, vamos desmarcar Ocultar Etiqueta para que tenhamos tanto a etiqueta como o texto de substituição. Repita isto para cada campo que necessite de uma dica.

Passo 4: Adicione Texto de Preenchimento a um Campo de Lista Pendente

Pode usar texto de exemplo em qualquer campo, mas a lista pendente é especialmente útil. Por defeito, uma lista pendente terá como seleção a primeira opção da lista, mas podemos usar um placeholder para evitar isto.

Se leu a 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, só mostrará 3 traços ( – – – ) como texto de substituição, e não pode personalizar o texto de substituição real. Assim, o WPForms dá-lhe mais controlo sobre a forma como os seus textos de substituição aparecem.

Vamos começar com um exemplo de menu suspenso. Adicionámos 3 opções de resposta a este menu suspenso. Quando publicarmos o formulário, a 1ª opção será a seleção padrão.

Isto pode ser um problema em qualquer formulário, e particularmente em formulários de inquérito e questionários. Em qualquer tipo de inquérito, quer ter a certeza de que o seu visitante escolhe conscientemente uma resposta.

Podemos resolver facilmente este problema adicionando um texto de substituição ao campo do menu suspenso. Em Opções Avançadas, digitámos o texto de substituição à esquerda. A alteração é mostrada instantaneamente na pré-visualização à direita.

Agora o formulário mostrará o placeholder em vez da 1ª opção.

Quando a lista for expandida, pode ver que o texto de exemplo está esbatido para mostrar que não é uma seleção válida.

Se não quiser usar texto de substituição, mas quiser uma linha em branco no topo do menu suspenso, pode deixar o texto de substituição em branco.

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

Todos os Campos WPForms que Suportam Texto de Preenchimento

Nem todos os campos podem conter texto de exemplo, e saber quais podem poupa-lhe a procura em definições que não existem.

Para a referência completa de todos os tipos de campo, o WPForms tem documentação sobre 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 sub-campo (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
Menu suspenso	Serve também como forma de impedir que a primeira opção seja pré-selecionada
Morada	Exemplo separado por linha, cidade, estado, código postal e país
Data / Hora	Exemplo separado para os seletores de data e hora
Palavra-passe	Exemplo separado para o campo de confirmação
CAPTCHA Personalizado	Exemplo padrão

Qualquer coisa em que o leitor clique em vez de digitar não tem opção de exemplo, pois não há uma caixa de texto vazia para colocar uma dica. Isto inclui Caixas de Seleção, Múltipla Escolha, Classificação, Assinatura, Carregamento de Ficheiro, Deslizador Numérico e Texto Rico.

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

Migrar do Contact Form 7 para o WPForms

Se chegou aqui a partir do Contact Form 7, já sabe porquê. Os exemplos lá significam abrir o separador Formulário e digitar um atributo placeholder no shortcode da etiqueta do formulário manualmente para cada campo, ou marcar a caixa "usar este texto como placeholder" em Valor Padrão.

De qualquer forma, está a editar marcação, e cada novo campo significa voltar ao shortcode novamente. As listas pendentes encontram um teto mais difícil, porque o Contact Form 7 pode dar-lhe uma linha inicial em branco, mas mostra-a como três traços sem nenhuma configuração para mudar o que diz.

Não pode escrever "Escolha um departamento" ou "Selecione o seu orçamento", e nenhuma quantidade de edição de shortcode muda isso. A nossa comparação WPForms Lite vs Contact Form 7 aborda o resto das diferenças se quiser o quadro completo.

Essa lacuna é a razão honesta para mudar para este trabalho em particular. O texto de exemplo no WPForms é uma caixa onde escreve, com uma pré-visualização em direto, em cada campo que o suporta.

Pode importar os seus formulários existentes do Contact Form 7 em vez de os reconstruir, o que torna o WPForms uma alternativa direta ao Contact Form 7 se a edição de shortcode se tornou cansativa.

FAQs sobre Texto de Preenchimento no Formulário de Contacto

O texto de exemplo surge muito entre os utilizadores do WordPress a configurar formulários de contacto. Aqui estão as perguntas que surgem com mais frequência.

O que é texto de preenchimento?

É 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 adiciona-o a partir do separador Avançadas de qualquer campo suportado.

Qual é a diferença entre texto de preenchimento e um valor predefinido?

O texto de exemplo é apenas uma dica visual, pelo que 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 exemplo para mostrar o formato que deseja, e um valor padrão quando quiser preencher uma resposta real.

Os leitores de ecrã conseguem ler o texto de preenchimento?

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

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

Porque é que a minha lista pendente seleciona a primeira opção automaticamente?

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

Adicione texto de preenchimento no separador Avançadas e isso para, ou alterne o Estilo para Moderno no separador Geral, uma vez que os menus pendentes Modernos não pré-selecionam de todo.

Posso adicionar texto de preenchimento no Contact Form 7?

Pode fazê-lo, digitando um atributo placeholder no shortcode da etiqueta do formulário ou utilizando a caixa de verificação Valor Padrão.

Os menus pendentes são o limite, porque o Contact Form 7 só oferece uma linha em branco mostrada como três traços sem forma de personalizar a redação.

Próximo Passo: Estilizar o seu Texto de Substituição

Por defeito, o texto de substituição do seu formulário de contacto WordPress será cinzento.  Se quiser adicionar algum contraste, pode usar CSS para o estilizar.

Veja os trechos de código na nossa documentação: como estilizar texto de substituição. Temos também alguns ótimos exemplos de páginas de contacto se quiser alguma inspiração de design.

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