Modo responsivo na criação do WYSIWYG

Este recurso está disponível através do programa de acesso antecipado. Para solicitar acesso, envie um email com o nome da sua organização GitHub e o nome do repositório do seu endereço oficial para aem-forms-ea@adobe.com. Por exemplo, se a URL do repositório for https://github.com/adobe/abc, o nome da organização é adobe e o nome do repositório é abc.

Introdução ao Responsive Forms

No mundo de vários dispositivos de hoje, seus formulários precisam ter ótima aparência e funcionar bem em telas de todos os tamanhos: de monitores de desktop a smartphones. O modo responsivo no Editor universal ajuda você a fazer isso permitindo visualizar e testar seus formulários em diferentes tamanhos de dispositivo durante o processo de criação.

O Editor Universal permite que você crie formulários que se adaptam automaticamente a diferentes tamanhos de tela, fornecendo uma experiência do usuário ideal independentemente do dispositivo que está sendo usado.

Visualizar o Forms no modo responsivo para diferentes dispositivos

O Editor Universal fornece um ícone de Emulador localizado no canto superior direito da tela, que permite que você visualize páginas em diferentes tamanhos de dispositivo e teste o comportamento do seu design responsivo para obter uma melhor experiência do usuário.

Para visualizar um formulário no modo responsivo:

Você também pode usar o ícone Rotador de Tela para alternar entre as orientações retrato e paisagem ao visualizar em tablet ou dispositivos móveis.

O Editor universal fornece diferentes emuladores para visualizar formulários em vários dispositivos. A tabela abaixo lista os tipos de emulador disponíveis junto com suas representações de dispositivo correspondentes:

Recursos de layout

O Universal Editor permite criar formulários fáceis de usar que oferecem experiências dinâmicas para os usuários finais. O layout de formulário controla como os itens ou componentes são exibidos em um formulário.

O Universal Editor é compatível com os seguintes tipos de layouts para formulários:

Layout do painel

O layout do painel é útil para organizar campos relacionados de uma maneira que facilite a navegação e a localização do conteúdo correspondente. O layout do painel organiza os componentes do formulário em seções distintas ou painéis em formulários.

Exemplo: Um formulário de aplicativo de trabalho pode usar painéis para separar "Informações Pessoais", "Educação", "Experiência Profissional" e "Referências" em seções distintas.

Comportamento responsivo: Em telas menores, os painéis normalmente são empilhados verticalmente, mantendo seus agrupamentos distintos enquanto ajustam para uma largura mais estreita.

Você pode usar o componente do painel para adicionar o layout do painel em um formulário. Para obter instruções detalhadas sobre como configurar várias propriedades do componente do painel, consulte o artigo componente do painel.

Layout do assistente

O layout do assistente ajuda a simplificar um formulário complexo, dividindo-o em etapas distintas. Cada etapa representa uma parte diferente do processo, e os usuários navegam pelas etapas sequencialmente, geralmente com os botões Avançar e Voltar. Você pode usar o layout do assistente para criar um formulário que envolve várias seções ou etapas.

Exemplo: Um formulário de reclamação de seguro pode usar um assistente para orientar os usuários sobre como fornecer detalhes do incidente, carregar evidências, inserir informações pessoais e revisar o envio.

Comportamento responsivo: Em dispositivos móveis, o assistente mantém sua abordagem passo a passo, mas ajusta o conteúdo em cada etapa para caber na tela mais estreita, geralmente empilhando elementos que apareceriam lado a lado em telas maiores.

Você pode usar o componente de assistente para adicionar o layout de assistente em um formulário. Para obter instruções detalhadas sobre como configurar as várias propriedades do componente do assistente, consulte o artigo componente do assistente.

Layout do acordeão

O layout do Accordion exibe o conteúdo em seções ou painéis que podem ser recolhidos em um Formulário adaptável. Quando uma seção é expandida, ela exibe o conteúdo em, enquanto outras seções permanecem recolhidas. Esse layout é ideal para exibir grandes quantidades de informações em um formato compacto.

Exemplo: um formulário de configuração de produto pode usar seções do Accordion para "Opções Básicas", "Recursos Avançados", "Acessórios" e "Planos de Pagamento", permitindo que os usuários se concentrem em um aspecto de cada vez.

Comportamento responsivo: Os acordeões funcionam particularmente bem em dispositivos móveis, pois conservam naturalmente o espaço vertical ao mostrar somente a seção de conteúdo expandida, tornando-os ideais para telas menores.

Você pode usar o componente Acordeão para adicionar o layout acordeão em um formulário. Para obter instruções detalhadas sobre como configurar as várias propriedades do componente Acordeão, consulte o artigo componente Acordeão.

Como escolher o layout correto?

É importante selecionar o layout correto para otimizar a experiência do usuário e a funcionalidade do formulário. A tabela ajuda você a entender as diferentes opções de layout disponíveis e orienta você a selecionar o layout mais adequado com base nas suas necessidades e casos de uso específicos:

Práticas recomendadas para Forms responsivo

Para garantir que seus formulários forneçam a melhor experiência em todos os dispositivos, siga estas práticas recomendadas:

Solução de problemas do Responsive Forms

Consulte também: