Bädda in ett anpassat formulär på en AEM webbplatssida embed-an-adaptive-form-to-aem-sites-page

Version
Artikellänk
AEM 6.5
Klicka här
AEM as a Cloud Service
Den här artikeln

Ökning overview

Med AEM Forms kan formulärutvecklare smidigt bädda in Adaptiv Forms på en AEM Sites-sida eller en webbsida som ligger 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 hålla sig i rätt sammanhang för andra element på webbsidan och interagera samtidigt med formuläret. Detta gör att användarna enkelt kan fylla i och skicka formulär utan att behöva lämna den sida de är på. Den här integreringen är ett bekvämt sätt att återanvända adaptiva Forms som de redan har skapat.

Du kan använda AEM Page Editor för att snabbt bädda in flera formulär på dina AEM Sites-sidor. Med AEM Page Editor kan skribenter skapa sömlösa datainhämtningsupplevelser på en Sites-sida med hjälp av adaptiva Forms-komponenter, inklusive dynamiskt beteende, validering, dataintegrering, generering av dokument för post- och affärsprocessautomatisering. Du kan även använda olika funktioner på AEM Sites-sidor, som versionshantering, målgruppsanpassning, översättning och hantering av flera webbplatser.

AEM Forms tillhandahåller Adaptive Form Container och Adaptive Forms – Embed(v2) -komponenter. Du kan använda Adaptive Forms – Embed(v2) för att lägga till ett befintligt adaptivt formulär eller skapa ett formulär med Adaptiv Forms Editor, samtidigt som Adaptive Form Container för att skapa nya formulär på en Experience Fragment- eller AEM Sites-sida.

Ett exempel på ett adaptivt formulär på en AEM Sites-sida

Hur skapar eller bäddar jag in ett anpassat formulär på AEM Sites-sidan eller i AEM Experience Fragment? various-options-to-create-or-embed-an-adaptive-form-in-aem-sites-page-or-aem-experience-fragment

Du kan utnyttja den här funktionen fullt ut genom att använda följande alternativ:

  • Skapa ett adaptivt formulär med godkända mallar och bädda in det på en AEM Sites-sida: Du kan använda redan godkända mallar för att snabbt skapa och bädda in adaptiva Forms som är anpassade efter organisationens riktlinjer och designstandarder.

  • Bädda in befintliga formulär på en AEM Sites-sida: Ni kan enkelt integrera formulär som ni redan har skapat på era webbplatser, så att besökarna kan interagera direkt med dem.

  • Konvertera ett inbäddat anpassat formulär till Experience Fragment: Konvertera ett inbäddat adaptivt formulär som lagts till på en AEM Sites-sida till ett Experience Fragment för återanvändning av formuläret på flera AEM Sites-sidor.

  • Skapa och lägga till ett anpassat anpassat formulär på en AEM Sites-sida: Du kan använda Adaptive Form Container för att skapa ett helt nytt formulär från grunden och skräddarsy det specifikt efter dina behov och designönskemål.

  • Skapa och lägga till ett anpassat anpassat formulär i ett Experience Fragments: Ni kan utöka räckvidden för era formulär genom att lägga till dem i AEM Experience Fragments, vilket möjliggör smidig återanvändning på flera sidor eller webbplatser.

  • Lägga till flera formulär på en AEM Sites-sida eller Experience Fragment: Du kan skapa eller lägga till flera adaptiva Forms-filer på en AEM Sites-sida för att ge flera alternativ beroende på användarens önskemål och önskemål. Du kan använda AEM Page Editor för att snabbt bädda in flera formulär på dina AEM Sites-sidor. Du kan använda Adaptive Form Container flera gånger för att lägga till Adaptiv Forms på en AEM Sites-sida. Du kan använda Adaptive Forms - Embed flera gånger på en AEM Sites-sida, endast om Form covers entire width of the frame är markerat. Om Form covers entire width of the frame om alternativet inte är markerat stöder AEM Sites-sidan endast ett adaptivt formulär som ska finnas utan iframe. Lägga till mer adaptiv Forms med Adaptive Forms - Embed komponent, markera Form covers entire width of the frame alternativ.

