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
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 na instância de publicação do servidor do AEM Forms.
Crie ou identifique uma página da Web no seu site para hospedar o formulário adaptável. Certifique-se de que a página da Web possa ler arquivos jQuery de um CDN ou tem uma cópia local do jQuery incorporada. O jQuery é necessário para renderizar um formulário adaptável.
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 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:
<!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:
Alterar valor de options.path com o caminho da URL de publicação do formulário adaptável. Se o servidor 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 acima e o formulário adaptável residem no mesmo servidor de formulários AEM, portanto, o exemplo usa o caminho de contexto do formulário adaptável /content/forms/af/locbasic.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 de envio 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 no 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.
Topologia de exemplo
A página externa da Web que incorpora o formulário adaptável envia solicitações para o servidor 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 AEM, é recomendável configurar um servidor proxy reverso.
Vamos ver um exemplo de como você pode configurar um servidor proxy reverso do Apache 2.4 sem o dispatcher. Neste exemplo, você hospedará o servidor AEM com /forms caminho e mapa do contexto /forms para o proxy reverso. Assegura que qualquer pedido de /forms no servidor Apache são direcionados à instância AEM. Essa topologia ajuda a reduzir o número de regras na camada do dispatcher, pois todas as solicitações recebem o prefixo /forms para o servidor AEM.
Abra 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.
Substituir [AEM_Instance] com o URL de publicação do servidor AEM nas regras.
Se você não montar o servidor AEM em um caminho de contexto, as regras de proxy na camada do Apache serã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
OBSERVAÇÃO
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
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 do cliente 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ê precisa gravar CSS personalizado para fazer o formulário se adaptar a diferentes dispositivos móveis.
Uso [getData](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html) API para obter a representação XML ou JSON dos dados de formulário no cliente.
Uso [unloadAdaptiveForm](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html) API para descarregar o formulário adaptável do DOM do HTML.
Configurar o cabeçalho access-control-origin ao enviar uma resposta do servidor AEM.
Permitir que o AEM Forms forneça formulários adaptáveis a um site entre domínios
Na instância de publicação do AEM, acesse o Gerenciador de configuração do console da Web AEM em https://'[server]:[port]'/system/console/configMgr.
Localize e abra o Filtro referenciador do Apache Sling configuração.
No campo Hosts permitidos, especifique o domínio em que reside a página da Web. Ela permite que o host faça solicitações de POST para o servidor AEM. Você também pode usar expressões regulares para especificar uma série de domínios de aplicativos externos.
