DocumentaçãoAEMGuia dos Componentes principais

Container de formulário form-container-adaptive-forms-core-component

Last update: Fri Nov 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Desenvolvedor
  • Administrador
  • Usuário

Este artigo discute o recursoRascunhos , que é um recurso de pré-lançamento. O recurso de pré-lançamento pode ser acessado somente por meio do canal de pré-lançamento.

O Forms permite que os visitantes do site interajam com o site fornecendo informações valiosas, que podem aumentar o engajamento e a satisfação do usuário. No Adobe Experience Manager Sites (AEM Sites), um container de formulário adaptável permite que os proprietários de sites adicionem formulários facilmente a suas páginas. Isso ajuda a facilitar a comunicação entre os visitantes do site e o proprietário ou a organização, oferecendo uma maneira simplificada para que os visitantes forneçam feedback, façam consultas e realizem outras ações

Uso reasons-to-use-forms-container

Há vários motivos pelos quais um formulário pode ser adicionado a um site:

  • Coleção de dados: o Forms pode ser usado para coletar dados de visitantes do site para vários propósitos, como pesquisa de mercado, análise de comportamento dos usuários e muito mais.

  • Geração de clientes potenciais: um formulário pode ser usado para coletar informações de clientes potenciais, como nome e endereço de email, a fim de gerar leads para as iniciativas de vendas e marketing.

  • Comércio eletrônico: o Forms pode ser usado para compras online, permitindo que os clientes façam pedidos e pagamentos por meio do site.

  • Contato: um formulário de contato permite que os visitantes do site entrem em contato com o proprietário ou a organização de maneira fácil.

  • Pesquisas e votações: o Forms pode ser usado para coletar comentários e opiniões de visitantes do site por meio de pesquisas e votações.

  • Registro em evento: o Forms pode ser usado para o registro em eventos, permitindo que os visitantes do site se inscrevam em eventos ou webinários.

  • Assinaturas: o Forms pode ser usado para assinaturas de sites, permitindo que os visitantes se inscrevam em boletins informativos ou outras comunicações regulares.

  • Autenticação de usuários: o Forms pode ser usado para a autenticação de usuários, permitindo que os visitantes do site criem contas e façam logon para acessar conteúdo ou recursos exclusivos.

  • Aumentar a taxa de conversão: um formulário bem projetado pode aumentar a taxa de conversão, tornando fácil para os usuários concluírem uma ação desejada, como comprar um produto ou se inscrever em um serviço.

Versão e compatibilidade version-and-compatibility

O componente principal Acordeão de formulário adaptável foi lançado em fevereiro de 2023 como parte dos Componentes principais 2.0.4 para Cloud Service e dos Componentes principais 1.1.12 para AEM 6.5.16.0 Forms ou posterior. Esta é uma tabela que mostra todas as versões compatíveis, a compatibilidade do AEM e os links para a documentação correspondente:

Versão do componente
AEM as a Cloud Service
AEM 6.5.16.0 Forms ou posterior
v1
Compatível com a
versão 2.0.4 e posteriores
Compatível com a
versão 1.1.12 e versões posteriores, mas que sejam inferiores à 2.0.0.

Para obter informações sobre as versões dos Componentes principais, consulte o documento Versões dos Componentes principais.

Detalhes técnicos technical-details

Obtenha as informações mais recentes sobre o componente principal de container de formulários adaptáveis na documentação técnica no GitHub. Para obter mais informações sobre o desenvolvimento dos componentes principais, consulte a documentação do desenvolvedor dos Componentes principais.

Caixa de diálogo de configuração configure-dialog

Você pode personalizar facilmente a experiência do container de formulário para visitantes com a caixa de diálogo de configuração. Você também pode definir opções de container de formulário com facilidade para uma experiência de usuário perfeita.

Guia Básico basic-tab

Guia Básico

  • Título: o título permite identificar facilmente um componente em um formulário; por padrão, ele aparece na parte superior do componente. Se um título não for adicionado, o nome do componente será exibido em vez do texto do título.

  • Serviços de preenchimento prévio: essa opção permite que o usuário selecione um serviço de preenchimento prévio para recuperar dados quando o formulário adaptável for renderizado. Saiba mais sobre como criar e configurar um serviço de preenchimento prévio.

  • Função: a função é um atributo de HTML usado para especificar a finalidade de um elemento de HTML para tecnologias assistivas, como leitores de tela. O atributo de função é usado para fornecer contexto e significado semântico adicionais a um elemento, facilitando a interpretação e o anúncio do conteúdo pelos leitores de tela. Por exemplo, no AEM Forms, o rótulo de um campo de formulário pode ter a função de “rótulo” e seu campo de entrada pode ter a função de “caixa de texto”. Isso ajuda o leitor de tela a entender a relação entre o rótulo e o campo de entrada e anunciá-los corretamente ao usuário.

  • Categoria de biblioteca do cliente: o usuário pode configurar uma biblioteca JavaScript personalizada por formulário adaptável. É recomendável manter somente as funções reutilizáveis na biblioteca, que dependem das bibliotecas de terceiros de jquery e underscore.js.
    Às vezes, se houver regras de validação complexas, o script de validação exato residirá em funções personalizadas, e os usuários chamam essas funções personalizadas a partir da expressão de validação do campo. Para tornar esta biblioteca de funções personalizadas conhecida e disponível durante a execução de validações no lado do servidor, o usuário do formulário pode configurar o nome da biblioteca do cliente AEM na guia Básico das propriedades do Contêiner de formulário adaptável.
    Usuários podem configurar a biblioteca customJavaScript para cada formulário adaptável. Na biblioteca, mantenha somente as funções reutilizáveis, que dependem de bibliotecas de terceiros de jquery e underscore.js.

