Criar ou adicionar um formulário adaptável à página do AEM Sites

O Adobe recomenda o uso da captura de dados moderna e extensível Componentes principais para criação de um novo Forms adaptável ou adição de Forms adaptável às páginas do AEM Sites. Esses componentes representam um avanço significativo na criação do Forms adaptável, garantindo experiências de usuário impressionantes. Este artigo descreve a abordagem mais antiga para criar o Forms adaptável usando componentes de base.

Com o AEM Forms, você pode incorporar facilmente formulários adaptáveis em suas páginas da Web. Isso permite que seus visitantes preencham e enviem formulários de maneira conveniente sem nunca sair da página em que estão. Ao fazer isso, eles podem se envolver facilmente com outros elementos do site enquanto interagem ativamente com o formulário.

Você pode usar o Editor de páginas AEM para criar e adicionar rapidamente vários formulários às suas páginas do AEM Sites. Usar o Editor de páginas AEM permite que os autores de conteúdo criem experiências de captura de dados perfeitas em uma página do Sites, usando o potencial dos componentes de formulários adaptáveis, incluindo comportamento dinâmico, validações, integração de dados e geração de documentos de registro e automação de processos comerciais. Ele também permite usar vários recursos de páginas do AEM Sites, como controle de versão, direcionamento, tradução e gerenciador de vários sites.

O AEM Forms fornece o Contêiner de formulário adaptável e os componentes Forms - Incorporar. Você pode usar o Contêiner de formulário adaptável para criar um formulário em um Fragmento de experiência ou na página do AEM Sites, enquanto o componente Adaptive Forms - Incorporar permite adicionar um formulário adaptável existente ou criar um formulário usando o Editor Adaptive Forms.

Benefícios do uso do componente de Contêiner de formulário adaptável no Editor de páginas AEM ou no Fragmento de experiência

O uso do Contêiner de formulário adaptável no Editor de páginas AEM permite que você crie experiências de captura de dados perfeitas em uma página do Sites, usando o potencial dos componentes do Forms adaptáveis, incluindo comportamento dinâmico, validações, integração de dados, geração de documentos de registro e automação do processo comercial. Ele também permite usar vários recursos de páginas do AEM Sites, como controle de versão, direcionamento, tradução e gerenciador de vários sites, aprimorando a experiência geral de criação e gerenciamento de formulários. Vamos explorar alguns destes recursos:

• Controle de versão: Oferta de páginas do AEM Sites recursos robustos de controle de versão, permitindo rastrear e gerenciar diferentes versões dos formulários. Isso permite fazer alterações e aprimoramentos nos formulários, mantendo a capacidade de reverter para versões anteriores, se necessário. O controle de versão garante uma abordagem controlada e organizada para o desenvolvimento e evolução da forma.
• Direcionamento (integração com o Adobe Target): Com os recursos de direcionamento de páginas do AEM Sites, você também pode personalizar a experiência do formulário para públicos diferentes. Usando segmentos de usuários e critérios de direcionamento, você pode adaptar o conteúdo, o design ou o comportamento do formulário a grupos específicos de usuários. Isso permite fornecer uma experiência de formulário personalizada e relevante, aumentando as taxas de engajamento e conversão.
• Tradução: AEM Sites integração perfeita com serviços de tradução, permitindo que você traduza formulários em vários idiomas facilmente. Esse recurso simplifica o processo de localização, garantindo que seus formulários estejam acessíveis para um público-alvo global. Você pode gerenciar traduções com eficiência em projetos de tradução AEM, reduzindo o tempo e o esforço necessários para o suporte a formulários multilíngues. Consulte a seção considerações para obter mais informações sobre tradução.
• Gerenciamento de vários sites e Live Copy: O AEM Sites oferece Recursos de gerenciamento de vários sites e Live Copy, permitindo criar e gerenciar vários sites em um único ambiente. Esse recurso agora permite reutilizar formulários em sites diferentes, garantindo a consistência e reduzindo os esforços de duplicação. Com controle e gerenciamento centralizados, você pode manter e atualizar formulários de maneira eficiente em vários sites.
• Temas: As páginas do AEM Sites fornecem uma estrutura para projetar e manter estilos visuais consistentes em várias páginas da Web. Eles definem cores, fontes, folhas de estilos e outros elementos visuais que contribuem para a aparência geral do site. Você pode usar os temas criados para uma página do AEM Sites para um Formulário adaptável, economizando tempo e esforço.
• Marcação: As páginas do AEM Sites permitem atribuir tags ou rótulos a uma página, um ativo ou outro conteúdo. Tags são rótulos de palavras-chave ou metadados que fornecem uma maneira de categorizar e organizar o conteúdo com base em critérios específicos. É possível atribuir uma ou mais tags a páginas, ativos ou qualquer outro conteúdo no AEM para melhorar a pesquisa e a categorização dos ativos.
• Bloquear e desbloquear conteúdo: O AEM Sites permite que os usuários controlar o acesso e as modificações nas páginas no ambiente do AEM Sites. Quando uma página é bloqueada, significa que ela está protegida contra alterações ou edições não autorizadas por outros usuários. Somente o usuário que bloqueou o conteúdo ou um administrador designado pode desbloqueá-lo para permitir modificações.

Várias opções para adicionar um formulário adaptável no editor de páginas AEM

Você pode aproveitar ao máximo esse recurso utilizando as seguintes opções:

• Adicionar um formulário adaptável personalizado a uma página do AEM Sites: Crie um formulário totalmente novo do zero, adaptando-o especificamente às suas necessidades e preferências de design.

• Adicionar um formulário adaptável personalizado a um Fragmento de experiência: Estenda o alcance de seus formulários adicionando-os aos Fragmentos de experiência de AEM, permitindo uma reutilização contínua em várias páginas ou sites.

• Converter um formulário adaptável em fragmento de experiência: Converta um formulário adaptável adicionado a uma página do AEM Sites em um Fragmento de experiência para reutilizar o formulário em várias páginas do AEM Sites.

• Criar e adicionar formulários com base em modelos aprovados a uma página do AEM Sites: Aproveite os modelos pré-aprovados para criar rapidamente formulários que se alinhem às diretrizes de marca e aos padrões de design de sua organização. A opção está disponível somente para o Forms adaptável criado com o Editor Forms adaptável ou o componente Forms adaptável - Incorporar.

• Adicionar formulários existentes a uma página do AEM Sites: Integre facilmente formulários que você já criou em seus sites, permitindo que os visitantes interajam diretamente com eles. A opção está disponível somente para o Forms adaptável criado com o Editor Forms adaptável ou o componente Forms adaptável - Incorporar.

• Adicionar vários formulários a uma página do AEM Sites ou Fragmento de experiência: Adicione vários formulários a uma página para fornecer várias opções aos usuários com base em suas preferências e requisitos. Eles podem combinar formulários totalmente novos do zero com formulários existentes.

Considerações

• Quando você usa o Contêiner de formulário adaptável para criar ou adicionar um formulário, os formulários são submetidos a tradução e localização por meio do fluxo de tradução do AEM Sites. Para cada idioma, uma cópia separada (cópia de idioma) da página de sites e os formulários correspondentes são gerados e, quando um autor de conteúdo modifica uma regra em um formulário na página principal, as mesmas alterações devem ser feitas em todas as cópias de idioma do formulário. O Contêiner de formulário adaptável também permite usar vários recursos das páginas do AEM Sites, como controle de versão, direcionamento, tradução e gerenciador de vários sites.

• Ao criar ou adicionar um formulário usando o componente de incorporação do formulário adaptável, os formulários são submetidos a tradução e localização usando o fluxo de tradução do AEM Forms. Nesse caso, um único formulário é mantido e referenciado em todas as cópias de idioma das páginas do Sites. O componente de Formulário incorporado adaptável não fornece acesso a vários recursos de páginas do AEM Sites, como o, controle de versão, direcionamento, tradução e gerenciador de vários sites.

Antes de você iniciar

Criação de um Formulário adaptável

Você pode criar um formulário totalmente novo do zero, ajustando-o especificamente às suas necessidades e preferências de design, diretamente em uma página do AEM Sites ou no Fragmento de experiência. Para formulários de uso único, recomenda-se a criação direta em uma página do AEM Sites, enquanto os Fragmentos de experiência são ideais para formulários que precisam ser reutilizados em várias páginas do site.

• Criar um formulário em uma página do AEM Sites
• Criar um formulário em um Fragmento de experiência
• Converter um formulário adaptável na página AEM Sites em um fragmento de experiência

Criar um formulário em uma página do AEM Sites

Você pode usar o componente de Contêiner de formulário adaptável no Editor de páginas AEM para criar um formulário personalizado. O componente permite criar um formulário arrastando e soltando os componentes do formulário. Os componentes de formulário são baseados nos Componentes principais. Você pode personalizá-los facilmente de acordo com os requisitos de sua organização.

Para criar um Formulário adaptável em uma página do Sites:

1. Abra a página do AEM Sites no modo de edição.
2. Arraste e solte a variável Contêiner adaptável do Forms componente do Navegador de componentes para a página Sites. Ele cria um espaço na página para o formulário. Você pode usar o modo de layout para alterar o Tamanho do espaço do container.
3. Arraste e solte os Componentes principais do formulário adaptável no espaço do contêiner para criar o formulário.
4. Adicione o botão Submit.

Em seguida, você definir a ação enviar e propriedades avançadas.

Criar um formulário em um Fragmento de experiência

Você pode estender o alcance de seus formulários adicionando-os aos Fragmentos de experiência de AEM, permitindo uma reutilização contínua em várias páginas ou sites. Por exemplo, você pode incluir um formulário de inscrição de informativo em um Fragmento de experiência. Isso permite reutilizar convenientemente o fragmento em várias páginas do site, eliminando a necessidade de recriar o formulário repetidamente. Quaisquer atualizações ou modificações feitas no formulário de inscrição do boletim informativo no Fragmento de experiência são propagadas automaticamente para todas as páginas em que são utilizadas. Isso simplifica o processo e garante uma experiência perfeita para o usuário, simplificando o gerenciamento dos formulários de seu site.

Para criar um formulário adaptável em um fragmento de experiência:

1. Abra um Fragmento de experiência.
2. Arraste e solte a variável Contêiner adaptável do Forms componente do Navegador de componentes para o Fragmento de experiência.
3. Arraste e solte os Componentes principais do formulário adaptável no espaço de contêiner no Fragmento de experiência para criar o formulário.
4. Adicione o botão Submit.

Em seguida, você definir a ação enviar e propriedades avançadas.

Converter um formulário adaptável na página AEM Sites em um fragmento de experiência

Você pode converter um formulário adaptável existente em um Editor de páginas de sites em um Fragmento de experiência para reutilizar o formulário em várias páginas ou sites.

Para converter um formulário adaptável na página AEM Sites em um fragmento de experiência:

1. Abra a página do AEM Sites que contém o formulário adaptável (no componente Contêiner adaptável do Forms) no modo de edição.

2. Abra a Árvore de conteúdo e selecione a Contêiner adaptável do Forms que hospeda o formulário adaptável. Uma página do AEM Sites pode hospedar vários Forms adaptáveis. Portanto, selecione cuidadosamente o Contêiner adaptável correto do Forms.

3. Na barra de menus, selecione a opção Ícone Converter para variação de Fragmento de experiência.
   

   Uma caixa de diálogo para converter o contêiner do Formulário adaptável em um novo Fragmento de experiência ou adicionar a um Fragmento de experiência existente é exibida

4. Na caixa de diálogo Converter em variação de Fragmento de experiência, defina valores para as seguintes opções:

   • Ação: Selecione para criar um fragmento de experiência ou Adicionar a um fragmento de experiência existente.
   • Caminho principal: Especifique o caminho da pasta na qual hospedar o fragmento de experiência. A opção está disponível somente para criar um fragmento de experiência.
   • Modelo: Especifique o caminho do modelo do Fragmento de experiência. Se você não tiver um modelo de Fragmento de experiência, criar. A opção está disponível somente para adicionar o Formulário adaptável a um Fragmento de experiência existente.
   • Título do fragmento: Especifique o título do Fragmento de experiência. O título identifica exclusivamente um Fragmento de experiência

Configurar a ação enviar para o formulário

Uma ação enviar permite escolher o destino dos dados capturados por meio de um formulário adaptável. É acionado quando um usuário clica no botão Enviar em um Formulário adaptável. Os formulários adaptáveis incluem algumas ações de envio prontas para uso. Você também pode estender ações de envio padrão para criar sua própria ação de envio personalizada. Para configurar uma Ação de envio para o formulário:

1. Abra o Editor de páginas AEM ou o Fragmento de experiência que contém o Formulário adaptável.
2. Abra a Árvore de conteúdo e selecione a Contêiner adaptável do Forms que hospeda o formulário adaptável. Uma página do AEM Sites pode hospedar vários Forms adaptáveis. Portanto, selecione cuidadosamente o Contêiner adaptável correto do Forms.
3. Clique nas propriedades do Contêiner de formulário adaptável ícone. A caixa de diálogo Contêiner de formulário adaptável para configurar ações de envio é aberta.
   
4. Selecione e configure uma ação Enviar, com base em seus requisitos. Para obter informações detalhadas sobre Ações de Envio, consulte Ação de envio do formulário adaptável

Configurar um esquema ou modelo de dados de formulário para um formulário