Att tänka på när du bäddar in ett anpassat formulär på en AEM Sites-sida eller AEM Experience Fragment consideration

  • När du skapar eller lägger till ett formulär med Adaptive Forms – Embed(v2) kan formulären översättas och lokaliseras med hjälp av AEM Forms översättningsflöde. I det här fallet finns det ett enda formulär som du kan referera till på alla språkkopior av webbplatssidorna. Adaptive Forms – Embed(v2) -komponenten ger inte åtkomst till olika funktioner på AEM Sites-sidor som versionshantering, målgruppsanpassning, översättning och hantering av flera webbplatser.

  • När du använder Adaptive Form Container om du vill skapa ett formulär, översätts och lokaliseras formulären via AEM Sites översättningsflöde. För varje språk genereras en separat kopia (språkkopia) av webbplatssidan och motsvarande formulär. När en innehållsförfattare ändrar en regel i ett formulär på den överordnade sidan måste samma ändringar göras i alla språkkopior av formuläret. Adaptive Form Container Med kan du också använda olika funktioner på AEM Sites-sidor, som versionshantering, målgruppsanpassning, översättning och hantering av flera webbplatser.

Krav för att bädda in ett anpassat formulär på AEM Sites-sidan eller AEM Experience Fragment before-you-start-embedding-an-adaptive-form

Innan du börjar bädda in ett nytt adaptivt formulär eller ett befintligt adaptivt formulär med Adaptive Forms – Embed(v2), aktivera Adaptiva Forms Core-komponenter och lägga till Adaptiva Forms-klientbibliotek till din AEM Sites-sida:

Aktivera adaptiva Forms Core-komponenter för din AEM Cloud Service-miljö
Se till att Adaptiva Forms Core-komponenter är aktiverade för din as a Cloud Service AEM Forms-miljö.
Lägg till adaptiva Forms-klientbibliotek på din AEM Sites-sida eller Experience Fragment

När When form covers entire width of a page alternativet är markerat i Form Containers dialogrutan Konfigurera och Adaptiv Forms med Core Components används. Klientbiblioteken måste inkluderas på sidan för motsvarande webbplats.

När formuläret täcker hela sidbredden är markerat och adaptiva formulär med kärnkomponenter används

Lägg till CustomerHeaderlibs och CustomFoterlibs klientbibliotek till din AEM Sites-sida via distributionsflödet. Så här lägger du till klientbiblioteken:

  1. Få åtkomst till och klona dina AEM Cloud Service Git-databas.

  2. Öppna AEM Cloud Service Git-databasmappen i en textredigerare för en plan. Exempel: Microsoft® Visual Code.

  3. Öppna ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.html och lägg till följande kod i filen:

    code language-none
        //Customheaderlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
        </sly>
    
  4. Öppna ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.html och lägg till följande kod i filen:

    code language-none
        //customfooterlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
        </sly>
    
  5. Öppna ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.html och lägg till följande kod i filen:

    code language-none
        //Customheaderlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
        </sly>
    
  6. Öppna ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.html och lägg till följande kod i filen:

    code language-none
        //customfooterlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
        </sly>
    
  7. Kör distributionsflödet för att distribuera klientbiblioteken till din AEM as a Cloud Service miljö.

Aktivera Adaptive Forms – Embed(v2) för din AEM Sites-sida eller Experience Fragment

Aktivera Adaptive Forms – Embed(v2) utför följande steg i mallens policy:

  1. Öppna AEM Sites eller Experience Fragment för redigering. Om du vill öppna sidan för redigering markerar du sidan och klickar på Edit.
  2. Öppna mallen för webbplatserna eller sidan för Experience Fragment. Öppna mallen genom att gå till Page Information Sidinformation > Edit Template. Motsvarande mall öppnas i mallredigeraren.
  3. I strukturvyn klickar du på Policy Policy -ikonen på menyraden. I Allowed Components och välj Adaptive Forms – Embed(v2) kryssrutan under [AEM Archetype Project Name] - Adaptiv form.
  4. Klicka på Done.
embed

https://video.tv.adobe.com/v/3419369?quality=12&learn=on

Bädda in ett adaptivt formulär med komponenten Adaptiv Forms - Embed(v2) embed-an-adaptive-form-in-sites-editor-or-experience-fragment

Använd Adaptive Forms - Embed(v2) för att skapa ett adaptivt formulär direkt i AEM Sites-redigeraren med hjälp av guiden Skapa formulär. Det resulterande formuläret sparas som en extern enhet, vilket gör att det kan återanvändas på andra webbplatssidor och fristående formulär. Du kan bädda in ett helt nytt formulär från grunden och anpassa det specifikt efter dina krav och designönskemål, direkt på en AEM Sites-sida eller i Experience Fragment. För enstaka formulär rekommenderas direktredigering på en AEM Sites-sida, medan Experience Fragments är idealiskt för formulär som måste återanvändas på flera sidor på webbplatsen.

Du kan enkelt bädda in ett nytt formulär med Adaptive Forms - Embed(v2). Tänk dig till exempel att infoga ett nytt kontaktformulär på en AEM Sites-sida eller AEM Experience Fragment. Alla uppdateringar eller ändringar som görs i kontaktformuläret på AEM Sites-sidan eller i Experience Fragment gäller automatiskt alla sidor där det distribueras. Detta förenklar hanteringen av webbplatsens formulär, vilket ger en smidig användarupplevelse och effektiviserar hela processen.

Använda Adaptive Forms - Embed(v2) kan du:

Bädda in ett nytt formulär med Adaptive Forms Wizard på AEM Sites Page embed-form-using-adaptive-form-wizzard-aem-sites

Steg för att bädda in nya formulär på en AEM Sites-sida är:

  1. Öppna AEM Sites-sidan i redigeringsläge.

  2. Dra och släpp komponentens Adaptive Forms - Embed(v2) på sidan.

  3. Klicka på Plus och du omdirigeras till guiden för att skapa formulär.

    Adaptiv Forms - Bädda in komponent

  4. Skapa ett nytt adaptivt formulär från Form Creation guide.
    The Asset Path innehåller redan sökvägen till ett skapat adaptivt formulär

  5. Spara inställningarna. Det adaptiva formuläret är nu inbäddat på sidan.

Nu kan du ange åtgärden Skicka och avancerade egenskaper för inbäddade adaptiva formulär med hjälp av guiden Skapa formulär.

Bädda in ett nytt formulär med hjälp av guiden Adaptiv Forms i ett Experience Fragment embed-form-using-adaptive-form-wizzard-experience-fragment

Steg för att bädda in nya formulär i en Experience Fragment är:

  1. Öppna Experience Fragment i redigeringsläge.

  2. Dra och släpp komponentens Adaptive Forms - Embed(v2) på sidan.

  3. Klicka på Plus och du omdirigeras till guiden för att skapa formulär.

    Adaptiv Forms - Bädda in komponent

  4. Skapa ett nytt adaptivt formulär från Form Creation guide.
    The Asset Path innehåller redan sökvägen till ett skapat adaptivt formulär

  5. Spara inställningarna. Det adaptiva formuläret är nu inbäddat i Experience Fragment.

Nu kan du ange åtgärden Skicka och avancerade egenskaper för inbäddade adaptiva formulär med hjälp av guiden Skapa formulär.

Bädda in ett befintligt adaptivt formulär på en AEM Sites-sida embed-an-adaptive-form-in-sites-editor

Med Adaptive Forms - Embed(v2) kan du enkelt integrera ett befintligt adaptivt formulär på en sida i AEM Sites. Den här funktionen gör det enklare att anpassa och återanvända Adaptive Forms, vilket ger kunderna ett bekvämt sätt att återanvända redan skapade formulär. Tänk dig att du kan lägga in ett kontaktformulär på en AEM Sites-sida och slippa återskapa formuläret flera gånger.

Så här bäddar du in ett befintligt adaptivt formulär på en webbplatssida:

  1. Öppna AEM Sites-sidan i redigeringsläge.
  2. Dra och släpp Adaptive Forms - Embed(v2) -komponenten från komponentwebbläsaren till sidan Platser.
  3. Välj Adaptive Forms - Embed på sidan Platser och väljer Egenskaper för adaptiv formulärbehållare i åtgärdsfältet. The Edit Adaptive Forms - Embed(v2) öppnas.
  4. Bläddra och välj det adaptiva formulär som ska bäddas in i Asset Path.
  5. Spara inställningarna. Det adaptiva formuläret är nu inbäddat på sidan.

Nu kan du ange åtgärden Skicka och avancerade egenskaper för inbäddade adaptiva formulär med hjälp av guiden Skapa formulär.

Bädda in ett befintligt anpassat formulär i ett Experience Fragment embed-an-adaptive-form-in-experience-fragment

Du kan också utöka formulärens tillgänglighet genom att bädda in dem i AEM Experience Fragment. Så här bäddar du in ett anpassat formulär i ett Experience Fragment:

  1. Öppna ett Experience Fragment i redigeringsläge.
  2. Dra och släpp Adaptive Forms - Embed(v2) -komponenten från komponentwebbläsaren till Experience Fragment.
  3. Välj Adaptive Forms - Embed i Experience Fragment och markera Egenskaper för adaptiv formulärbehållare i åtgärdsfältet. The Edit Adaptive Forms - Embed(v2) öppnas.
  4. Bläddra och välj det adaptiva formulär som ska bäddas in i Asset Path.
  5. Spara inställningarna. Det anpassade formuläret är nu inbäddat i Experience Fragment.

Nu kan du ange åtgärden Skicka och avancerade egenskaper för inbäddade adaptiva formulär med hjälp av guiden Skapa formulär.

Konvertera ett formulär på en AEM Sites-sida till ett Experience Fragment convert-an-adaptive-form-in-sites-page-to-an-experience-fragment

Du kan konvertera ett befintligt adaptivt formulär i en webbplatssidredigerare till ett Experience Fragment för att återanvända formuläret på flera sidor eller webbplatser.

Så här konverterar du ett adaptivt formulär på en AEM Sites-sida till ett Experience Fragment:

  1. Öppna AEM Sites-sidan som innehåller det adaptiva formuläret (i adaptiva Forms Container-komponenten) i redigeringsläge.

  2. Öppna innehållsträdet och välj Adaptive Forms Container som är värd för din adaptiva form. En AEM Sites-sida kan vara värd för flera adaptiva Forms. Välj rätt adaptiva Forms-behållare.

  3. På menyraden väljer du Ikon för att konvertera till upplevelsefragmentvariationer Konvertera till Experience Fragment-variationsikon.

    Klicka på filkabinettlogotypen för att konvertera ett adaptivt formulär på AEM Sites-sidan till ett Experience Fragment

    En dialogruta visas där du kan konvertera behållaren för adaptiva formulär till ett nytt Experience Fragment eller lägga till i ett befintligt Experience Fragment.

  4. Convert to Experience Fragment i variantdialogrutan anger du värden för följande alternativ:

    • Åtgärd: Välj det här alternativet om du vill skapa ett Experience Fragment eller Lägg till i ett befintligt Experience Fragment.
    • Överordnad sökväg: Ange sökvägen till den mapp där Experience Fragment ska vara värd. Alternativet är bara tillgängligt för att skapa nya Experience Fragment.
    • Mall: Ange sökvägen till Experience Fragment-mallen. Om du inte har någon Experience Fragment-mall skapa. Alternativet är bara tillgängligt för att lägga till adaptiv form till ett befintligt Experience Fragment.
    • Fragmenttitel: Ange Experience Fragment-titel. Titeln identifierar unikt en Experience Fragment.
    • Fragment-taggar: Ange tagg för Experience Fragment. Taggen identifierar unikt kategorin för en Experience Fragment.

Konfigurera egenskaper för anpassad formulärinbäddning (v2)

Du kan anpassa de avancerade inställningarna för Adaptive Form - Embed(v2) -komponenten. I Edit Adaptive Forms - Embed kan du ange följande:

  • Resurssökväg: Bläddra och välj ett anpassat formulär som ska bäddas in. Den fylls i automatiskt om du släppte den från Assets-webbläsaren.

  • Efterbeställning : Välj den åtgärd som ska utlösas när formulär skickas. Du kan visa ett tackmeddelande eller en tacksida.

    • Visa tackmeddelande: Skriv ett meddelande med textredigeraren som ska visas när formulär skickas. Det här alternativet är endast tillgängligt när du väljer att visa ett tackmeddelande.
    • Visa tacksida: Bläddra och välj den sida som ska visas när formuläret skickas. Det här alternativet är bara tillgängligt när du väljer att visa en tacksida.
    • Omdirigering till dig som tackar dig: Aktivera alternativet att ersätta sidan som innehåller det inbäddade adaptiva formuläret med tacksidan. I annat fall ersätter tack-sidan det adaptiva formuläret i dialogrutan Adaptive Forms - Embed(v2) utan att uppdatera underliggande webbplatser på sidan. Det här alternativet är bara tillgängligt när du väljer att visa en tacksida.
    • Thankyou Message: Kortfattad bekräftelse eller bekräftelse som visas på skärmen när ett formulär har skickats.
    • Thankyou Page: Bläddra och markera den sida som ska visas när formuläret har skickats.
  • Använd sidspråk: Använd lokala sidor på AEM Sites-sidan i stället för anpassade formulär. Det här alternativet gäller endast för Adaptiv form (Foundation).

  • Sätt fokus på formulär: Välj det här alternativet om du vill fokusera på det första fältet i det adaptiva formuläret. Det här alternativet gäller endast för Adaptiv form (Foundation).

  • Tema: Välj ett tema som definierar formatering för komponenter i det adaptiva formuläret. Formateringen innehåller utseendeegenskaper som teckensnittsstil, bakgrundsfärg, dimensioner och justering. Det här alternativet gäller endast för Adaptiv form (Foundation).

    note note
    NOTE
    Du kan använda Använd sidspråk, Sätt fokus på formulär och Tema endast för Adaptiv form (Foundation).
  • Formuläret täcker ramens hela bredd: En textbunden bildruta (iframe) är ett HTML-element som läser in ett adaptivt formulär på en AEM Sites-sida.

    • Om Form covers entire width of the frame om kryssrutan är markerad upptar ett adaptivt formulär hela bredden på den behållare som det är placerat i. I det här fallet används ingen iframe för att återge formuläret. Layouten och designen för ett adaptivt formulär anpassas efter behållarens hela bredd så att den blir responsiv och kan justeras till olika skärmstorlekar. Med det här alternativet kan du bädda in flera adaptiva Forms-filer på en AEM Sites-sida.

      note note
      NOTE
      Om du vill bädda in flera formulär på en AEM Sites-sida väljer du Form covers entire width of the frame kryssrutan.
    • Om Form covers entire width of the frame inte är markerad, ett anpassat formulär täcker inte hela behållarens bredd. I stället används en iframe för att återge formuläret, som inte kan utökas utanför en viss bredd. Detta är användbart när ett adaptivt formulär har definierade gränser och måste finnas tillsammans med andra AEM-komponenter bredvid det i behållaren. Om det här alternativet inte är markerat tillåter det endast att en Adaptiv Forms-sida på AEM Sites-sidan bäddas in utan iframe.

      note note
      NOTE
      AEM Sites-sidan stöder endast ett adaptivt formulär utan iframe. Lägga till mer adaptiv Forms med Adaptive Forms - Embed komponent, markera Form covers entire width of the frame alternativ.
  • Höjd: Ange behållarens höjd. Lämna det tomt om du vill ändra storlek på behållaren automatiskt.

  • CSS-klientbibliotek: Ange sökväg till ett CSS-klientbibliotek.

Publicera inbäddat adaptivt formulär publishing-embedded-adaptive-form

Vi ska titta på följande scenarier för publicering av ett inbäddat adaptivt formulär på AEM webbplatssida:

  • Om du publicerar sidan AEM webbplatser för första gången och den innehåller ett inbäddat adaptivt formulär publicerar du webbplatssidan och den inbäddade resursen.
  • Om du bara ändrade det inbäddade adaptiva formuläret på en publicerad webbplatssida publicerar du den ursprungliga resursen och ändringarna återspeglas på den publicerade webbplatssidan. Den publicerade webbplatssidan innehåller en referens till resursen och behöver inte publicera om sidan.
  • Om du har ändrat webbplatssidan och det inbäddade adaptiva formuläret publicerar du om webbplatssidan och den inbäddade resursen.

Ändra inbäddat anpassat formulär modifying-embedded-adaptive-form

Om du vill ändra någon konfiguration eller egenskap för det inbäddade adaptiva formuläret gör du något av följande.

  • Öppna originalformuläret i ett adaptivt formulär i respektive redigerare och ändra dem.
  • Markera det adaptiva formuläret på webbplatssidan i redigeringsläge och välj sedan Edit in a new window. Det ursprungliga formuläret öppnas i redigeringsläge som du kan ändra.
NOTE
De ändringar som gjorts i det ursprungliga adaptiva formuläret återspeglas automatiskt i det inbäddade formuläret. Publicera dock om det adaptiva formuläret eller webbplatsens sida så att ändringarna på den publicerade sidan återspeglas.

God praxis best-practices

Tänk på följande när du bäddar in Adaptiv Forms på AEM webbplatser:

  • Sidhuvud och sidfot i det ursprungliga formuläret inkluderas inte i det inbäddade formuläret.
  • Användarutkast och inskickade inbäddade formulär stöds och visas på flikarna Utkast och Skickat Forms på Forms Portal.
  • Den skicka-åtgärd som är konfigurerad i det ursprungliga formuläret behålls i det inbäddade formuläret.
  • Om du har konfigurerat Adobe Analytics för det ursprungliga formuläret hämtas analysdata från det inbäddade formuläret i Adobe Analytics. Den är dock inte tillgänglig i rapporten för formuläranalys.

Se även see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab