DocumentaçãoAEM 6.5Guia do usuário

Criar ou adicionar um formulário adaptável à página do AEM Sites create-or-add-an-adaptive-form-to-aem-sites-page

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined

O Adobe recomenda o uso de Componentes principaisde captura de dados moderna e extensível para criar um novo Forms Adaptávelou adicionar o 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.

Versão
Link do artigo
AEM 6.5
Este artigo
AEM as a Cloud Service
Clique aqui

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.

Formulário adaptável na página de sites

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: as páginas do AEM Sites oferecem recursos robustos de controle de versão, que permitem rastrear e gerenciar diferentes versões dos seus 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: o AEM Sites integração perfeita com os 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 fornece recursos robustos de Gerenciamento de vários sites e Live Copy, permitindo que você crie e gerencie 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 criar 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 marcas 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 controlem 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:

  • Adicione 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 a Fragmentos de experiência do 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: Converter 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.

  • Crie e adicione formulários com base em modelos aprovados a uma página do AEM Sites: use os modelos pré-aprovados para criar rapidamente formulários que se alinhem às diretrizes de identidade visual e aos padrões de design da 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 aos 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 a um 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 consideration

  • 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 começar before-you-start

Ativar os Componentes principais adaptáveis do Forms para o seu ambiente
Verifique se os Componentes principais adaptáveis do Forms estão habilitados para o seu ambiente.
Adicionar bibliotecas de clientes Forms adaptáveis à sua página do AEM Sites e componentes da página Fragmento de experiência

Para ativar a funcionalidade completa do componente de Contêiner adaptável do Forms, adicione as bibliotecas de clientes Customheaderlibs e Customfooterlibs à sua página do AEM Sites usando o pipeline de implantação. Para adicionar as bibliotecas:

  1. Faça logon na instância de autor do AEM e abra o CRX DE. A URL padrão para uma instância de Autor em execução localmente é http://localhost:4502/crx/de.

  2. Abra o arquivo /apps/[your-sites-project]/components/page/customheaderlibs.html e adicione o seguinte código ao arquivo:

    code language-none 
        //Customheaderlibs.html
    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
    </sly>

  3. Abra o arquivo /apps/[your-sites-project]/components/page/customfooterlibs.html e adicione o seguinte código ao arquivo:

    code language-none 
        //customfooterlibs.html
    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
    </sly>

  4. Abra o arquivo /apps/[your-sites-project]/components/xfpage/customheaderlibs.html e adicione o seguinte código ao arquivo:

    code language-none 
        //Customheaderlibs.html
    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
    </sly>

  5. Abra o arquivo /apps/[your-sites-project]/components/customfooterlibs.html e adicione o seguinte código ao arquivo:

    code language-none 
        //customfooterlibs.html
    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
    </sly>

  6. Repita as etapas acima para todas as instâncias de Autor e Publish em seu ambiente.

Ativar contêiner adaptável do Forms

Para habilitar o componente Contêiner de Forms adaptável na política do modelo, execute as seguintes etapas:

  1. Abra a página do AEM Sites ou o Fragmento de experiência para edição. Para abrir a página para edição, selecione a página e clique em Editar.
  2. Abra o modelo da página Sites ou Fragmento de experiência. Para abrir o modelo, vá para as Informações da Página Informações da Página > Editar Modelo. Ele abre o modelo correspondente no editor de modelo.
  3. Na exibição Estrutura, clique no ícone Política Política na barra de menus. Na lista Componentes Permitidos e marque a caixa de seleção Contêiner de Forms Adaptável em [Nome do Projeto do Arquétipo AEM] - Formulário Adaptável.
  4. Clique em Concluído.
embed

https://video.tv.adobe.com/v/3419370?quality=12&learn=on

Criação de um Formulário adaptável create-an-adaptive-form-in-sites-editor-or-experience-fragment

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 create-an-adaptive-form-in-sites-editor

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.

https://video.tv.adobe.com/v/3419284?quality=12&learn=on

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 o componente Contêiner de Forms adaptável 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ê define a Ação de Envio e as propriedades avançadas.

Criar um formulário em um Fragmento de experiência create-an-adaptive-form-in-experience-fragment

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 o componente Contêiner de Forms adaptável 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ê define a Ação de Envio e as propriedades avançadas.

Converter um formulário adaptável na página AEM Sites em um fragmento de experiência convert-an-adaptive-form-in-sites-page-to-an-experience-fragment

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 o Contêiner de Forms adaptável que hospeda seu 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 o ícone Converter em variação de fragmento de experiência ícone Converter em variação de Fragmento de experiência.
    Converter formulário na página de sites em um 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 de Fragmento de Experiência. Se você não tiver um modelo de Fragmento de experiência, crie-o. 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 configure-submit-action-for-form

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 o Contêiner de Forms adaptável que hospeda seu 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 no ícone de propriedades do Contêiner de formulário adaptável propriedades do Contêiner de formulário adaptável . A caixa de diálogo Contêiner de formulário adaptável para configurar ações de envio é aberta.
    Contêiner de formulários adaptáveis
  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 configure-schema-or-data-model-for-form

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. 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

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 o Contêiner de Forms adaptável que hospeda seu 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 no ícone de propriedades do Contêiner de formulário adaptável propriedades do Contêiner de formulário adaptável . A caixa de diálogo Contêiner de formulário adaptável para configurar os Modelos de dados é aberta.
    Contêiner de formulários adaptáveis do modelo de dados de formulário

  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 opção Modelo de formulário, use a opção Selecionar modelo de dados de formulário para selecionar um modelo de dados de formulário pré-configurado.
    • Ao selecionar a opção Esquema, use a opção Esquema 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 configure-prefill-service-for-form

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:

Usar o serviço de preenchimento do modelo de dados de formulário fdm-prefill-service

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 de 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 o Contêiner de Forms adaptável que hospeda seu 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 no ícone de propriedades do Contêiner de formulário adaptável propriedades do Contêiner de formulário adaptável . A caixa de diálogo Contêiner de formulário adaptável para configurar os Modelos de dados é aberta.
    Editor de página do aem sites do serviço de preenchimento prévio do fdm
  4. Selecione um modelo de dados de formulário. Abra a guia Básico. No serviço de preenchimento prévio, selecione Serviço de Preenchimento Prévio 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 o Contêiner de Forms adaptável que hospeda seu 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 no ícone de propriedades do Contêiner de formulário adaptável propriedades do Contêiner de formulário adaptável . A caixa de diálogo Contêiner de formulário adaptável para configurar os Modelos de dados é aberta.

  4. Abra a guia Envio.

    • 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: see-also

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2