Como usar blocos dinâmicos em formulários

O que você vai aprender

Saiba mais sobre blocos dinâmicos e como usá-los no formulário de registro para criar visualizações e experiências distintas para os compradores em desktops e dispositivos móveis. Qualquer bloco em seu formulário pode se tornar dinâmico ajustando suas configurações de visibilidade.

Os blocos dinâmicos permitem que o senhor controle quais blocos aparecem com base no dispositivo. O senhor pode configurar o bloco para aparecer de forma diferente no formulário com base no dispositivo, ou para aparecer em um dispositivo, mas não no outro.

Casos de uso de blocos dinâmicos:

• Personalize a exibição de formulários para diferentes tipos de dispositivos (por exemplo, celular e desktop) para que os compradores vejam um design adaptado à tela deles.
• Crie um único formulário com diferentes métodos de opt-in SMS mostrados para cada tipo de dispositivo para otimizar a conversão (ou seja, mostre uma opção de toque para texto em dispositivos móveis e um campo de dados de número de telefone em dispositivos de desktop).

Antes de começar

Abra o formulário no editor e navegue até a seção Targeting and Behaviors (Direcionamento e comportamentos ). Certifique-se de que seu formulário esteja configurado para ser exibido tanto no desktop quanto no celular para que todos os compradores possam vê-lo.

Essa configuração permitirá que o senhor configure telas separadas para desktop e celular.

Use blocos dinâmicos para criar visualizações distintas para desktop e dispositivos móveis

Qualquer bloco ou campo de dados em um formulário, seja ele existente ou recém-adicionado na guia Add bloco, pode ser dinamizado. Para ajustar quais dispositivos exibem um determinado bloco, siga estas etapas:

1. Clique no bloco no painel de visualização do formulário (por exemplo, um bloco de texto).
2. No menu de configurações do bloco, à esquerda, role para baixo até Visibility (Visibilidade).
3. Escolha se o bloco será exibido no desktop, no celular ou em todos os dispositivos.
4. Repita esse processo para qualquer bloco que o senhor queira que seja dinâmico.

Para visualizar a aparência do formulário em cada dispositivo, use o seletor de visualização no canto superior direito do editor de formulários. O senhor pode alternar entre o ícone do desktop e o ícone do dispositivo móvel para ver cada visualização.

• A visualização em desktop mostra como o formulário aparecerá para os compradores que navegam no site em um desktop. Somente os blocos configurados para Desktop e Todosos dispositivos estarão visíveis nessa exibição.
• A visualização móvel mostra o que os compradores verão ao navegar em um dispositivo móvel. Ele exibe o bloco configurado para dispositivos móveis e todos os dispositivos.

Exemplo

Digamos que o senhor queira que o texto do título do seu formulário apareça de forma diferente no desktop e no dispositivo móvel. Para configurar isso:

1. No seletor de visualização no canto superior direito, selecione o ícone da área de trabalho. 
2. Selecione o texto que deseja editar na visualização do formulário e faça as alterações.
3. No menu de configurações do bloco de texto, vá até Visibility (Visibilidade ) e defina o bloco de texto para ser exibido somente no Desktop .
   
   

   Ao definir um bloco para ser exibido somente no desktop, o usuário opta por ocultar o bloco dos usuários de dispositivos móveis, de modo que ele não ficará visível na visualização móvel.

4. Para ajustar a visualização móvel, mude para a visualização móvel selecionando o ícone móvel no seletor de visualização.
5. Vá para a guia Add bloco e arraste e solte um novo elemento de texto na visualização móvel.
6. Personalize o texto padrão do título para compradores móveis. Esse texto deve ser diferente do que o senhor usou na versão para desktop.
7. No menu de configurações do bloco de texto, role para baixo até Visibility (Visibilidade ) e defina esse bloco de texto para ser exibido no Mobile.
   
   
8. Opcional: Repita esse processo para outros elementos ou campos de dados que o senhor deseja exibir de forma diferente com base no tipo de dispositivo (por exemplo, mostrar uma imagem para compradores de desktop, mas ocultá-la no celular).
   • Se quiser tornar dinâmicas as imagens do formulário, o senhor pode fazê-lo:
     • Adicione uma imagem lateral às visualizações para celular e desktop, ou apenas a uma das duas.
     • Use uma imagem lateral na visualização para desktop e coloque uma imagem acima do texto do título no celular, ou vice-versa. 

Use blocos dinâmicos para otimizar a coleta de consentimento por SMS

Se o senhor tiver um formulário de registro que coleta consentimento para SMS, poderá usar o bloco dinâmico para otimizar o método de opt-in SMS para cada dispositivo (por exemplo, mostrar aos compradores de celular um botão de toque para texto, enquanto os compradores de desktop veem um campo de dados com o número de telefone). 

Para configurar isso:

1. Abra o formulário existente no editor e navegue até a etapa SMS Opt-in na barra de menus. 
   • Se o formulário ainda não tiver essa etapa, clique em +Step > SMS Opt-in e selecione uma lista para adicioná-la.
     
2. No seletor de visualização no canto superior direito, selecione o ícone da área de trabalho para personalizar a visualização do formulário na área de trabalho. 
3. Selecione o campo de dados do número de telefone na visualização e, em Visibility (Visibilidade), defina-o como show on Desktop (Mostrar na área de trabalho). Faça o mesmo com o idioma de divulgação do SMS e com o botão Enviar.
   
   

   Observe que quando o senhor define um bloco para ser exibido especificamente em dispositivos desktop, ele não será ocultado na visualização móvel. 

4. Mude para a visualização móvel do formulário selecionando o ícone de celular no canto superior direito.
5. Selecione a guia Add bloco e arraste e solte um novo bloco de botão na visualização móvel. 
6. Altere a ação do botão para Subscribe via SMS.
   
   
7. Personalize a palavra-chave e a mensagem de assinatura para sua chamada à ação "toque no texto".
8. Em Sending Region (Região de envio), escolha o número de telefone apropriado para a região que o senhor deseja atingir com o formulário. 
9. Alterne entre as visualizações de desktop e móvel para garantir que o bloco apareça como o senhor pretendia em cada dispositivo. 

Agora, seu bloco dinâmico está configurado para coletar consentimento para SMS no método mais otimizado para desktop e celular. 

Próximas etapas

Antes de publicar o formulário de inscrição, navegue até a guia Styles (Estilos ) para alterar o layout, as fontes e as cores para que correspondam à sua marca. Além disso, não se esqueça de adicionar e personalizar o idioma de divulgação do SMS.

Recursos adicionais

Referência de métodos de opt-in de SMS

Compreensão dos blocos e campos do formulário

Compreensão de estilos para um formulário de inscrição

Curso: Certificado do produto Klaviyo