Como alterar o texto padrão de espaço reservado de um elemento suspenso

Personalizar o texto padrão de um elemento de lista suspensa pode ajudar a tornar seus formulários mais claros, profissionais e fáceis de entender para os clientes.

Em vez de usar textos genéricos de preenchimento, você pode exibir rótulos mais significativos, como:

• Escolha o seu país
• Escolha um tamanho
• Selecione sua profissão
• Selecione uma opção de entrega

Por que personalizar o texto de espaço reservado da lista suspensa?

Atualizar o texto de espaço reservado do seu menu suspenso ajuda a melhorar:

• Clareza do formulário
• Experiência do usuário
• Taxas de conclusão de formulários
• Profissionalismo da marca
• Orientação ao cliente

Rótulos de espaço reservado claros ajudam os visitantes a entender exatamente quais informações eles precisam selecionar antes de enviar um formulário.

Isto é especialmente útil para:

• Formulários de contato
• Formulários de inscrição
• Formulários de pesquisa
• Formulários de personalização de produtos
• Formulários de várias etapas

Antes que você comece

Antes de seguir este tutorial, certifique-se de que já possui:

• Uma página criada no GemPages
• A Elemento suspenso adicionado à sua página
• Acesso ao editor GemPages

Passo 1: Selecione o elemento suspenso

Abra sua página no editor GemPages.

Clique com o botão direito do mouse no elemento suspenso onde deseja alterar o texto de espaço reservado => Código personalizado.

Passo 2: Abra a aba de script.

Abra o Script aba. É aqui que você pode adicionar JavaScript personalizado para o elemento selecionado.

Passo 3: Adicione o script personalizado

Cole o seguinte código na guia Script:

document.addEventListener("DOMContentLoaded", () => {

  const currentElement = document.getElementsByClassName('{{rootClassName}}');

  elementoAtual[0]

    .querySelector('option[disabled].gp-hidden')

    .innerText = 'Profissão';

});

Nota Importante

Substitua 'Profissão' pelo texto de exemplo que você deseja exibir.

Exemplo:

'Selecione seu país'

or

'Escolha o seu tamanho'

Resultado: