[AEM Forms]{class="badge positive" title="Aplicável ao AEM Forms)."}

Incorporar formulários adaptáveis com base nos componentes principais a uma página externa da Web embed-adaptive-form-in-external-web-page

Última atualização: 5 de junho de 2026

Aplica-se a:
Experience Manager as a Cloud Service

Criado para:

Admin
Developer
User

Versão

Link do artigo

AEM as a Cloud Service

Este artigo

AEM 6.5

Clique aqui

Você pode incorporar formulários adaptáveis em uma página do AEM Sites ou uma página da Web hospedada fora do AEM. 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.

Pré-requisitos prerequisites

Execute as seguintes etapas antes de incorporar um formulário adaptável a um site externo

Publique o formulário adaptável a ser incorporado à instância de publicação do AEM Forms Server.
Crie ou identifique uma página da Web em seu site onde você possa hospedar o formulário adaptável. Certifique-se de que a página da Web possa ler arquivos jQuery de um CDN ou tenha uma cópia local do jQuery inserido. O jQuery é necessário para renderizar um formulário adaptável.
Quando o servidor do AEM e a página da Web estiverem em domínios diferentes, execute as etapas listadas na seção Configurar URLs de solicitação absoluta com o GuideBridge e habilitar o AEM Forms para fornecer formulários adaptáveis a um site entre domínios.

Incorporar formulário adaptável embed-adaptive-form

Você pode incorporar um formulário adaptável inserindo algumas linhas de JavaScript na página da Web. A API no código envia uma solicitação HTTP ao servidor do AEM para recursos de formulários adaptáveis e injeta o formulário adaptável no contêiner de formulários especificado.

Para incorporar o formulário adaptável:

Crie uma página da Web em seu site com o seguinte código:

code language-html

     <!doctype html>
     <html>
       <head>
         <title>This is the title of the webpage!</title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       </head>
       <body>
       <div class="customafsection"/>
         <p>This section is replaced with the adaptive form.</p>

      <script>
      var options = {path:"/content/forms/af/myadaptiveform.html", CSS_Selector:".customafsection"};
      alert(options.path);
      var loadAdaptiveForm = function(options){
      //alert(options.path);
         if(options.path) {
             // options.path refers to the path of the adaptive form
             // For Example: /content/forms/af/ABC, where ABC is the adaptive form
             // Note: If AEM server is running on a context path, the adaptive form URL must contain the context path
             var path = options.path;
             $.ajax({
                 url  : path ,
                 type : "GET",
                 data : {
                     // wcmmode=disabled is only required for author instance
                     // wcmmode : "disabled"
                 },
                 async: false,
                 success: function (data) {
                     // If jquery is loaded, set the inner html of the container
                     // If jquery is not loaded, use APIs provided by document to set the inner HTML but these APIs would not        evaluate the script tag in HTML as per the HTML5 spec
                     // For example: document.getElementById().innerHTML
                     if(window.$ && options.CSS_Selector){
                         // HTML API of jquery extracts the tags, updates the DOM, and evaluates the code embedded in the        script tag.
                         $(options.CSS_Selector).html(data);
                     }
                 },
                 error: function (data) {
                     // any error handler
                 }
             });
         } else {
             if (typeof(console) !== "undefined") {
                 console.log("Path of Adaptive Form not specified to loadAdaptiveForm");
             }
         }
      }(options);

      </script>
       </body>
     </html>

No código incorporado:
- Altere o valor da variável options.path com o caminho da URL de publicação do formulário adaptável. Se o servidor do AEM estiver sendo executado em um caminho de contexto, verifique se o URL inclui o caminho de contexto. Sempre mencione o nome completo do formulário adaptável, incluindo a extensão. Por exemplo, o código e o formulário adaptável acima residem no mesmo AEM Forms Server, então o exemplo usa o caminho de contexto do formulário adaptável /content/forms/af/myadaptiveform.html.
- CSS_Selector é o seletor de CSS do container de formulário no qual o formulário adaptável está incorporado. Por exemplo, a classe css .customafsection é o seletor de CSS no exemplo acima.

O formulário adaptável é incorporado na página da Web. Observe o seguinte no formulário adaptável incorporado:

Rascunhos e formulários enviados estão disponíveis na guia Rascunhos e envios no Portal do Forms.
A ação Enviar configurada no formulário adaptável original é retida no formulário incorporado.
As regras de formulário adaptáveis são mantidas e totalmente funcionais no formulário incorporado.
O direcionamento de experiência e os testes A/B configurados no formulário adaptável original não funcionam no formulário incorporado.
Se o Adobe Analytics estiver configurado no formulário original, os dados de análise serão capturados pelo servidor do Adobe Analytics. No entanto, não está disponível no relatório de análise do Forms.
No Forms adaptável baseado em Componentes principais, as bibliotecas de clientes (ClientLibs) são incluídas e carregadas junto com os componentes Cabeçalho e Rodapé de um formulário. Assim, quando você incorpora um Forms adaptável baseado em Componentes principais a uma página da Web, ele sempre inclui o Cabeçalho e o Rodapé do formulário.

Configurar URLs de solicitação absoluta com o GuideBridge configure-base-url

Quando o servidor do AEM e a página da Web estão em domínios diferentes, você pode usar a API do GuideBridge para anexar uma origem de publicação absoluta do AEM a solicitações geradas pelas bibliotecas guideruntime. Use a configuração baseUrl para instruir guideruntime a anexar a origem absoluta especificada a solicitações como envio de formulário, recuperação de dados de preenchimento prévio, geração de documento de registro, uploads de arquivo e operações de envio internas.

Adicione o seguinte trecho à página da Web incorporada, juntamente com a implementação existente do guideBridge.connect:

window.guideBridge.connect(function () {
    window.guideBridge.registerConfig("baseUrl", "https://publish.example.com");
});

Substitua https://publish.example.com pela URL de publicação do AEM Forms Server.

Com essa configuração, um URL de solicitação semelhante ao seguinte exemplo:

/content/forms/af/my-form/jcr:content/guideContainer.af.submit.jsp

é enviado para o servidor do AEM como:

https://publish.example.com/content/forms/af/my-form/jcr:content/guideContainer.af.submit.jsp

Quando o servidor do AEM e a página da Web estão em domínios diferentes, você também deve configurar o CORS na instância de publicação do AEM. Execute as etapas listadas na seção habilitar o AEM Forms para fornecer formulários adaptáveis a um site entre domínios.

Topologia de exemplo sample-topology

A página da Web externa que incorpora o formulário adaptável envia solicitações para o servidor do AEM, que normalmente fica atrás do firewall em uma rede privada. Para garantir que as solicitações sejam direcionadas com segurança ao servidor do AEM, é recomendável configurar um servidor proxy reverso.

Vamos ver um exemplo de como configurar um servidor proxy reverso Apache 2.4 sem um Dispatcher. Neste exemplo, você está hospedando o servidor AEM com o caminho de contexto /forms e mapear /forms para o proxy reverso. Ela garante que qualquer solicitação para /forms no servidor Apache seja direcionada para a instância do AEM. Essa topologia ajuda a reduzir o número de regras na camada do Dispatcher, pois todas as solicitações recebem o prefixo /forms de rota para o servidor do AEM.

Abra o arquivo de configuração httpd.conf e remova o comentário das linhas de código a seguir. Como alternativa, você pode adicionar essas linhas de código no arquivo.

code language-text
`LoadModule proxy_html_module modules/mod_proxy_html.so LoadModule proxy_http_module modules/mod_proxy_http.so`

Configure regras de proxy adicionando as seguintes linhas de código no arquivo de configuração httpd-proxy.conf.

code language-text
`ProxyPass /forms https://[AEM_Instance]/forms ProxyPassReverse /forms https://[AEM_Instance]/forms`

Substitua [AEM_Instance] pela URL de publicação do servidor do AEM nas regras.

Se você não montar o servidor do AEM em um caminho de contexto, as regras de proxy na camada do Apache são as seguintes:

ProxyPass /content https://<AEM_Instance>/content
ProxyPass /etc https://<AEM_Instance>/etc
ProxyPass /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# CSRF Filter
ProxyPass /libs/granite/csrf/token.json https://<AEM_Instance>/libs/granite/csrf/token.json

ProxyPassReverse /etc https://<AEM_Instance>/etc
ProxyPassReverse /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# written for thank you page and other URL present in AF during redirect
ProxyPassReverse /content https://<AEM_Instance>/content

NOTE

Se você configurar qualquer outra topologia, adicione o envio, o preenchimento prévio e outros URLs ao incluo na lista de permissões na camada do dispatcher.

Práticas recomendadas best-practices

Ao incorporar um formulário adaptável em uma página da Web, considere as seguintes práticas recomendadas:

Certifique-se de que as regras de estilo definidas no CSS da página da Web não estejam em conflito com o CSS do objeto de formulário. Para evitar os conflitos, você pode reutilizar o CSS da página da Web no tema de formulário adaptável usando a biblioteca de cliente do AEM. Para obter informações sobre como usar a biblioteca do cliente em temas de formulários adaptáveis, consulte Temas no AEM Forms.
Faça com que o container do formulário na página da Web use toda a largura da janela. Ela garante que as regras CSS configuradas para dispositivos móveis funcionem sem alterações. Se o contêiner de formulário não ocupa toda a largura da janela, você deve gravar CSS personalizado para fazer o formulário se adaptar a diferentes dispositivos móveis.
Use a API [getData](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html) para obter a representação XML ou JSON dos dados de formulário no cliente.
Use a API [unloadAdaptiveForm](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html) para descarregar o formulário adaptável do DOM do HTML.
Configure o cabeçalho access-control-origin ao enviar uma resposta de um servidor do AEM.

Permitir que o AEM Forms forneça formulários adaptáveis a um site entre domínios cross-site

Quando o servidor do AEM e a página da Web estiverem em domínios diferentes, configure a instância de publicação do AEM usando uma das seguintes opções.

NOTE

O AEM as a Cloud Service não fornece acesso ao Console da Web do OSGi em instâncias de publicação. Adicione as seguintes configurações ao repositório Git do Cloud Manager em ui.config/src/main/content/jcr_root/apps/<application-folder>/osgiconfig/config.publish e implante as alterações por meio do Cloud Manager.

Usando a configuração de baseUrl do GuideBridge

Ao usar a configuração baseUrl do GuideBridge, configure o CORS na instância de publicação do AEM para que o servidor do AEM retorne cabeçalhos apropriados para pontos de extremidade de envio, preenchimento prévio e Documento de Registro.

No repositório Git do Cloud Manager, navegue até ui.config/src/main/content/jcr_root/apps/<application-folder>/osgiconfig/config.publish.

Crie o arquivo de configuração OSGi com.adobe.granite.cors.impl.CORSPolicyImpl~embedded-forms.cfg.json com conteúdo semelhante ao seguinte exemplo. Substitua https://www.example.com pela origem da página da Web de incorporação.

code language-json

{
  "supportscredentials": false,
  "supportedmethods": [
    "GET",
    "HEAD",
    "POST"
  ],
  "exposedheaders": [
    ""
  ],
  "alloworigin": [
    "https://www.example.com"
  ],
  "maxage:Integer": 1800,
  "alloworiginregexp": [
    ""
  ],
  "supportedheaders": [
    "Origin",
    "Accept",
    "X-Requested-With",
    "Content-Type",
    "Access-Control-Request-Method",
    "Access-Control-Request-Headers"
  ],
  "allowedpaths": [
    "/content/forms/af/.*",
    "/libs/granite/csrf/token.json"
  ]
}

Confirme, envie e implante a configuração por meio de um pipeline da Cloud Manager.

Para obter mais informações, consulte configuração do CORS (Cross-Origin Resource Sharing).

Filtro referenciador Apache Sling

Ao usar um proxy reverso ou incorporar o formulário adaptável sem a configuração baseUrl do GuideBridge, configure o Filtro referenciador do Apache Sling na instância de publicação do AEM.

No repositório Git do Cloud Manager, navegue até ui.config/src/main/content/jcr_root/apps/<application-folder>/osgiconfig/config.publish.

Crie ou atualize o arquivo de configuração OSGi org.apache.sling.security.impl.ReferrerFilter.cfg.json com conteúdo semelhante ao seguinte exemplo. Substitua www.example.com pelo domínio onde a página da Web reside.

code language-json
`{ "allow.empty": false, "allow.hosts": [ "www.example.com" ], "allow.hosts.regexp": [ "" ], "filter.methods": [ "POST", "PUT", "DELETE", "COPY", "MOVE" ], "exclude.agents.regexp": [ "" ] }`

Confirme, envie e implante a configuração por meio de um pipeline da Cloud Manager.

note warning
WARNING
O filtro referenciador não é uma fábrica de configurações OSGi, o que significa que apenas uma configuração pode ser ativada em um serviço do AEM de cada vez. Quando possível, evite adicionar configurações personalizadas de Filtro referenciador, pois isso substituirá as configurações nativas do AEM e poderá quebrar a funcionalidade do produto.

Para obter mais informações, consulte Configuração de filtro de referência.

recommendation-more-help

experience-manager-cloud-service-help-main-toc