Como funcionam blocos e campos de formulários

read
Last updated at:

O que você vai aprender

Aprenda a usar vários blocos de conteúdo do editor de formulários (ou seja, elementos e campos de dados) no seu formulário de registro para personalizar a aparência e o tipo de informação que você coleta dos assinantes.

Sobre a guia Adicionar blocos

No editor de formulário de registro, clique na guia Adicionar blocos para ver os diferentes blocos de conteúdo que você pode adicionar ao seu formulário.

Há 2 categorias diferentes de blocos:

  1. Elementos
  2. Campos de input

Quando você arrasta e solta um bloco na prévia do formulário, as opções de edição aparecem na barra lateral esquerda. Aqui, você pode ajustar o texto de detalhes do bloco, incluindo texto e estilo. Na parte inferior desse menu de edição, você também pode configurar as opções de Visibilidade do bloco para controlar se ele será exibido em todos os dispositivos, somente no desktop ou somente no celular. Saiba mais sobre blocos dinâmicos em formulários.

The editing menu for a text field in a form showing the Visibility setting configured to show on all devices.

Se você estiver criando um formulário de registro apenas para dispositivos móveis, consulte noções básicas: design de formulário para dispositivos móveis.

Práticas recomendadas ao adicionar blocos de conteúdo a formulários

Se você pretende incluir vários blocos e campos para pedir aos visitantes do seu site várias informações (por exemplo, data de nascimento, endereço de e-mail, número de telefone etc.) no seu formulário, use um formulário de várias etapas. Os formulários de várias etapas podem ajudar você a saber mais sobre seus visitantes e coletar o consentimento deles em vários canais, sem sobrecarregá-los com muitos campos de uma só vez.

Se você quiser solicitar e-mail e número de telefone no seu formulário, a prática recomendada para crescimento de lista e conformidade é incluir esses campos em 2 etapas diferentes.

Elementos do formulário

Os elementos do formulário de registro adicionam conteúdo ao seu formulário, incluindo texto, botões, imagens e cupom. Esses blocos informam o visitante sobre o propósito do seu formulário de registro e permitem que ele interaja com ele.

The Elements menu of options within the Add blocks tab in the form editor.

Bloco de texto

Os blocos de texto permitem inserir conteúdo de texto no seu formulário, como um título, instruções ou outro texto de exibição. O editor de formulários da Klaviyo usa o padrão de codificação UTF, o que significa que ele oferece suporte a caracteres latinos, emojis, caracteres de byte duplo e muito mais. Além disso, você pode adicionar uma imagem inline usando a opção de entrada de URL da imagem.

Bloco de botões

Os blocos de botão permitem que você reúna e salve informações na Klaviyo sobre quem envia seu formulário. Um botão pode permitir que a pessoa feche ou envie o formulário, direcioná-la para uma página diferente do seu site ou inscrevê-la em mensagens por SMS.

Escolha 1 das seguintes ações para o seu botão:

The Button Click Action dropdown on the button menu showing on the action options, including Close form, Submit form, Go to URL, and Subscribe via SMS.

  • Fechar formulário O formulário será fechado e os dados não serão enviados para a Klaviyo. 
  • Enviar formulário Todos os campos do formulário preenchidos pelo visitante serão enviados para o Klaviyo, e o formulário avançará com base na opção que você selecionar no campo Após o envio (Mostrar próxima etapa, Ir para URL ou Fechar formulário).
  • Ir para URL (Redirecionar para uma página diferente) O visitante será redirecionado para a URL que você fornecer, e os dados de quaisquer campos de formulário não serão enviados para o Klaviyo. Ao inserir a URL de destino, use a URL completa, incluindo https:// (por exemplo, use https://help.klaviyo.com/hc/pt-br em vez de help.klaviyo.com/hc/en-us).

    A ação Ir para URL não funcionará com uma URL incompleta.

  • Inscrever-se via SMS Você pode configurar essa opção em formulários somente para dispositivos móveis ou na visualização para dispositivos móveis da etapa de adesão por SMS para formulários direcionados a todos os dispositivos. Ele permite que visitantes se inscrevam por SMS com apenas alguns toques (toque para enviar mensagem). Quando um visitante clica em um botão Inscrever-se via SMS, o app de mensagens de texto dele vai aparecer com uma mensagem pré-digitada que ele pode enviar para se inscrever.
    • Selecione uma palavra-chave no menu suspenso Palavra-chave de inscrição. Esta é a palavra que alguém deve enviar por SMS para o número de destino para ser adicionado à lista de assinaturas de SMS da sua conta e é configurada no nível da conta.
    • Defina uma mensagem de opt-in, que será exibida no app de mensagens deles. Por padrão, isso diz “Envie este texto para se inscrever em <organization_name>!”, mas você pode personalizar o conteúdo da mensagem. Este campo permite apenas até 160 caracteres GSM-7 (1 mensagem). Caracteres especiais, incluindo emojis, não são válidos.
    • Escolha o número apropriado em Região de envio se você opera em várias regiões e tem mais de 1 número de envio.

