Bädda in ett anpassat formulär på en AEM webbplatssida embed-an-adaptive-form-to-aem-sites-page
Ö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 komponenter för Adaptive Form Container och Adaptive Forms – Embed(v2). Du kan använda komponenten Adaptive Forms – Embed(v2) för att lägga till ett befintligt adaptivt formulär eller skapa ett formulär med Adaptiv Forms Editor, medan Adaptive Form Container för att skapa ett nytt formulär på en Experience Fragment- eller 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 adaptiv Forms som är anpassad efter organisationens riktlinjer och designstandarder.
-
Bädda in befintliga formulär på en AEM Sites-sida: Du kan enkelt integrera formulär som du redan har skapat på dina webbplatser så att besökarna kan interagera direkt med dem.
-
Konvertera ett inbäddat anpassat formulär till Experience Fragment: Konvertera ett inbäddat anpassat 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ägg till ett anpassat anpassat formulär på en AEM Sites-sida: Du kan använda komponenten Adaptive Form Container för att skapa ett helt nytt formulär från grunden och anpassa det specifikt efter dina krav och designinställningar.
-
Skapa och lägg till ett anpassat anpassat formulär i ett Experience Fragments: Du kan utöka formulärens räckvidd genom att lägga till dem i AEM Experience Fragments, vilket möjliggör smidig återanvändning på flera sidor eller webbplatser.
-
Lägg till flera formulär på en AEM Sites-sida eller i ett Experience Fragment: Du kan skapa eller lägga till flera adaptiva Forms på en AEM Sites-sida för att ge flera alternativ för användare baserat på deras inställningar och krav. 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 komponenten Adaptive Form Container flera gånger för att lägga till Adaptiv Forms på en AEM Sites-sida. Du kan använda komponenten Adaptive Forms - Embed flera gånger på en AEM Sites-sida, endast om alternativet Form covers entire width of the frame har valts. Om alternativet Form covers entire width of the frame inte är markerat stöder AEM Sites-sidan endast ett adaptivt formulär som ska finnas utan iframe. Om du vill lägga till mer adaptiv Forms med komponenten Adaptive Forms - Embed väljer du alternativet Form covers entire width of the frame.
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 komponenten Adaptive Forms – Embed(v2), översätts och lokaliseras formulären 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 för att skapa ett formulär genomgår formulären översättning och lokalisering 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. I Adaptive Form Container kan du även 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) aktiverar du Adaptiva Forms Core-komponenter och lägger till adaptiva Forms Client Libraries på din AEM Sites-sida:
När alternativet When form covers entire width of a page är markerat i dialogrutan Form Containers Konfigurera och Adaptiv Forms med hjälp av kärnkomponenter används, måste klientbiblioteken inkluderas på sidan för motsvarande webbplats.
Lägg till klientbiblioteken CustomHeaderlibs och CustomFoterlibs på din AEM Sites-sida med hjälp av distributionsflödet. Så här lägger du till klientbiblioteken:
-
Få åtkomst till och klona din AEM Cloud Service Git-databas.
-
Öppna AEM Cloud Service Git-databasmappen i en textredigerare för en plan. Exempel: Microsoft® Visual Code.
-
Öppna filen
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.htmloch 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> -
Öppna filen
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.htmloch 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> -
Öppna filen
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.htmloch 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> -
Öppna filen
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.htmloch 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> -
Kör distributionsflödet för att distribuera klientbiblioteken till din AEM as a Cloud Service-miljö.
Så här aktiverar du komponenten Adaptive Forms – Embed(v2) i mallprincipen:
- Öppna AEM Sites eller Experience Fragment för redigering. Om du vill öppna sidan för redigering markerar du sidan och klickar på Edit.
- Öppna mallen för webbplatserna eller sidan för Experience Fragment. Öppna mallen genom att gå till Page Information
- Klicka på ikonen Policy
- Klicka på Done.
| embed |
|---|
|
|
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 komponenten 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.
Med Adaptive Forms - Embed(v2) kan du:
- Bädda in ett nytt formulär med Adaptive Forms Wizard på AEM Sites Page
- Bädda in ett nytt formulär med hjälp av guiden Adaptiv Forms i ett Experience Fragment
- Bädda in ett befintligt adaptivt formulär på en AEM Sites-sida
- Bädda in ett befintligt formulär i ett Experience Fragment
- Konvertera ett anpassat formulär på en AEM Sites-sida till ett Experience Fragment
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:
-
Öppna AEM Sites-sidan i redigeringsläge.
-
Dra och släpp komponenten Adaptive Forms - Embed(v2) på sidan från panelen Komponentwebbläsaren.
-
Klicka på ikonen Plus så dirigeras du till guiden för att skapa formulär.
-
Skapa ett nytt adaptivt formulär från guiden Form Creation.
Asset Path innehåller redan sökvägen till ett skapat anpassat formulär -
Spara inställningarna. Det adaptiva formuläret är nu inbäddat på sidan.
Sedan kan du ange åtgärden Skicka och avancerade egenskaper för ett inbäddat adaptivt 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:
-
Öppna Experience Fragment i redigeringsläge.
-
Dra och släpp komponenten Adaptive Forms - Embed(v2) på sidan från panelen Komponentwebbläsaren.
-
Klicka på ikonen Plus så dirigeras du till guiden för att skapa formulär.
-
Skapa ett nytt adaptivt formulär från guiden Form Creation.
Asset Path innehåller redan sökvägen till ett skapat anpassat formulär -
Spara inställningarna. Det adaptiva formuläret är nu inbäddat i Experience Fragment.
Sedan kan du ange åtgärden Skicka och avancerade egenskaper för ett inbäddat adaptivt 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 komponenten 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:
- Öppna AEM Sites-sidan i redigeringsläge.
- Dra och släpp komponenten Adaptive Forms - Embed(v2) från komponentwebbläsaren till sidan Platser.
- Markera Adaptive Forms - Embed-komponenten på sidan Platser och välj
- Bläddra och välj det adaptiva formulär som ska bäddas in i Asset Path.
- Spara inställningarna. Det adaptiva formuläret är nu inbäddat på sidan.
Sedan kan du ange åtgärden Skicka och avancerade egenskaper för ett inbäddat adaptivt 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:
- Öppna ett Experience Fragment i redigeringsläge.
- Dra och släpp komponenten Adaptive Forms - Embed(v2) från komponentwebbläsaren till Experience Fragment.
- Markera Adaptive Forms - Embed-komponenten i Experience Fragment och välj
- Bläddra och välj det adaptiva formulär som ska bäddas in i Asset Path.
- Spara inställningarna. Det anpassade formuläret är nu inbäddat i Experience Fragment.
Sedan kan du ange åtgärden Skicka och avancerade egenskaper för ett inbäddat adaptivt 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:
-
Öppna AEM Sites-sidan som innehåller det adaptiva formuläret (i adaptiva Forms Container-komponenten) i redigeringsläge.
-
Öppna innehållsträdet och markera Adaptive Forms Container som är värd för ditt adaptiva formulär. En AEM Sites-sida kan vara värd för flera adaptiva Forms. Välj rätt adaptiva Forms-behållare.
-
På menyraden väljer du ikonen
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.
-
I variantdialogrutan Convert to Experience Fragment anger du värden för följande alternativ:
- Åtgärd: Välj för att skapa en upplevelsefragment eller Lägg till i ett befintligt upplevelsefragment.
- Ö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 skapar du den. 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 komponenten Adaptive Form - Embed(v2). I dialogrutan Edit Adaptive Forms - Embed kan du ange följande:
-
Resurssökväg: Bläddra och välj ett anpassat formulär att bädda in. Den fylls i automatiskt om du utelämnade den från Assets webbläsare.
-
Post Submission : 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 sidan Tack: Bläddra och markera sidan som ska visas när formulär skickas. Det här alternativet är bara tillgängligt när du väljer att visa en tacksida.
- Omdirigering till dig:: Aktivera alternativet att ersätta sidan som innehåller det inbäddade adaptiva formuläret med din tacksida. Annars ersätter du tacksidan det anpassade formuläret i komponenten Adaptive Forms - Embed(v2), utan att de underliggande webbplatserna uppdateras på sidan. Det här alternativet är bara tillgängligt när du väljer att visa en tacksida.
- Tack: En kort bekräftelse eller bekräftelse som visas på skärmen när ett formulär har skickats.
- Tack-sidan: Bläddra och markera den sida som ska visas när formuläret har skickats.
-
Använd sidspråk: Använd lokala inställningar på AEM Sites-sidan i stället för de anpassade formulärspråken. Det här alternativet gäller endast för Adaptiv form (Foundation).
-
Sätt fokus på formulär: Markera för att ange fokus 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 format 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 bara använda alternativen Använd sidspråk, Sätt fokus på formulär och Tema för Adaptivt formulär (Foundation). -
Formuläret täcker ramens hela bredd:
En textbunden ram (iframe) är ett HTML-element som läser in ett adaptivt formulär på en AEM Sites-sida.-
Om kryssrutan Form covers entire width of the frame är markerad upptar ett adaptivt formulär hela bredden på behållaren där det placeras. 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 markerar du kryssrutan Form covers entire width of the frame. -
Om kryssrutan Form covers entire width of the frame inte är markerad täcker ett adaptivt formulär 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. Om du vill lägga till mer adaptiv Forms med komponenten Adaptive Forms - Embed väljer du alternativet Form covers entire width of the frame.
-
-
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ägen till ett CSS-klientbibliotek.
Publish inbäddade adaptiva 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.
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.