Como usar blocos dinâmicos em formulários

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.

Sobre blocos dinâmicos

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 seu site em uma área de trabalho. Somente os blocos configurados para Desktop e Todos os dispositivos estarão visíveis nessa visualização.
• A visualização em celular visualiza o que os compradores verão ao navegar em um celular. Ele exibe blocos configurados para celulares 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, role até Visibilidade e defina o bloco de texto como exibido somente no desktop .

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 até Visibilidade e defina esse bloco de texto como exibido no celular.

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 input do número de telefone na visualização e, em Visibilidade, defina-o para ser exibido em Desktop. Faça o mesmo com o idioma de divulgação para SMS e com o botão de envio.

1. Mude para a visualização móvel do formulário selecionando o ícone de celular no canto superior direito.
2. Selecione a guia Add bloco e arraste e solte um novo bloco de botão na visualização móvel.
3. Altere a Ação do botão para Inscrever-se via SMS.

4. Personalize a palavra-chave e a mensagem de assinatura para sua chamada à ação "toque no texto".
5. 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.
6. 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