The SMS Settings menu that appears when a button click action is set to Subscribe via SMS.

Alterar a lista para a qual um formulário de registro envia os envios

Você pode alterar para qual lista seu formulário envia (ou seja, a lista para a qual novos assinantes são adicionados) nas configurações do botão. Para alterar a lista de envio de um formulário:

  1. Clique no botão dentro do editor de formulários.
  2. No menu que aparece à esquerda, selecione a nova lista em Lista para enviar.
    The list to submit dropdown on the button menu where you can select which list your form submits to.
  3. Clique em Voltar na barra lateral de edição.
  4. Se você estiver satisfeito com o conteúdo do seu formulário, clique em Publicar. Mesmo que seu formulário já esteja no ar, você deve publicar as alterações para que novos assinantes sejam coletados na lista recém-selecionada.

Enviar campos ocultos

Os campos ocultos são propriedades adicionais que serão adicionadas ao perfil de um assinante no Klaviyo. Isso permite que você acompanhe visitantes que interagem com o seu formulário. Por padrão, todos os formulários têm uma propriedade $source como um campo oculto, que identifica como eles foram adicionados à sua lista.

Essa opção só está disponível para botões com uma Ação definida como Enviar formulário.

Você pode personalizar a propriedade $source e outros nomes de propriedade. Como outros campos em formulários, se você adicionar campos ocultos para propriedades que já existem no perfil de alguém, elas serão substituídas pelo novo valor quando a pessoa enviar o formulário. Por exemplo, vamos dizer que seu formulário coleta preferências de coleção, e um cliente já selecionou anteriormente que tem interesse na sua coleção masculina. Se este formulário tiver um campo oculto para interesse na sua coleção feminina, a propriedade de preferências será substituída quando o botão for clicado (ou seja, de masculina para feminina).

Para adicionar uma nova propriedade oculta, selecione Adicionar uma propriedade.

The Submit Hidden Fields option which appears when a button click action is set to Submit Form.

Bloco de imagens

Os blocos de imagem permitem adicionar uma imagem ao seu formulário (por exemplo, seu logotipo). Você pode usar este bloco para adicionar imagens que combinem com a aparência da sua marca.

Arquivos JPEG, PNG e GIF são aceitos. Como acontece com todas as imagens visualizadas na web, tamanhos de arquivo maiores resultam em tempos de carregamento mais lentos. Procure um tamanho de arquivo de 50–100 KB para um desempenho ideal.

Você também pode adicionar uma imagem de fundo ou uma imagem lateral na aba Estilos do editor de formulários.

Bloco de cupons

Adicione um bloco de cupom para incentivar os visitantes do seu site a enviar seu formulário de registro e usar o cupom incluído para fazer uma compra no seu site.

Você pode adicionar códigos de cupom estáticos ou cupom único a um formulário. As práticas recomendadas da Klaviyo indicam mostrar esses códigos na etapa de Sucesso, para que os compradores não precisem sair do seu site para obter o código. Leia nosso guia sobre como adicionar código de cupom a formulário de registro para mais detalhes sobre a configuração.

bloco de declaração de SMS

A linguagem de divulgação de SMS deve ser colocada acima de um botão de opt-in de SMS para ajudar a manter a conformidade de SMS. Saiba mais sobre linguagem de divulgação de SMS.

Cronômetro de contagem regressiva

Os temporizadores de contagem regressiva podem adicionar uma sensação de urgência aos seus formulário de registro e, muitas vezes, são combinados com promoções especiais ou mensagens de feriados. Saiba mais sobre como adicionar temporizadores de contagem regressiva a formulários.

Bloco de contagem de inscrições

Adicione um contador de registro no formulário para exibir contagens de envio em tempo real (por exemplo, "500 pessoas se inscreveram para essas ofertas na última hora!") no seu formulário para aumentar a conversão e acelerar o crescimento da lista. Esse bloco usa prova social para criar urgência e compelir os visitantes do site a se inscreverem.

