Incorporar um formulário adaptável à página de sites do AEM embed-an-adaptive-form-to-aem-sites-page
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.
A AEM Forms fornece Contêiner de formulário adaptável e Forms adaptável - Componentes Embed(v2). Você pode usar o componente Adaptive Forms - Embed(v2) para adicionar um Formulário Adaptável existente ou criar um formulário usando o Adaptive Forms Editor, enquanto o 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.
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 alinhe às diretrizes de marca e padrões de design da 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 inserido em Fragmento de Experiência: Converta um Formulário Adaptável inserido 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 um formulário adaptável personalizado a uma página do AEM Sites: Você pode usar o componente Contêiner de formulário adaptável para criar um formulário totalmente novo do zero, ajustando-o especificamente às suas necessidades e preferências de design.
-
Criar e adicionar um formulário adaptável personalizado a um Fragmento de experiência: É possível estender 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.
-
Adicionar vários formulários a uma página do AEM Sites ou a um Fragmento de experiência: Você pode criar ou adicionar vários 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 componente Contêiner de formulário adaptável várias vezes para adicionar o Forms adaptável em uma página do AEM Sites. Você pode usar o componente Forms Adaptável - Incorporar várias vezes em uma página do AEM Sites, somente se a opção Formulário cobre toda a largura do quadro estiver selecionada. Caso a opção Formulário cubra toda a largura do quadro não esteja marcada, a página do AEM Sites oferecerá suporte a apenas um Formulário adaptável para que exista sem um iframe. Para adicionar mais Forms adaptável usando o componente Forms adaptável - Incorporado, selecione a opção Formulário cobre toda a largura do quadro.
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 o componente Forms Adaptive - Embed(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 - O componente Embed(v2) 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.
-
Ao usar o Contêiner de formulário adaptável para criar um formulário, os formulários são traduzidos e localizados 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 que você use 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 o Forms Adaptável - Incorporado(v2), habilite os Componentes Principais do Forms Adaptável e adicione as Bibliotecas de Clientes do Forms Adaptável à sua página do AEM Sites:
Quando a opção Quando o formulário cobre toda a largura de uma página é selecionada na caixa de diálogo de configuração Contêineres de Formulário e o Adaptive Forms usando Componentes Principais é usado, é necessário incluir as bibliotecas de clientes na página do Site correspondente.
Adicione as bibliotecas de clientes Customheaderlibs e Customfooterlibs à sua página do AEM Sites usando o pipeline de implantação. Para adicionar as bibliotecas de clientes:
-
Acesse e clone seu Repositório Git do AEM Cloud Service.
-
Abra a pasta Repositório Git da AEM Cloud Service em um editor de texto de plano. Por exemplo, Microsoft® Visual Code.
-
Abra o arquivo
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.htmle 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> -
Abra o arquivo
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.htmle 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> -
Abra o arquivo
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.htmle 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> -
Abra o arquivo
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.htmle 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> -
Execute o pipeline de implantação para implantar as bibliotecas de clientes no seu ambiente do AEM as a Cloud Service.
Para habilitar o componente Forms Adaptável - Incorporado(v2) na política do modelo, execute as seguintes etapas:
- 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 e clique em Editar.
- Abra o modelo da página Sites ou Fragmento de experiência. Para abrir o modelo, vá para as Informações da Página
- Na exibição Estrutura, clique no ícone Política
- Clique em Concluído.
| embed |
|---|
|
|
Incorporar um formulário adaptável usando o componente Forms - Embed(v2) embed-an-adaptive-form-in-sites-editor-or-experience-fragment
Use o componente Forms Adaptive - Embed(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.
Você pode incorporar facilmente um novo formulário usando o 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.
Usando o Forms adaptável - Embed(v2), você pode:
- Incorporar novo formulário usando o Assistente de Forms adaptável na página AEM Sites
- Incorporar novo formulário usando o Assistente do Forms adaptável em um fragmento de experiência
- Incorporar um formulário adaptável existente em uma página do AEM Sites
- Incorporar um formulário existente em um Fragmento de experiência
- Converter um Formulário adaptável na página do AEM Sites em um Fragmento de experiência
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:
-
Abra a página do AEM Sites no modo de edição.
-
No painel Navegador de componentes, arraste e solte o componente Forms adaptável - Incorporado(v2) na página.
-
Clique no ícone Plus e você será redirecionado para o assistente de criação de formulários.
-
Crie um novo Formulário adaptável a partir do assistente de Criação de Formulário.
O Caminho do ativo já inclui o caminho de um Formulário adaptável criado -
Salve as configurações. O Formulário adaptável agora está incorporado na página.
Em seguida, você pode definir a Ação de envio e as propriedades avançadas de um Formulário adaptável inserido 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:
-
Abra o Fragmento de experiência no modo de edição.
-
No painel Navegador de componentes, arraste e solte o componente Forms adaptável - Incorporado(v2) na página.
-
Clique no ícone Plus e você será redirecionado para o assistente de criação de formulários.
-
Crie um novo Formulário adaptável a partir do assistente de Criação de Formulário.
O Caminho do ativo já inclui o caminho de um Formulário adaptável criado -
Salve as configurações. O Formulário adaptável agora está incorporado no Fragmento de experiência.
Em seguida, você pode definir a Ação de envio e as propriedades avançadas de um Formulário adaptável inserido 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 componente 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:
- Abra a página do AEM Sites no modo de edição.
- Arraste e solte o componente Forms Adaptável - Incorporado(v2) do Navegador de Componentes para a página Sites.
- Selecione o componente Forms Adaptável - Incorporar na página Sites e selecione
- Procure e selecione o Formulário adaptável a ser incorporado no Caminho do ativo.
- Salve as configurações. O Formulário adaptável agora está incorporado na página.
Em seguida, você pode definir a Ação de envio e as propriedades avançadas de um Formulário adaptável inserido 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:
- Abra um Fragmento de experiência no modo de edição.
- Arraste e solte o componente Forms adaptável - Embed(v2) do Navegador de componentes para o Fragmento de experiência.
- Selecione o componente Forms Adaptável - Incorporar no Fragmento de Experiência e selecione
- Procure e selecione o Formulário adaptável a ser incorporado no Caminho do ativo.
- Salve as configurações. O Formulário adaptável agora está incorporado ao Fragmento de experiência.
Em seguida, você pode definir a Ação de envio e as propriedades avançadas de um Formulário adaptável inserido 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:
-
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.
-
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.
-
Na barra de menus, selecione o
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.
-
Na caixa de diálogo de variação Converter em 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 novo 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.
- Marcas de fragmento: especifique a marca 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)
Você pode personalizar as configurações avançadas do componente Formulário adaptável - Incorporado(v2). Na caixa de diálogo Editar Forms Adaptável - Incorporado, você pode 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 Assets.
-
Envio de Post : 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: procure e selecione a página a 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 inserido pela página de agradecimento. Caso contrário, a página de agradecimento substituirá o Formulário adaptável no componente 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 breve ou confirmação exibida na tela após o envio bem-sucedido de um formulário.
- Página de agradecimento: procure e selecione a página a 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 da localidade 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 as opções Usar Idioma da Página, Definir Foco no Formulário e Tema somente para o Formulário Adaptável (Foundation). -
O formulário cobre toda a largura do quadro:
Um quadro integrado (iframe) é um elemento HTML que carrega um formulário adaptável para uma página do AEM Sites.-
Se a caixa de seleção Formulário cobrir toda a largura do quadro estiver marcada, um Formulário adaptável ocupará toda a largura do contêiner 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, marque a caixa de seleção Formulário abrange toda a largura do quadro. -
Se a caixa de seleçã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 componente Forms adaptável - Incorporado, selecione a opção Formulário cobre toda a largura do quadro.
-
-
Altura: especifique a altura do container. Deixe em branco para redimensionar automaticamente o contêiner.
-
Biblioteca do cliente CSS: especifique o caminho para uma biblioteca do cliente CSS.
Formulário adaptável incorporado do Publish 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.
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.