Você pode usar o Modelo de dados de formulário para conectar um formulário a uma Fonte de dados para enviar e receber dados com base nas ações do usuário. Você também pode conectar um formulário a um esquema JSON para receber os dados enviados em um formato predefinido.

Antes de conectar um formulário a um esquema ou modelo de dados de formulário

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

Para configurar um Esquema JSON ou um Modelo de dados de formulário para seu formulário:

1. Abra o Editor de páginas AEM ou o Fragmento de experiência que contém o Formulário adaptável.

2. Abra a Árvore de conteúdo e selecione a Contêiner adaptável do Forms que hospeda o formulário adaptável. Uma página do AEM Sites pode hospedar vários Forms adaptáveis. Portanto, selecione cuidadosamente o Contêiner adaptável correto do Forms.

3. Clique nas propriedades do Contêiner de formulário adaptável ícone. A caixa de diálogo Contêiner de formulário adaptável para configurar os Modelos de dados é aberta.
   

4. Selecione e configure um Esquema JSON ou Modelo de dados de formulário, com base em seus requisitos. Para obter informações detalhadas sobre Ações de Envio, consulte Ação de envio do formulário adaptável.

   • Ao selecionar a variável Modelo de formulário , use o Selecionar modelo de dados do formulário opção para selecionar um modelo de dados de formulário pré-configurado.
   • Ao selecionar a variável Esquema , use o Esquema opção para selecionar um esquema JSON para o formulário.

5. Clique em Concluído.

Configurar um serviço de pré-preenchimento para um formulário

Você pode usar o serviço de preenchimento prévio para preencher automaticamente os campos de um Formulário adaptável usando dados existentes. Quando um usuário abre um formulário, os valores desses campos são preenchidos previamente. É possível:

• Criar um serviço de preenchimento prévio personalizado
• Usar o serviço de preenchimento do modelo de dados de formulário

Usar o serviço de preenchimento do modelo de dados de formulário

Você pode usar o serviço de Preenchimento do modelo de dados de formulário para preencher previamente os campos de um formulário usando um Modelo de dados de formulário configurado. O serviço de Preenchimento do modelo de dados de formulário usa o Obter serviço do modelo de dados de formulário configurado para recuperar dados. Para usar o serviço de Preenchimento de modelo de dados de formulário para um Formulário adaptável:

1. Abra o Editor de páginas AEM ou o Fragmento de experiência que contém o Formulário adaptável.
2. Abra a Árvore de conteúdo e selecione a Contêiner adaptável do Forms que hospeda o formulário adaptável. Uma página do AEM Sites pode hospedar vários Forms adaptáveis. Portanto, selecione cuidadosamente o Contêiner adaptável correto do Forms.
3. Clique nas propriedades do Contêiner de formulário adaptável ícone. A caixa de diálogo Contêiner de formulário adaptável para configurar os Modelos de dados é aberta.
   
4. Selecionar um modelo de dados do formulário. Abra o Básico guia. No serviço de preenchimento, selecione Serviço de Preenchimento de Rascunho do Portal do Forms.
5. Clique em Concluído.

Redirecionar o usuário para um novo usuário no envio do formulário ou mostrar uma mensagem de agradecimento

No envio de um formulário, você pode redirecionar o usuário para outra página da Web ou uma mensagem. Para redirecionar o usuário ou configurar a mensagem de agradecimento:

1. Abra o Editor de páginas AEM ou o Fragmento de experiência que contém o Formulário adaptável.

2. Abra a Árvore de conteúdo e selecione a Contêiner adaptável do Forms que hospeda o formulário adaptável. Uma página do AEM Sites pode hospedar vários Forms adaptáveis. Portanto, selecione cuidadosamente o Contêiner adaptável correto do Forms.

3. Clique nas propriedades do Contêiner de formulário adaptável ícone. A caixa de diálogo Contêiner de formulário adaptável para configurar os Modelos de dados é aberta.

4. Abra o Envio guia.

   • Para configurar um URL de redirecionamento, para na opção Enviar, selecione a opção Redirecionar para URL e forneça um endereço absoluto, um URL de redirecionamento ou um caminho relativo de uma página do AEM Sites.

   • Para configurar uma mensagem personalizada ou de agradecimento, para na opção Enviar, selecione a opção Mostrar mensagem e forneça uma mensagem na caixa Conteúdo da mensagem. É uma caixa de rich text, você pode usar a opção de tela cheia para exibir todos os itens de rich text disponíveis.

Consulte também:

• Criar um formulário adaptável independente baseado nos Componentes principais
• Criar estilo ou temas para seus formulários