A sign-up form with a sign-up counter block displaying real-time sign-up count on an example website.

Quando você adiciona um bloco de um contador de cadastros a um formulário, pode definir as seguintes configurações:

  • Configurações de exibição Determine como as inscrições são contabilizadas. Observe que um assinante deve alcançar a etapa de sucesso do formulário:
    • Registros nos últimos 30 dias
    • Registros nos últimos 7 dias
    • Registros nas últimas 24 horas
    • Registros na última hora
  • Mostrar após __ envios Determine o número mínimo de envios necessários para que o bloco seja exibido.

The Sign-up counter block menu within the form editor showing an example form set to show Sign-ups from the past 30 days after 20 submits.

O bloco ficará oculto dos visitantes do site até que o número mínimo de envios seja atingido.Quando o número mínimo de envios for atingido (por exemplo, 200 envios), o bloco será exibido no seu formulário.

O texto padrão vai refletir as configurações de Exibição selecionadas. Embora esse texto seja configurável, não exclua a tag {{ form_submit_count }}, pois ela mostra a contagem de inscrições em tempo real.

Campos de input

Os campos de dados permitem que você colete informações de visitantes do site, como endereço de e-mail, nome ou data de nascimento.

The input fields options that can be added into a sign-up form from the Add Blocks tab of the form editor.

Todos os campos de dados precisam estar conectados a uma Propriedades do perfil, que é usada para armazenar os dados enviados por cada assinante. Ao adicionar um campo de dados ao seu formulário, selecione uma propriedade existente no menu suspenso Propriedades do perfil ou crie uma nova digitando um novo nome de propriedade e clicando em Criar opção.

The Profile Property dropdown where you can select or create a property to go with an added input field.

A menos que seja especificado de outra forma, as entradas desses campos serão armazenadas na página de perfil de cada pessoa.

Não é recomendável atualizar Propriedades do perfil personalizadas na Klaviyo que foram sincronizadas via uma integração (por exemplo, tag da Shopify), pois elas serão substituídas na próxima sincronização da sua integração.

Campo de dados de e-mail

Os campos de dados de e-mail permitem que os visitantes insiram seus endereços de e-mail e se inscrevam na lista conectada ao formulário. Um formulário só pode ter 1 campo de dados de e-mail, e ele deve aparecer em uma das etapas do formulário, não na mensagem de sucesso.

Campo de número de telefone

Se você adicionar um campo de número de telefone, por padrão, ele coletará o consentimento promocional para SMS, o que permite que você envie qualquer mensagem de SMS. Este bloco valida os números de telefone enviados para garantir que eles sejam armazenados em um formato de número aceitável. Se você ainda não fez isso, ative o SMS se você vai coletar consentimento de SMS e configure o texto de divulgação para incluir em qualquer lugar em que você coletar consentimento de SMS.

Se necessário, você pode ajustar o tipo de consentimento de SMS que o formulário coleta; mas garanta que a linguagem de divulgação corresponda ao tipo de consentimento e inclua exemplos dos tipos de mensagens que você enviará para que os assinantes entendam com o que estão concordando.

Você também pode usar blocos dinâmicos ao coletar consentimento de SMS para garantir que os compradores vejam o melhor método para aceitar receber mensagens.

Campo de dados de texto

Campos de dados de texto são usados para coletar informações que não precisam seguir um formato específico (como datas ou endereços de e-mail) e quando não faz sentido oferecer uma lista predefinida de opções. Observe que a segmentação e o filtro de fluxo diferenciam maiúsculas de minúsculas e são sensíveis à ortografia. Considere outros tipos de campo se você pretende usar esses dados para segmentação ou filtragem.

Um caso de uso comum para campos de dados de entrada de texto é coletar os nomes de assinantes. Para adicionar um campo de primeiro nome, use "Primeiro nome" como o rótulo ou texto de placeholder e selecione Primeiro nome como as Propriedades do perfil.

The Text input menu that appears when you add a text input field into a sign-up form in the form editor.

Botões de rádio

Os botões de opção oferecem uma lista predefinida de opções, das quais os assinante podem selecionar apenas 1. Eles são úteis para coletar informações como gênero ou faixa etária.

The radio button menu in the form editor showing an example radio button collecting a beverage choice profile property.

O campo Propriedades do perfil deve conter o nome que você gostaria de usar para essa propriedade. Por exemplo, se o seu formulário perguntar aos visitantes se eles preferem café ou chá, use uma Propriedades do perfil personalizada como "Escolha de bebida".

