Como Adicionar Texto de Placeholder aos Seus Formulários WordPress

Quer adicionar texto de espaço reservado a um formulário no WordPress?

Os espaços reservados facilitam para os seus visitantes preencherem cada campo corretamente. Isso ajuda 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 espaço reservado a qualquer tipo de formulário.

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 espaços reservados são úteis para qualquer campo que tenha um formato específico, como um endereço de e-mail. Mostra ao seu visitante como formatar a sua entrada.

O texto de espaço reservado é muito 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 conseguirá pensar em outras formas de usar texto de espaço reservado para ajudar os seus visitantes.

O texto de espaço reservado é um pouco diferente de um valor predefinido. Quando o utilizador começa a digitar num campo com um espaço reservado, o texto de espaço reservado desaparece. Em contraste, um valor predefinido será submetido juntamente com a entrada do formulário, a menos que o utilizador o altere.

Agora que sabemos como usar o atributo de espaço reservado HTML5, mostraremos a maneira fácil de o adicionar aos seus formulários.

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

Mostraremos como adicionar facilmente texto de espaço reservado nos passos abaixo.

Vamos começar por instalar o melhor plugin de criação de formulários para WordPress.

1. Instalar o Plugin WPForms

Primeiro, instale e ative o plugin WPForms.

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.

2. Crie um Formulário de Contacto Simples

Em seguida, vai querer criar um formulário de contacto simples. No WPForms, pode criar e incorporar um formulário em menos de 5 minutos.

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

3. Adicione Texto de Espaço Reservado ao Campo de E-mail

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

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 placeholder HTML5, pelo que poderá querer deixar a etiqueta do campo ativa para acessibilidade.

Por agora, vamos desmarcar Ocultar Etiqueta para termos tanto a etiqueta como o texto de exemplo.

4. Adicione Texto de Espaço Reservado a um Campo de Lista Suspensa

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 entre WPForms Lite e Contact Form 7, saberá que o Contact Form 7 permite adicionar uma linha em branco no topo de uma lista pendente. No entanto, só mostrará 3 traços ( – – – ) como placeholder, e não pode personalizar o texto do placeholder.

Assim, o WPForms dá-lhe mais controlo sobre a aparência dos seus placeholders.

Vamos começar com um exemplo de lista pendente. Adicionámos 3 opções de resposta a esta lista pendente.

Quando publicarmos o formulário, a 1ª opção será a seleção padrão. O seu visitante poderá submeter este formulário sem clicar na lista pendente para a alterar.

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 placeholder ao campo da lista pendente.

Em Opções Avançadas, escrevemos o texto de exemplo à 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 da lista suspensa, pode deixar o texto de substituição em branco. Basta pressionar espaço no campo Texto de Substituição. Isto fará com que o campo da lista suspensa apareça vazio até que o visitante faça uma seleção.

E é tudo! Agora sabe como adicionar texto de substituição útil aos seus formulários WordPress.

Crie o seu formulário WordPress agora

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.

Não tem a certeza de como adicionar CSS no WordPress? Leia este guia sobre adicionar trechos de código sem quebrar o seu site.

Pronto para criar 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.