Documentatie AEM 6.4 Gids voor formulieren

Aangepast formulier insluiten in externe webpagina embed-adaptive-form-in-external-web-page

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Onderwerpen:
Adaptive Forms

Gemaakt voor:

User

CAUTION

AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

Leer hoe u een adaptief formulier insluit in een externe webpagina

U kunt Aangepast formulier insluiten in AEM Sites pagina of webpagina die buiten AEM wordt gehost. Het ingesloten adaptieve formulier is volledig functioneel en gebruikers kunnen het formulier invullen en verzenden zonder de pagina te verlaten. Hierdoor kan de gebruiker in de context van andere elementen op de webpagina blijven en tegelijkertijd met het formulier communiceren.

Vereisten prerequisites

Voer de volgende stappen uit voordat u een adaptief formulier insluit op een externe website:

Publiceer het adaptieve formulier op de AEM Publish instantie.
Maak of identificeer een webpagina op uw website om het adaptieve formulier te hosten. Zorg ervoor dat de webpagina jQuery-bestanden lezen vanuit een CDN of u hebt een lokale kopie van de jQuery ingesloten. jQuery is vereist om een adaptief formulier te genereren.
Wanneer AEM server en de webpagina zich op verschillende domeinen bevinden, voert u de stappen uit die in sectie worden vermeld. AEM Forms in staat stellen om adaptieve formulieren naar een interdomeinsite te sturen.
reverse-proxy instellen om communicatie tussen externe pagina en AEM Forms-server in te schakelen.

Aangepast formulier insluiten embed-adaptive-form

U kunt een adaptief formulier insluiten door een paar regels JavaScript in de webpagina in te voegen. De API in de code verzendt een HTTP-aanvraag naar de AEM server voor adaptieve formulierbronnen en injecteert het adaptieve formulier in de opgegeven formuliercontainer. Hier volgt een voorbeeldcode voor het insluiten van een adaptief formulier op een externe pagina. Gebruik de code niet zoals deze zich in een productieomgeving bevindt. Pas de code aan uw website aan, zoals een iFrame voor websites die hun eigen versie van jQuery gebruiken. Het gebruik van iFrame voorkomt conflicten binnen jQuery-versies:

Sluit de volgende code in op een webpagina op uw website:

code language-html

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/locbasic.html", dataRef:"", themepath:"", CSS_Selector:".customafsection"}; alert(options.path); var loadAdaptiveForm = function(options){ //alert(options.path); if(options.path) { // options.path refers to the publish URL of the adaptive form // For Example: http:myserver:4503/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; path += "/jcr:content/guideContainer.html"; $.ajax({ url : path , type : "GET", data : { // Set the wcmmode to be disabled wcmmode : "disabled" // Set the data reference, if any // "dataRef": options.dataRef // Specify a different theme for the form object // "themeOverride" : options.themepath }, 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>

<!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/locbasic.html", dataRef:"", themepath:"", CSS_Selector:".customafsection"};
 alert(options.path);
 var loadAdaptiveForm = function(options){
 //alert(options.path);
 if(options.path) {
     // options.path refers to the publish URL of the adaptive form
     // For Example: http:myserver:4503/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;
     path += "/jcr:content/guideContainer.html";
     $.ajax({
         url  : path ,
         type : "GET",
         data : {
             // Set the wcmmode to be disabled
             wcmmode : "disabled"
             // Set the data reference, if any
            // "dataRef": options.dataRef
             // Specify a different theme for the form object
           //  "themeOverride" : options.themepath
         },
         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>

In de ingesloten code:
- Waarde wijzigen van options.path variabele met het pad van de publicatie-URL van het adaptieve formulier. Als de AEM server op een contextweg loopt, zorg ervoor dat URL het contextweg omvat. De bovenstaande code en het aanpassen van de locatie op dezelfde naamformulierserver zijn bijvoorbeeld gebaseerd op het contextpad van het adaptieve formulier /content/forms/af/locbasic.html.
- Vervangen options.dataRef met kenmerken die worden doorgegeven met de URL. U kunt de variabele dataref gebruiken aan Een adaptief formulier vooraf invullen.
- Vervangen options.themePath met het pad naar een ander thema dan het thema dat in het adaptieve formulier is geconfigureerd. U kunt ook het themapad opgeven met het aanvraagkenmerk.
- CSS_Selector is de CSS-kiezer van de formuliercontainer waarin het adaptieve formulier is ingesloten. De CSS-kiezer in het bovenstaande voorbeeld is bijvoorbeeld de CSS-klasse .customafsection css.

Het adaptieve formulier is ingesloten in de webpagina. Bekijk het volgende in het ingesloten adaptieve formulier:

Koptekst en voettekst in het oorspronkelijke adaptieve formulier worden niet opgenomen in het ingesloten formulier.
Concepten en verzonden formulieren zijn beschikbaar op het tabblad Concepten en verzendingen in de Forms Portal.
Verzendactie die is geconfigureerd op het oorspronkelijke adaptieve formulier, blijft behouden in het ingesloten formulier.
Aangepaste formulierregels blijven behouden en werken volledig in het ingesloten formulier.
De in het oorspronkelijke adaptieve formulier geconfigureerde ervaringstips en A/B-tests werken niet in het ingesloten formulier.
Als Adobe Analytics op het oorspronkelijke formulier is geconfigureerd, worden de analysegegevens vastgelegd op de Adobe Analytics-server. Het is echter niet beschikbaar in het analyserapport van Forms.

Volmacht omkeren reveseproxy

De externe webpagina die het adaptieve formulier insluit, verzendt aanvragen naar de AEM server, die zich doorgaans achter de firewall in een privénetwerk bevindt. Om ervoor te zorgen dat de verzoeken veilig aan de AEM server worden geleid, wordt het geadviseerd aan opstelling een omgekeerde volmachtsserver.

Laten we een voorbeeld bekijken van hoe u een Apache 2.4 reverse-proxyserver zonder verzender kunt instellen. In dit voorbeeld host u de AEM server met /forms contextpad en -map /forms voor de reverse-proxy. Het zorgt ervoor dat elk verzoek om /forms op Apache-server naar de AEM-instantie worden geleid. Deze topologiehulp vermindert het aantal regels bij de verzender laag aangezien al verzoek vooraf bepaald met /forms route aan de AEM server.

Open de httpd.conf en verwijder de commentaarmarkering van de volgende coderegels. U kunt deze coderegels ook toevoegen aan het bestand.

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

Stel proxyregels in door de volgende coderegels toe te voegen in de httpd-proxy.conf configuratiebestand.

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

Vervangen [AEM_Instance] met de AEM server de URL in de regels publiceert.

Als u de AEM server niet koppelt op een contextpad, gelden de proxyregels op de Apache-laag als volgt:

ProxyPass /content https://<AEM_Instance>/content
ProxyPass /etc https://<AEM_Instance>/etc
ProxyPass /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# CSRF Filter

>[!CAUTION]
>
>AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our [technical support periods](https://helpx.adobe.com/nl/support/programs/eol-matrix.html). Find the supported versions [here](https://experienceleague.adobe.com/docs/?lang=nl).
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

>[!CAUTION]
>
>AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our [technical support periods](https://helpx.adobe.com/nl/support/programs/eol-matrix.html). Find the supported versions [here](https://experienceleague.adobe.com/docs/?lang=nl).
ProxyPassReverse /content https://<AEM_Instance>/content

NOTE

Als u opstelling een andere topologie, ervoor zorgt dat u verzend toevoegt, vooraf instelt, en andere URLs aan de lijst van gewenste personen bij de verzender laag.

Aanbevolen procedures best-practices

Houd bij het insluiten van een adaptief formulier in een webpagina rekening met de volgende aanbevolen procedures:

Zorg ervoor dat de opmaakregels die zijn gedefinieerd in de CSS van de webpagina geen conflict veroorzaken met de CSS van het formulierobject. Om conflicten te voorkomen, kunt u de CSS van de webpagina in het adaptieve formulierthema opnieuw gebruiken met AEM clientbibliotheek. Voor informatie over het gebruik van de clientbibliotheek in adaptieve formulierthema's raadpleegt u Thema's in AEM Forms.
Zorg dat de formuliercontainer op de webpagina de volledige vensterbreedte gebruikt. Hiermee zorgt u ervoor dat de CSS-regels die voor mobiele apparaten zijn geconfigureerd, zonder wijzigingen werken. Als de formuliercontainer niet de volledige vensterbreedte heeft, moet u aangepaste CSS schrijven om het formulier aan te passen aan verschillende mobiele apparaten.
Gebruiken getData API om de XML- of JSON-weergave van formuliergegevens op te halen in de client.
Gebruiken unloadAdaptiveForm API om het adaptieve formulier te verwijderen uit HTML DOM.
Opstelling de toegang-controle-oorsprong kopbal wanneer het verzenden van reactie van AEM server.

AEM Forms toestaan om aangepaste formulieren te gebruiken voor een interdomeinsite cross-domain-sites

Ga bij AEM publicatie-instantie naar AEM Web Console Configuration Manager op http://[server]:[port]/system/console/configMgr.
Zoek en open de Apache Sling Referrer Filterconfiguratie.
In de Toegestane gastheren , geeft u het domein op waar de webpagina zich bevindt. Het laat de gastheer toe om POST verzoeken aan de AEM server te doen. U kunt ook de reguliere expressie gebruiken om een reeks externe toepassingsdomeinen op te geven.

recommendation-more-help

a6ebf046-2b8b-4543-bd46-42a0d77792da