DokumentationAEM as a Cloud ServiceAnvändarhandbok

Bädda in anpassningsbara formulär baserade på kärnkomponenter på en extern webbsida embed-adaptive-form-in-external-web-page

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Administratör
  • Utvecklare
  • Användare
Version
Artikellänk
AEM as a Cloud Service
Den här artikeln
AEM 6.5
Klicka här

Du kan bädda in anpassningsbara formulär på en AEM Sites-sida eller på en webbsida som är värd utanför 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 prerequisites

Utför följande steg innan du bäddar in ett anpassat formulär på en extern webbplats

Bädda in anpassat formulär embed-adaptive-form

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:

  1. Skapa en webbsida på webbplatsen med följande kod:

    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>

  2. I den inbäddade koden:

    • Ändra värdet för variabeln options.path med sökvägen för den anpassningsbara formulärets publicerings-URL. 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 sample-topology

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 kommer du att vara värd för AEM server med /forms-kontextsökväg och mappa /forms för den omvända proxyn. Den ser till att 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 eftersom alla förfrågningar som har prefixet /forms till AEM server minskar.

  1. Öppna konfigurationsfilen httpd.conf och avkommentera följande kodrader. Du kan också lägga till de här kodraderna i filen.

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

  2. Konfigurera proxyregler genom att lägga till följande kodrader i konfigurationsfilen httpd-proxy.conf.

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

    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
NOTE
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 best-practices

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 klientbibliotek 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 cross-site

  1. Gå till Configuration Manager för webbkonsolen på https://'[server]:[port]'/system/console/configMgr AEM publiceringsinstans.
  2. Leta reda på och öppna konfigurationen för Refererarfilter för Apache Sling.
  3. 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.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab