O que é o Texto de Placeholder em Campos de Formulários

A SharpSpring lhe permite incluir texto de placeholder nos campos de formulários da SharpSpring e em campos personalizados.

Este artigo detalha como utilizar o texto de placeholder em formulários.

Habilitando o Texto de Placeholder

Ao utilizar um formulário em seu site você pode se ver necessitando incluir texto de placeholder em seus campos. O texto de placeholder é um atributo que oferece à pessoa que estiver preenchendo um formulário uma pequena dica descrevendo o valor esperado de um dado campo de formulário.

O texto de placeholder é utilizado para fornecer instruções sobre como preencher um campo em um formulário. Por exemplo, um campo pode possuir uma frase semelhante ao seguinte: Clique aqui para inserir o seu nome.

Para habilitar o texto de placeholder em formulário da SharpSpring, você deve adicionar a seguinte linha de código no código incorporado do seu formulário SharpSpring:

ss_form.hidden = {'_usePlaceholders': true};

Após habilitar os placeholders em seu código incorporado, o texto de placeholder é exibido dentro da caixa de entrada. Por definição, a etiqueta do campo é utilizada para o texto de placeholder.

Você pode atualizar a etiqueta e o placeholder simultaneamente clicando e modificando a caixa de texto de cada campo incluído em seu formulário. Tanto a etiqueta quanto o placeholder exibirão o texto atualizado com o que estiver inserido dentro da caixa de entrada.

Notas:

• A SharpSpring oferece Serviços Profissionais para auxiliar na codificação personalizada.
• O texto de placeholder está disponível apenas para formulários SharpSpring, e não para formulários nativos.

Texto de Placeholder e Campos Personalizados

Para campos personalizados, recomenda-se que a etiqueta do campo não seja alterada e que o texto de placeholder exiba um exemplo do quê um lead deveria inserir no campo do formulário. A SharpSpring fornece a funcionalidade para garantir tudo isso dentro do gerenciador de campo personalizado. Ao criar ou editar um campo personalizado, você verá uma entrada etiquetada como Placeholder. Ao inserir texto neste campo, o valor da entrada substitui o texto que normalmente seria exibida no placeholder de tal campo do formulário.

Uma vez que os placeholders estiverem habilitados, e as etiquetas de campo e o texto de placeholder do campo personalizado estiverem configurados, o formulário exibirá uma etiqueta de campo que se difere do texto de placeholder, oferecendo-lhe a oportunidade de dar um exemplo de entrada para um campo personalizado de um formulário.

O texto de placeholder pode ser utilizado internamente dentro do Gerenciador de Contatos. Toda entrada de texto de placeholder no Gerenciador de Campos Personalizados também será exibida quando você visualizar o campo no Gerenciador de Contatos. Isso permite que os usuários da SharpSpring compreendam a finalidade esperada de um campo personalizado, caso a etiqueta não seja auto-explicativa.

O campo de placeholder está disponível para os seguintes tipos de campos personalizados:

• Entrada de texto

• Área de texto

• Selecionar de drop-down

• País

• Estado

Passando Campos Personalizados Ocultos

Caso esteja passando um valor oculto por entre seu formulário, você pode adicionar um par de valores-chave em seu código incorporado. O seguinte exemplo mapeia o campo oculto Company com o valor Acme Co.:

ss_form.hidden = {'Company': 'Acme Co.', '_usePlaceholders': true};

Evitando Duplicatas de Valores de Placeholders

Caso deseje utilizar placeholders em vez de etiquetas, você precisará editar o seu CSS. Após adicionar o código incorporado em seu formulário, defina as etiquetas na página de seu CSS para  display: none; nos campos de entrada de texto. Se não fizer isso as etiquetas serão exibidas duas vezes.

Por exemplo, editar as seguintes linhas de seu código CSS fará garantir que você está utilizando o valor de placeholder e não uma etiqueta CSS, evitando, assim, etiquetas duplicadas:

label:not(.checkbox-label) { display: none; }

Além do mais, isso fará ocultar todas as etiquetas, com exceção das etiquetas de grupo e de caixa de verificação.

Exemplo de Código de Placeholder

O seguinte código é um exemplo do código incorporado de formulário com o conteúdo de placeholder habilitado:

<!-- SharpSpring Form for (your form's name here) -->
<script type="text/javascript">
 var ss_form = {'account': 'yyyyyyyyyyyyyyy', 'formID': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'};
 ss_form.width = '100%';
 ss_form.height = '1000';
 ss_form.domain = 'app-zzzzzzzzzz.marketingautomation.services';
 ss_form.hidden = {'_usePlaceholders': true};
 // ss_form.target_id = 'target'; // Optional parameter: forms will be placed inside the element with the specified id
 // ss_form.polling = true; // Optional parameter: set to true ONLY if your page loads dynamically and the id needs to be polled continually.
</script>
<script type="text/javascript" src="https://koi-zzzzzzzzzz.marketingautomation.services/client/form.js?ver=2.0.1"></script>