Guia Modelo de dados data-model-tab

Guia Enviar

Você pode usar o modelo de dados do formulário e conectar um formulário a uma fonte de dados para enviar e receber dados com base nas ações do usuário. Também é possível conectar um formulário a um esquema JSON para receber os dados enviados em um formato predefinido. De acordo com os requisitos, conecte o formulário a um esquema JSON ou modelo de dados do formulário:

  • Crie um esquema JSON e faça upload para o seu ambiente
  • Criar um modelo de dados do formulário

Rascunhos

Guia Enviar

  • Salvar rascunhos automaticamente: marque a caixa de seleção Salvar rascunhos automaticamente para habilitar o salvamento de formulários como rascunhos.
  • Salvar Preferência: Configurar Salvar Preferência como Salvar rascunhos em intervalos regulares, para salvar automaticamente o formulário após um intervalo de tempo específico.
    Frequência do intervalo de salvamento (Segundos): especifique o intervalo de tempo (em segundos) para definir a duração que aciona o salvamento automático do formulário no intervalo definido.

Guia Enviar submission-tab

Os usuários podem configurar ações diferentes para o envio de um formulário adaptável.

  • URL/caminho de redirecionamento: essa opção permite que o usuário configure uma página em cada formulário, para a qual os usuários do formulário são redirecionados após enviar o formulário adaptável. Clique aqui para obter mais informações sobre como configurar páginas de redirecionamento.

Guia Enviar

  • Mostrar mensagem: essa opção permite que os usuários adicionem uma mensagem que é exibida quando o formulário adaptável é enviado com sucesso. O texto predefinido é incluído na caixa de diálogo e pode ser modificado pelo usuário. A caixa de diálogo Mostrar mensagem é compatível com as ferramentas de formatação de rich text que permitem que os usuários formatem o texto adicionado.

Guia Mostrar mensagem

  • Ação de envio: uma ação de envio é acionada quando um usuário clica no botão Enviar em um formulário adaptável. Na lista suspensa, os usuários podem selecionar ações de envio que são compatíveis de fábrica. Saiba como configurar uma ação de envio na guia Enviar.

Caixa de diálogo Design design-dialog

A caixa de diálogo de design é usada para definir e gerenciar estilos CSS do componente de Container do formulário.

Guia Componentes permitidos allowed-components-tab

Guia Componentes permitidos da caixa de diálogo de design

A guia Componentes permitidos permite que o editor de modelo defina os componentes que podem ser adicionados como itens aos painéis do componente no editor de formulários adaptáveis.

Guia Componentes padrão default-components-tab

Guia Componentes padrão da caixa de diálogo de design

A guia Componentes padrão permite que o editor de modelos especifique os componentes que estarão visíveis por padrão como itens no componente de container do formulário no editor de formulários adaptáveis.

Guia Configurações responsivas responsive-tab

Guia Configurações responsivas da caixa de diálogo de design

A guia Configurações responsivas permite que o editor de modelos especifique o número de colunas na grade do componente de container do formulário no editor de formulários adaptáveis.

Guia Estilos styles-tab

O componente principal de anexo de arquivo de formulários adaptáveis é compatível com o sistema de estilos do AEM.

Caixa de diálogo de design

  • Classes padrão do CSS: você pode fornecer uma classe padrão do CSS ao componente principal container para formulários adaptáveis.

  • Estilos permitidos: você pode definir estilos fornecendo um nome e a classe CSS que o representa. Por exemplo, você pode criar um estilo chamado “texto em negrito” e fornecer a classe CSS “font-weight: bold”. Você pode usar ou aplicar esses estilos a um formulário adaptável no editor de formulários adaptáveis. Para aplicar um estilo, no editor de formulários adaptáveis, selecione o componente ao qual deseja aplicar o estilo, navegue até a caixa de diálogo de propriedades e selecione o estilo desejado na lista suspensa Estilos. Se precisar atualizar ou modificar os estilos, simplesmente retorne à caixa de diálogo Design, atualize os estilos na guia estilos e salve as alterações.

Guia Propriedades personalizadas

Caixa de diálogo Propriedades personalizadas

As propriedades personalizadas permitem associar atributos personalizados (pares de chave e valor) a um componente principal de formulário adaptável usando o modelo de formulário. As propriedades personalizadas são refletidas na seção de propriedades da representação headless do componente. Isso permite criar um comportamento de formulário dinâmico que se adapta de acordo com os valores de atributos personalizados. Por exemplo, desenvolvedores(as) podem criar várias representações de um componente de formulário headless para plataformas móveis, de desktop ou da web, melhorando significativamente a experiência de usuário em uma grande variedade de dispositivos.

  • Nome do grupo: você pode fornecer um nome para identificar o grupo de propriedades personalizadas. É possível adicionar, excluir ou reorganizar vários grupos de propriedades personalizadas. Após adicionar o grupo de propriedades personalizadas, você verá as seguintes opções:

    • Pares de chave e valor: é possível adicionar vários nomes e valores de propriedades personalizadas clicando em Adicionar em cada grupo de propriedades personalizadas.

    • Excluir: toque ou clique para excluir o nome e o valor da propriedade personalizada.

    • Reorganizar: toque ou clique e arraste para alterar a ordem do nome e do valor da propriedade personalizada.

Consulte também see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c