Incorporar um formulário adaptável à página de sites do AEM embed-an-adaptive-form-to-aem-sites-page

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

Visão geral overview

O AEM Forms permite que os desenvolvedores de formulários incorporem facilmente o Adaptive Forms em uma página do AEM Sites AEM ou em uma página da Web hospedada fora do. O Formulário adaptável incorporado é totalmente funcional e os usuários podem preencher e enviar o formulário sem sair da página. Ele ajuda o usuário a permanecer no contexto de outros elementos na página da Web e interagir simultaneamente com o formulário. Isso permite que seus usuários preencham e enviem formulários de maneira conveniente sem nunca sair da página em que estão. Essa integração oferece uma maneira conveniente de reutilizar o Adaptive Forms que eles já criaram.

Você pode usar o Editor de páginas AEM para incorporar 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 do Forms 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.

AEM Forms fornece Contêiner de formulário adaptável e Forms adaptável - incorporado(v2) componentes. Você pode usar Forms adaptável - incorporado(v2) para adicionar um formulário adaptável existente ou criar um formulário usando o Editor Forms adaptável , enquanto Contêiner de formulário adaptável para criar um novo formulário em um Fragmento de experiência ou página do AEM Sites.

Um exemplo de um formulário adaptável em uma página do AEM Sites

Como criar ou incorporar um Formulário adaptável na página do AEM Sites ou no Fragmento de experiência do AEM? various-options-to-create-or-embed-an-adaptive-form-in-aem-sites-page-or-aem-experience-fragment

Você pode aproveitar esse recurso usando as seguintes opções:

  • Criar um formulário adaptável usando modelos aprovados e incorporá-lo a uma página do AEM Sites: Você pode usar modelos pré-aprovados para criar e incorporar rapidamente o Adaptive Forms que se alinham às diretrizes de marca e padrões de design de sua organização.

  • Incorporar formulários existentes a uma página do AEM Sites: É possível integrar facilmente formulários já criados em seus sites, permitindo que os visitantes interajam diretamente com eles.

  • Converter um formulário adaptável incorporado em fragmento de experiência: Converta um formulário adaptável incorporado 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 um formulário adaptável personalizado a uma página do AEM Sites: Você pode usar o Contêiner de formulário adaptável para criar um formulário totalmente novo do zero, adaptando-o especificamente às suas necessidades e preferências de design.

  • Criar e adicionar um formulário adaptável personalizado a Fragmentos 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.

  • Adicionar vários formulários a uma página do AEM Sites ou Fragmento de experiência: Você pode criar ou adicionar várias Forms adaptáveis a uma página do AEM Sites para fornecer várias opções aos usuários com base em suas preferências e requisitos. Você pode usar o Editor de páginas AEM para incorporar rapidamente vários formulários às suas páginas do AEM Sites. Você pode usar o Contêiner de formulário adaptável várias vezes para adicionar o Adaptive Forms em uma página do AEM Sites. Você pode usar o Forms adaptável - Incorporado várias vezes em uma página do AEM Sites, somente se O formulário cobre toda a largura do quadro for selecionada. Caso a variável O formulário cobre toda a largura do quadro não estiver marcada, a página AEM Sites oferecerá suporte a apenas um Formulário adaptável para existir sem um iframe. Para adicionar mais Forms adaptável usando o Forms adaptável - Incorporado componente, selecione O formulário cobre toda a largura do quadro opção.

Considerações para incorporar um formulário adaptável na página do AEM Sites ou no Fragmento de experiência do AEM consideration

  • Ao criar ou adicionar um formulário usando a variável Forms adaptável - incorporado(v2) , os formulários são traduzidos e localizados 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. Forms adaptável - incorporado(v2) O componente não fornece acesso a vários recursos de páginas do AEM Sites, como controle de versão, direcionamento, tradução e gerenciador de vários sites.

  • Quando você usa o Contêiner de formulário adaptável para criar 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. Contêiner de formulário adaptável O 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.

Requisitos para incorporar um formulário adaptável na página do AEM Sites ou no fragmento de experiência do AEM before-you-start-embedding-an-adaptive-form

Antes de começar a incorporar um novo Formulário adaptável ou um Formulário adaptável pré-existente usando Forms adaptável - incorporado(v2), ativar Componentes principais adaptáveis do Forms e adicionar Bibliotecas de clientes do Forms adaptáveis para sua página do AEM Sites:

Ativar os Componentes principais adaptáveis do Forms para o ambiente do AEM Cloud Service
Certifique-se de que o Os Componentes principais adaptáveis do Forms são ativados para o ambiente as a Cloud Service do AEM Forms.
Adicionar bibliotecas de clientes do Forms adaptáveis à sua página do AEM Sites ou Fragmento de experiência

