Du kan bädda in anpassningsbara formulär på en AEM Sites-sida eller en webbsida som ligger på AEM. Det inbäddade adaptiva formuläret fungerar fullt ut och användarna kan fylla i och skicka formuläret utan att behöva lämna sidan. Det hjälper användaren att stanna kvar i sitt sammanhang för andra element på webbsidan och interagera med formuläret samtidigt.
Förutsättningar
Utför följande steg innan du bäddar in ett anpassat formulär på en extern webbplats
Publicera det adaptiva formulär som ska bäddas in i publiceringsinstansen på AEM Forms-servern.
Skapa eller identifiera en webbsida på din webbplats som värd för det adaptiva formuläret. Kontrollera att webbsidan kan läsa jQuery-filer från ett CDN eller har en lokal kopia av jQuery inbäddad. jQuery krävs för att återge ett anpassat formulär.
Du kan bädda in ett anpassat formulär genom att infoga några rader med JavaScript på webbsidan. API:t i koden skickar en HTTP-begäran till AEM för adaptiva formulärresurser och injicerar det adaptiva formuläret i den angivna formulärbehållaren.
Så här bäddar du in det anpassade formuläret:
Skapa en webbsida på webbplatsen med följande kod:
<!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>
I den inbäddade koden:
Ändra värdet för options.path variabel med sökvägen till den publicerings-URL som används i det adaptiva formuläret. Om AEM körs på en kontextsökväg kontrollerar du att URL:en innehåller kontextsökvägen. Ange alltid det fullständiga namnet på det adaptiva formuläret inklusive tillägget. Ovanstående kod och adaptiv kod finns till exempel på samma AEM formulärserver, så exemplet använder kontextsökvägen för adaptiv form /content/forms/af/locbasic.html.
CSS_Selector är CSS-väljaren för den formulärbehållare där det adaptiva formuläret är inbäddat. Klassen .customafsection css är till exempel CSS-väljaren i exemplet ovan.
Det anpassningsbara formuläret är inbäddat på webbsidan. Observera följande i den inbäddade adaptiva formen:
Utkast och inskickade formulär finns på fliken Utkast och inskickningar i Forms Portal.
Skicka-åtgärden som konfigurerats på det ursprungliga adaptiva formuläret behålls i det inbäddade formuläret.
Anpassningsbara formulärregler behålls och fungerar fullt ut i det inbäddade formuläret.
Upplevelsemål och A/B-tester som konfigurerats i det ursprungliga adaptiva formuläret fungerar inte i det inbäddade formuläret.
Om Adobe Analytics har konfigurerats på originalformuläret hämtas analysdata till Adobe Analytics-servern. Den finns dock inte i Forms analysrapport.
I Adaptiv Forms, som bygger på kärnkomponenter, inkluderas klientbiblioteken (ClientLibs) och läses in tillsammans med sidhuvuds- och sidfotskomponenterna i ett formulär. När du bäddar in ett adaptivt Forms baserat på kärnkomponenter på en webbsida innehåller det alltid formulärets sidhuvud och sidfot.
Exempel på topologi
Den externa webbsidan som bäddar in det adaptiva formuläret skickar begäranden till AEM server, som vanligtvis ligger bakom brandväggen i ett privat nätverk. För att säkerställa att förfrågningarna dirigeras säkert till AEM bör du konfigurera en omvänd proxyserver.
Låt oss titta på ett exempel på hur du kan konfigurera en omvänd Apache 2.4-proxyserver utan dispatcher. I det här exemplet ska du vara värd för AEM server med /forms kontextbana och karta /forms för den omvända proxyn. Alla förfrågningar om /forms på Apache-servern dirigeras till AEM. Den här topologin hjälper till att minska antalet regler i dispatcherlagret som alla förfrågningar som prefix med /forms till AEM.
Öppna httpd.conf konfigurationsfilen och avkommentera följande kodrader. Du kan också lägga till de här kodraderna i filen.
Ersätt [AEM_Instance] med den AEM serverns publicerings-URL i reglerna.
Om du inte monterar AEM server på en kontextbana är proxyreglerna i Apache-lagret som följer:
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
OBSERVERA
Om du konfigurerar någon annan topologi måste du lägga till överförings-, förifyllnings- och andra URL-adresser till tillåtelselista i dispatcherlagret.
God praxis
Tänk på följande när du bäddar in ett anpassat formulär på en webbsida:
Kontrollera att formateringsreglerna som definieras i webbsidans CSS inte är i konflikt med formulärobjektets CSS. För att undvika konflikterna kan du återanvända webbsidans CSS i det adaptiva formulärtemat med AEM klientbibliotek. Mer information om hur du använder klientbiblioteket i adaptiva formulärteman finns i Teman i AEM Forms.
Låt formulärbehållaren på webbsidan använda hela fönsterbredden. Det ser till att CSS-reglerna som konfigurerats för mobila enheter fungerar utan ändringar. Om formulärbehållaren inte får hela fönsterbredden måste du skriva anpassad CSS så att formuläret kan anpassas till olika mobila enheter.
Använd [getData](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html) API för att hämta XML- eller JSON-representationen av formulärdata i klienten.
Använd [unloadAdaptiveForm](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html) API för att ta bort det adaptiva formuläret från HTML DOM.
Ange huvudet för åtkomstkontrollens ursprung när du skickar svar från AEM server.
Möjliggör för AEM Forms att skicka adaptiva formulär till en domänövergripande webbplats
Vid AEM publiceringsinstans går du till AEM Web Console Configuration Manager på https://'[server]:[port]'/system/console/configMgr.
Leta reda på och öppna Apache Sling Referer-filter konfiguration.
I fältet Tillåtna värdar anger du den domän där webbsidan finns. Det gör att värddatorn kan göra POST-förfrågningar till AEM. Du kan också använda reguljära uttryck för att ange en serie externa programdomäner.