Use a coluna Rótulos da seção Opções de propriedade para adicionar as opções que seus assinantes podem escolher. Em seguida, adicione os valores correspondentes na coluna Valores. Esses valores serão armazenados no perfil de qualquer pessoa que preencher o formulário, então considere usar uma versão abreviada da resposta que seja fácil de consultar.

Se os rótulos das opções forem "Tea drinker" e "Coffee drinker", os valores poderiam ser "tea" e "coffee", respectivamente.

Quando um assinante responde a uma pergunta de botão de opção, a resposta dele será armazenada como um tipo de dados de string data type.

Caixas de seleção múltiplas

As caixas de seleção múltiplas oferecem uma lista de opções, e os assinantes podem selecionar quantas opções quiserem. As caixas de seleção múltiplas são úteis para reunir informações de preferência, áreas de interesse, informações demográficas e qualquer pergunta em que um assinante deva poder selecionar mais de 1 opção.

The multi checkbox menu in the form editor showing an example multi checkbox collecting baking preference profile property.

Assim como um campo de botão de opção, seu campo de várias caixas de seleção exige uma Propriedades do perfil, um conjunto de rótulos e um conjunto de valores.

Quando um assinante responde a uma pergunta de múltiplas caixas de seleção, a resposta será armazenada como um tipo de dados de lista data type, independentemente de quantas opções ele selecionar.

Campo da data

Os campos de data são a melhor forma de os assinantes inserirem valores de data, que podem, por sua vez, ser usados para segmentação ou para acionar fluxos baseados em datas.

The Date menu that appears when you add a date input field to a sign-up form.

Por exemplo, talvez você queira coletar as datas de aniversário dos assinantes para poder enviar um código de cupom a eles por meio de um fluxo no aniversário deles. Nesse caso, você adicionaria o campo de data e definiria a Propriedades do perfil correspondente como birthday. Se você tiver interesse em coletar informações de data sobre um cliente, use um bloco de data para garantir que as datas sejam formatadas corretamente.

Você tem a opção de personalizar como as datas são inseridas no seu formulário (por exemplo, DD/MM/YYYY); no entanto, as datas ainda serão armazenadas no formato padrão MM/DD/YYYY em perfis pessoais. Se você selecionar uma opção no menu formato de data que não inclua um ano (por exemplo, MM DD), um ano padrão será incluído automaticamente no perfil de cada assinante. As datas enviadas por um campo de data são armazenadas usando o tipo de dados date.

Campo de menu suspenso

Os menus suspensos são parecidos com botões de opção, no sentido de que os assinantes podem selecionar 1 opção em uma lista predefinida. Essa opção também ajuda a economizar espaço no seu formulário. Considere usar um menu suspenso em vez de botões de opção quando você tiver mais de 4 opções. Assim como os botões de opção e as caixas de seleção múltiplas, seu campo de menu suspenso exige uma Propriedade do perfil, um conjunto de rótulos e um conjunto de valores.

The dropdown input field menu showing an example dropdown collecting a pet type profile property.

Restrição de idade

Blocos de restrição de idade podem permitir que marcas relacionadas a álcool usem SMS nos EUA, no Reino Unido e na Austrália. A restrição de idade deve estar ativada na sua conta antes que você possa adicionar blocos de restrição de idade aos seus formulário de registro e começar a usar SMS. Saiba mais sobre restrição de idade para álcool com a Klaviyo.

Excluir um elemento ou campo de dados

Para excluir qualquer elemento ou campo de dados do seu formulário de registro:

  1. Na prévia do formulário no editor, passe o mouse sobre o bloco que você quer excluir.
  2. Selecione o ícone de lixeira que aparece.
    A mouse hovering over a text block in an example form preview showing the trash can icon visible.
  3. Na modal Excluir bloco, selecione Excluir bloco. Observe que um bloco não pode ser recuperado depois que você o exclui.

Próximas etapas

Se você quiser configurar 1 formulário para ter uma visualização distinta para desktop e uma visualização para dispositivos móveis, acesse nosso guia sobre como usar blocos dinâmicos em formulários.

Depois de adicionar blocos e campos ao seu formulário de registro, saiba como estilizá-lo para combinar com a sua marca. Quando você estiver pronto para publicar um popup, flyout ou formulário de página inteira, basta clicar em Publicar para ativá-lo no seu site. Se você criar um formulário incorporado, adicione o código de incorporação do formulário ao seu site para publicar.

x
Esse artigo foi útil?
Usuários que acharam isso útil: 76 de 162