Quando a variável Quando o formulário cobre toda a largura de uma página estiver selecionada na caixa Contêineres de formulário Quando forem usadas a caixa de diálogo de configuração e o Adaptive Forms usando os Componentes principais, será necessário incluir as bibliotecas de clientes na página do site correspondente.

Quando o formulário cobre toda a largura de uma página, a opção é selecionada e o formulário adaptável com os componentes principais é usado

Adicione o Customheaderlibs e Customfooterlibs bibliotecas de clientes à sua página do AEM Sites usando o pipeline de implantação. Para adicionar as bibliotecas de clientes:

  1. Acesse e clone seu Repositório Git do AEM Cloud Service.

  2. Abra a pasta Repositório Git da AEM Cloud Service em um editor de texto de plano. Por exemplo, Microsoft® Visual Code.

  3. Abra o ui.apps\src\main\content\jcr_root\apps\[your-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>
    
  4. Abra o ui.apps\src\main\content\jcr_root\apps\[your-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>
    
  5. Abra o ui.apps\src\main\content\jcr_root\apps\[your-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>
    
  6. Abra o ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\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>
    
  7. Executar o pipeline de implantação para implantar as bibliotecas de clientes no ambiente as a Cloud Service AEM.

Ativar Forms adaptável - incorporado(v2) para sua página do AEM Sites ou Fragmento de experiência

Para habilitar Forms adaptável - incorporado(v2) componente 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 template, vá para a Informações da página Informações da página > Editar modelo. Ele abre o modelo correspondente no editor de modelo.
  3. Na visualização Estrutura, clique no botão Política Política ícone na barra de menus. No Componentes permitidos e selecione o Forms adaptável - incorporado(v2) na caixa de seleção [Nome do projeto do arquétipo AEM] - Formulário adaptável.
  4. Clique em Concluído.
embed

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

Incorporar um formulário adaptável usando o componente Forms - Embed(v2) embed-an-adaptive-form-in-sites-editor-or-experience-fragment

Use o Forms adaptável - incorporado(v2) para criar um Formulário adaptável diretamente no editor do AEM Sites usando o assistente de Criação de formulários. O formulário resultante é salvo como uma entidade externa, permitindo sua reutilização em outras páginas do Sites e formulários independentes. Você pode incorporar um formulário totalmente novo do zero, adaptando-o especificamente às suas necessidades e preferências de design, diretamente em uma página do AEM Sites ou em um 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 devem ser reutilizados em várias páginas do site.

É possível incorporar facilmente um novo formulário usando Forms adaptável - incorporado(v2). Por exemplo, imagine incorporar um novo formulário entre em contato conosco em uma página do AEM Sites ou em um Fragmento de experiência de AEM. Quaisquer atualizações ou modificações feitas no formulário de contato na página do AEM Sites ou no Fragmento de experiência se aplicam automaticamente a todas as páginas em que é implantado. Isso simplifica o gerenciamento dos formulários do seu site, garantindo uma experiência perfeita para o usuário e simplificando o processo geral.

Usar Forms adaptável - incorporado(v2), você pode:

Incorporar novo formulário usando o Assistente de Forms adaptável na página AEM Sites embed-form-using-adaptive-form-wizzard-aem-sites

As etapas para incorporar o novo formulário a uma página do AEM Sites são:

  1. Abra a página do AEM Sites no modo de edição.

  2. No painel Navegador de componentes, arraste e solte a Forms adaptável - incorporado(v2) componente na página.

  3. Clique em Plus e você será redirecionado para o assistente de criação de formulários.

    Forms adaptável - Componente de incorporação

  4. Crie um novo Formulário adaptável a partir do Criação do formulário assistente.
    A variável Caminho do ativo já inclui o caminho de um Formulário adaptável criado

  5. Salve as configurações. O Formulário adaptável agora está incorporado na página.

Em seguida, é possível definir a ação enviar e avançadas de um Formulário adaptável incorporado usando o Assistente de criação de Formulário.

Incorporar novo formulário usando o Assistente do Forms adaptável em um fragmento de experiência embed-form-using-adaptive-form-wizzard-experience-fragment

As etapas para incorporar um novo formulário a um Fragmento de experiência são:

  1. Abra o Fragmento de experiência no modo de edição.

  2. No painel Navegador de componentes, arraste e solte a Forms adaptável - incorporado(v2) componente na página.

  3. Clique em Plus e você será redirecionado para o assistente de criação de formulários.

    Forms adaptável - Componente de incorporação

  4. Crie um novo Formulário adaptável a partir do Criação do formulário assistente.
    A variável Caminho do ativo já inclui o caminho de um Formulário adaptável criado

  5. Salve as configurações. O Formulário adaptável agora está incorporado no Fragmento de experiência.

Em seguida, é possível definir a ação enviar e avançadas de um Formulário adaptável incorporado usando o Assistente de criação de Formulário.

Incorporar um formulário adaptável existente em uma página do AEM Sites embed-an-adaptive-form-in-sites-editor

Com o Forms adaptável - incorporado(v2) , você pode integrar facilmente um Formulário adaptável pré-existente em uma página no AEM Sites. Esse recurso melhora significativamente a adaptabilidade e a reutilização do Adaptive Forms, oferecendo aos clientes uma maneira conveniente de reutilizar formulários já criados. Por exemplo, imagine incorporar um formulário de contato a uma página do AEM Sites, eliminando a necessidade de recriar o formulário várias vezes.

Para incorporar um formulário adaptável existente 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 Forms adaptável - incorporado(v2) componente do Navegador de componentes para a página Sites.
  3. Selecione o Forms adaptável - Incorporado componente na página Sites e selecione Propriedades do contêiner de formulário adaptável na barra de ações. A variável Editar Forms adaptável - incorporado(v2) será aberta.
  4. Procure e selecione o Formulário adaptável a ser incorporado no Caminho do ativo.
  5. Salve as configurações. O Formulário adaptável agora está incorporado na página.

Em seguida, é possível definir a ação enviar e avançadas de um Formulário adaptável incorporado usando o Assistente de criação de Formulário.

Incorporar um formulário adaptável existente em um fragmento de experiência embed-an-adaptive-form-in-experience-fragment

Você também pode estender a acessibilidade de seus formulários incorporando-os ao Fragmento de experiência do AEM. Para incorporar um formulário adaptável em um fragmento de experiência:

  1. Abra um Fragmento de experiência no modo de edição.
  2. Arraste e solte a variável Forms adaptável - incorporado(v2) componente do Navegador de componentes para o Fragmento de experiência.
  3. Selecione o Forms adaptável - Incorporado no Fragmento de experiência e selecione Propriedades do contêiner de formulário adaptável na barra de ações. A variável Editar Forms adaptável - incorporado(v2) será aberta.
  4. Procure e selecione o Formulário adaptável a ser incorporado no Caminho do ativo.
  5. Salve as configurações. O Formulário adaptável agora está incorporado ao Fragmento de experiência.

Em seguida, é possível definir a ação enviar e avançadas de um Formulário adaptável incorporado usando o Assistente de criação de Formulário.

Converter um formulário na página do 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 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 Ícone Converter para variação de Fragmento de experiência.

    Clique no logotipo do gabinete de arquivo para converter um formulário adaptável na página AEM 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. No Converter em fragmento de experiência variação, 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 novo 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.
    • Tags de fragmento: Especifique a tag do Fragmento de experiência. A tag identifica exclusivamente a categoria de um Fragmento de experiência.

Configurar as propriedades de incorporação do formulário adaptável (v2)

É possível personalizar as configurações avançadas do Formulário adaptável - Embed(v2) componente. No Editar Forms adaptável - Incorporado poderá especificar o seguinte:

  • Caminho do ativo: Procure e selecione um Formulário adaptável para incorporar. Ela será preenchida automaticamente se você soltá-la no navegador de ativos.

  • Envio de publicação : selecione a ação a ser acionada no envio do formulário. Você pode optar por mostrar uma mensagem de agradecimento ou uma página de agradecimento.

    • Mostrar mensagem de agradecimento: escreva uma mensagem usando o editor de rich text para mostrar no envio do formulário. Essa opção está disponível somente quando você opta por mostrar uma mensagem de agradecimento.
    • Mostrar página de agradecimento: navegue e selecione a página que será exibida no envio do formulário. Essa opção está disponível somente quando você escolhe mostrar uma página de agradecimento.
    • Redirecionar para a página de agradecimento: habilite a opção para substituir a página que contém o Formulário adaptável incorporado pela página de agradecimento. Caso contrário, a página de agradecimento substituirá o Formulário adaptável na Forms adaptável - incorporado(v2) sem atualizar os sites subjacentes na página. Essa opção está disponível somente quando você escolhe mostrar uma página de agradecimento.
    • Mensagem de agradecimento: Confirmação ou confirmação breve que é exibida na tela após o envio bem-sucedido de um formulário.
    • Página de agradecimento: procure e selecione a página que será exibida após enviar um formulário com êxito.
  • Usar idioma da página: Use o local da página do AEM Sites em vez do local do Formulário adaptável. Essa opção só é aplicável para o Formulário adaptável (Foundation).

  • Definir Foco no formulário: selecione para definir o foco no primeiro campo do Formulário adaptável. Essa opção só é aplicável para o Formulário adaptável (Foundation).

  • Tema: selecione um tema que defina o estilo dos componentes do seu Formulário adaptável. O estilo inclui propriedades de aparência, como estilo da fonte, cor do plano de fundo, dimensões e alinhamento. Essa opção só é aplicável para o Formulário adaptável (Foundation).

    note note
    NOTE
    Você pode usar o Usar idioma da página, Definir Foco no formulário e Tema opções somente para Formulário adaptável (Foundation).
  • O formulário cobre toda a largura do quadro: um quadro em linha (iframe) é um elemento de HTML que carrega um formulário adaptável para uma página do AEM Sites.

    • Se a variável O formulário cobre toda a largura do quadro estiver marcada, um Formulário adaptável ocupará toda a largura do container no qual ele é colocado. Nesse caso, um iframe não é usado para renderizar o formulário. O layout e o design de um Formulário adaptável se adaptam para abranger toda a largura do contêiner, tornando-o responsivo e capaz de se ajustar a diferentes tamanhos de tela. Essa opção permite incorporar vários Forms adaptáveis em uma página do AEM Sites.

      note note
      NOTE
      Para incorporar vários formulários em uma página do AEM Sites, selecione O formulário cobre toda a largura do quadro caixa de seleção
    • Se a variável O formulário cobre toda a largura do quadro não estiver marcada, um formulário adaptável não cobrirá toda a largura do contêiner. Em vez disso, um iframe é usado para renderizar o formulário, que não pode ser estendido além de uma largura específica. Essa abordagem é útil quando um Formulário adaptável tem limites definidos e deve coexistir com outros componentes AEM ao lado dele no contêiner. Se essa opção não estiver marcada, permitirá que apenas uma Forms adaptável na página do AEM Sites seja incorporada sem um iframe.

      note note
      NOTE
      A página do AEM Sites oferece suporte a apenas um Formulário adaptável para existir sem um iframe. Para adicionar mais Forms adaptável usando o Forms adaptável - Incorporado componente, selecione O formulário cobre toda a largura do quadro opção.
  • Altura: especifique a altura do container. Deixe em branco para redimensionar automaticamente o contêiner.

  • Biblioteca cliente CSS: especifique o caminho para uma biblioteca de cliente CSS.

Publicar formulário adaptável incorporado publishing-embedded-adaptive-form

Considere os seguintes cenários para a publicação de um Formulário adaptável incorporado na página de sites AEM:

  • Se você estiver publicando a página de sites do AEM pela primeira vez e ela incluir um Formulário adaptável incorporado, publique a página de sites e o ativo incorporado.
  • Se você modificou somente o Formulário adaptável incorporado em uma página do site publicada, publique o ativo original e as alterações refletirão na página do site publicada. A página do site publicada inclui uma referência ao ativo e não requer a republicação da página.
  • Se você modificou a página de sites e o Formulário adaptável incorporado, republique a página de sites e o ativo incorporado.

Modificar formulário adaptável incorporado modifying-embedded-adaptive-form

Para modificar qualquer configuração ou propriedade do Formulário adaptável incorporado, execute um dos procedimentos a seguir.

  • Abra o formulário original em um Formulário adaptável no respectivo editor e modifique-o.
  • Selecione o formulário adaptável na página do site no modo de edição e selecione Editar em uma nova janela. O formulário original é aberto no modo de edição que você pode modificar.
NOTE
As alterações feitas no Formulário adaptável original são refletidas automaticamente no formulário inserido. No entanto, publique novamente o Formulário adaptável ou a página do site para refletir as alterações na página publicada.

Práticas recomendadas best-practices

Lembre-se dos seguintes pontos ao incorporar o Adaptive Forms nas páginas de sites AEM:

  • O cabeçalho e o rodapé no formulário original não estão incluídos no formulário incorporado.
  • Os rascunhos e envios de formulários incorporados pelo usuário são suportados e ficam visíveis nas guias Rascunhos e Forms enviados no Portal do Forms.
  • A ação de envio configurada no formulário original é retida no formulário incorporado.
  • Se o Adobe Analytics estiver configurado para o formulário original, os dados de análise do formulário incorporado serão capturados no Adobe Analytics. No entanto, não está disponível no relatório de análise de formulários.

Consulte também see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab