Een adaptief formulier insluiten op een pagina met AEM sites embed-an-adaptive-form-to-aem-sites-page
Overzicht overview
Met AEM Forms kunnen formulierontwikkelaars de Adaptieve Forms naadloos insluiten in een AEM Sites-pagina of een 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. Hiermee kan de gebruiker in de context van andere elementen op de webpagina blijven en tegelijkertijd met het formulier communiceren. Zo kunnen gebruikers formulieren eenvoudig invullen en verzenden zonder de pagina waarop ze staan te verlaten. Deze integratie biedt een handige manier om Adaptieve Forms die ze al hebben gemaakt, opnieuw te gebruiken.
Met AEM paginaeditor kunt u snel meerdere formulieren insluiten op uw AEM Sites-pagina's. Met AEM Pagina-editor kunnen auteurs van inhoud naadloze ervaringen maken met het vastleggen van gegevens op een sitepagina. Hierbij worden adaptieve Forms-componenten gebruikt, zoals dynamisch gedrag, validaties, gegevensintegratie, het genereren van een document van registratie- en bedrijfsprocesautomatisering. Met deze functie kunt u ook verschillende functies van AEM Sites-pagina's gebruiken, zoals versioning, adressering, vertaling en beheer voor meerdere sites.
AEM Forms biedt Adaptive Form Container - en Adaptive Forms – Embed(v2) -componenten. U kunt Adaptive Forms – Embed(v2) gebruiken om een bestaand adaptief formulier toe te voegen of een formulier te maken met de Adaptive Forms Editor, terwijl Adaptive Form Container nieuwe formulieren maakt in een Experience-fragment of AEM Sites-pagina.
Hoe maakt of sluit u een adaptief formulier in op een AEM Sites-pagina of in AEM Experience Fragment? various-options-to-create-or-embed-an-adaptive-form-in-aem-sites-page-or-aem-experience-fragment
U kunt deze functie optimaal benutten door de volgende opties te gebruiken:
-
creeer een Aangepast Vorm gebruikend goedgekeurde malplaatjes en bedt het aan een pagina van AEM Sitesin: u kunt vooraf goedgekeurde malplaatjes gebruiken om Aangepast Forms snel tot stand te brengen en in te bedden die zich met de brandende richtlijnen van uw organisatie en ontwerpnormen richt.
-
bed bestaande vormen aan een pagina van AEM Sitesin: u kunt vormen gemakkelijk integreren die u reeds in uw websites hebt gecreeerd, toelatend bezoekers om met hen direct in wisselwerking te staan.
-
zet een ingebedde AanpassingsVorm in het Fragment van de Ervaringom: zet een ingebedde AanpassingsVorm die aan een pagina van AEM Sites wordt toegevoegd in een Fragment van de Ervaring om de vorm over veelvoudige pagina's van AEM Sites opnieuw te gebruiken.
-
creeer en voeg een douane Aangepaste Vorm aan een pagina van AEM Sites toe: u kunt de Adaptive Form Container component gebruiken om een gloednieuwe vorm van kras te bouwen, die het specifiek aan uw vereisten en ontwerpvoorkeur aanpast.
-
creeer en voeg een douane Aangepaste Vorm aan een Fragmenten van de Ervaring toe: u kunt het bereik van uw vormen uitbreiden door hen aan AEM Fragmenten van de Ervaring toe te voegen, die voor naadloos hergebruik over veelvoudige pagina's of plaatsen toestaan.
-
voeg veelvoudige vormen aan een de pagina of Fragment van de Ervaring van AEM Sites toe: u kunt veelvoudige AanpassingsForms tot stand brengen of toevoegen aan een pagina van AEM Sites om veelvoudige keuzen aan gebruikers te verstrekken die op hun voorkeur en vereisten worden gebaseerd. Met AEM paginaeditor kunt u snel meerdere formulieren insluiten op uw AEM Sites-pagina's. U kunt de component Adaptive Form Container meerdere keren gebruiken om Adaptieve Forms toe te voegen aan een AEM Sites-pagina. U kunt de component Adaptive Forms - Embed meerdere keren gebruiken op een AEM Sites-pagina, alleen als de optie Form covers entire width of the frame is geselecteerd. Als de optie Form covers entire width of the frame niet is ingeschakeld, ondersteunt de AEM Sites-pagina slechts één adaptief formulier dat zonder iframe kan worden gebruikt. Als u meer Adaptieve Forms wilt toevoegen met de component Adaptive Forms - Embed , selecteert u de optie Form covers entire width of the frame .
Overwegingen bij het insluiten van een adaptief formulier in een AEM Sites-pagina of AEM Experience Fragment consideration
-
Wanneer u een formulier maakt of toevoegt met de component Adaptive Forms – Embed(v2) , worden de formulieren vertaald en gelokaliseerd met behulp van de AEM Forms-vertaalstroom. In dit geval wordt één formulier onderhouden en wordt ernaar verwezen in alle taalkopieën van de sitepagina's. Adaptive Forms – Embed(v2) biedt geen toegang tot verschillende functies van AEM Sites-pagina's, zoals versioning, adressering, vertaling en beheer voor meerdere sites.
-
Wanneer u Adaptive Form Container gebruikt om een formulier te maken, worden de formulieren vertaald en gelokaliseerd via de AEM Sites-vertaalstroom. Voor elke taal wordt een afzonderlijke kopie (taalkopie) van de sitepagina en de bijbehorende formulieren gegenereerd en wanneer een auteur van de inhoud een regel in een formulier op de bovenliggende pagina wijzigt, moeten dezelfde wijzigingen worden aangebracht in alle taalkopieën van het formulier. Met Adaptive Form Container kunt u ook verschillende functies van AEM Sites-pagina's gebruiken, zoals versioning, adressering, vertaling en beheer voor meerdere sites.
Vereisten voor het insluiten van een adaptief formulier in een AEM Sites-pagina of AEM Experience Fragment before-you-start-embedding-an-adaptive-form
Alvorens u begint een nieuwe Aangepaste Vorm of een reeds bestaand Aangepast Vorm in te bedden gebruikend Adaptive Forms – Embed(v2), laat Aangepaste Componenten van de Kern van Forms toe en voeg Aangepaste Bibliotheken van de Cliënt van Forms aan uw pagina van AEM Sites toe:
Als de optie When form covers entire width of a page is geselecteerd in het dialoogvenster Form Containers configureren en als Adaptieve Forms met Core Components wordt gebruikt, moeten de clientbibliotheken op de bijbehorende sitepagina worden geplaatst.
Voeg de Klantenkopballen en Customfooterlibs cliëntbibliotheken aan uw pagina van AEM Sites toe gebruikend de plaatsingspijpleiding. De clientbibliotheken toevoegen:
-
De toegang en kloon uw Bewaarplaats van de it van AEM Cloud Service.
-
Open de map AEM Cloud Service Git Repository in een planningsteksteditor. Bijvoorbeeld Microsoft® Visual Code.
-
Open het bestand
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.htmlen voeg de volgende code toe aan het bestand: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> -
Open het bestand
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.htmlen voeg de volgende code toe aan het bestand: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> -
Open het bestand
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.htmlen voeg de volgende code toe aan het bestand: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> -
Open het bestand
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.htmlen voeg de volgende code toe aan het bestand: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> -
stel de plaatsingspijpleidingin werking om de cliëntbibliotheken aan uw milieu van AEM as a Cloud Service op te stellen.
Voer de volgende stappen uit om Adaptive Forms – Embed(v2) -component in sjabloonbeleid in te schakelen:
- Open de AEM Sites-pagina of Experience Fragment om te bewerken. Als u de pagina wilt openen om te bewerken, selecteert u de pagina en klikt u op Edit .
- Open de sjabloon van de pagina Sites of Experience Fragment. Om het malplaatje te openen, ga naar Page Information
- In de mening van de Structuur, klik het Policy
- Klik op Done.
| embed |
|---|
|
|
Een adaptief formulier insluiten met de component Adaptief Forms - Embed(v2) embed-an-adaptive-form-in-sites-editor-or-experience-fragment
Met de component Adaptive Forms - Embed(v2) kunt u rechtstreeks in de AEM Sites-editor een adaptief formulier maken met de wizard Formulier maken. Het resulterende formulier wordt opgeslagen als een externe entiteit, zodat het opnieuw kan worden gebruikt in andere sitepagina's en op zichzelf staande formulieren. U kunt een geheel nieuw formulier insluiten, zodat u het kunt aanpassen aan uw vereisten en ontwerpvoorkeuren, rechtstreeks op een AEM Sites-pagina of in Experience Fragment. Voor formulieren voor eenmalig gebruik wordt direct schrijven naar een AEM Sites-pagina aanbevolen, terwijl Experience Fragments ideaal is voor formulieren die opnieuw moeten worden gebruikt op meerdere pagina's op uw website.
U kunt een nieuw formulier eenvoudig insluiten met Adaptive Forms - Embed(v2) . Stel dat u een nieuw contactformulier opneemt in een AEM Sites-pagina of AEM Experience Fragment. Alle updates of wijzigingen die in het contactformulier zijn aangebracht op de AEM Sites-pagina of het Experience-fragment, worden automatisch toegepast op alle pagina's waar het wordt geïmplementeerd. Dit vereenvoudigt het beheer van de formulieren van uw website, zodat de gebruiker probleemloos kan werken en het hele proces kan worden gestroomlijnd.
Met Adaptive Forms - Embed(v2) kunt u:
- Nieuw formulier insluiten met de wizard Adaptive Forms in AEM Sites Page
- Nieuw formulier insluiten met de wizard Adaptieve Forms in een ervaringsfragment
- Een bestaand adaptief formulier insluiten in een AEM Sites-pagina
- Een bestaand formulier insluiten in een ervaringsfragment
- zet een Aangepast Vorm in de pagina van AEM Sites in een Fragment van de Ervaring om
Nieuw formulier insluiten met de wizard Adaptive Forms in AEM Sites Page embed-form-using-adaptive-form-wizzard-aem-sites
De stappen voor het insluiten van een nieuw formulier op een AEM Sites-pagina zijn:
-
Open de AEM Sites-pagina in de bewerkingsmodus.
-
Sleep de component Adaptive Forms - Embed(v2) vanuit het deelvenster Componentbrowser naar de pagina.
-
Klik plus pictogram en u wordt opnieuw gericht aan de tovenaar van de vormverwezenlijking.
-
Maak een nieuw adaptief formulier via de wizard Form Creation .
Het Asset Path bevat al het pad van een gemaakt adaptief formulier -
Sla de instellingen op. Het adaptieve formulier is nu ingesloten in de pagina.
Daarna, kunt u plaatsen de Submit Actieen geavanceerde eigenschappen van een ingebedde AanpassingsVorm gebruikend de tovenaar van de creatie van de Vorm.
Nieuw formulier insluiten met de wizard Adaptieve Forms in een ervaringsfragment embed-form-using-adaptive-form-wizzard-experience-fragment
De stappen voor het insluiten van een nieuw formulier in een ervaringsfragment zijn:
-
Open het fragment van de Ervaring in geef wijze uit.
-
Sleep de component Adaptive Forms - Embed(v2) vanuit het deelvenster Componentbrowser naar de pagina.
-
Klik plus pictogram en u wordt opnieuw gericht aan de tovenaar van de vormverwezenlijking.
-
Maak een nieuw adaptief formulier via de wizard Form Creation .
Het Asset Path bevat al het pad van een gemaakt adaptief formulier -
Sla de instellingen op. Het adaptieve formulier is nu ingesloten in het ervaringsfragment.
Daarna, kunt u plaatsen de Submit Actieen geavanceerde eigenschappen van een ingebedde AanpassingsVorm gebruikend de tovenaar van de creatie van de Vorm.
Een bestaand adaptief formulier insluiten in een AEM Sites-pagina embed-an-adaptive-form-in-sites-editor
Met de component Adaptive Forms - Embed(v2) kunt u een reeds bestaand adaptief formulier moeiteloos integreren in een pagina in AEM Sites. Met deze functie wordt het aanpassingsvermogen en de herbruikbaarheid van Adaptive Forms aanzienlijk verbeterd en kunnen klanten op een handige manier formulieren hergebruiken die ze al hebben gemaakt. Stel bijvoorbeeld dat u een contactformulier opneemt op een AEM Sites-pagina, zodat het formulier niet meerdere keren opnieuw hoeft te worden gemaakt.
Een bestaand adaptief formulier insluiten in een sitepagina:
- Open de AEM Sites-pagina in de bewerkingsmodus.
- Sleep de component Adaptive Forms - Embed(v2) van de Componentbrowser naar de pagina Sites.
- Selecteer de Adaptive Forms - Embed component in de pagina van Plaatsen en selecteer
- Blader naar het adaptieve formulier dat u wilt insluiten in het Asset Path en selecteer dit.
- Sla de instellingen op. Het adaptieve formulier is nu ingesloten in de pagina.
Daarna, kunt u plaatsen de Submit Actieen geavanceerde eigenschappen van een ingebedde AanpassingsVorm gebruikend de tovenaar van de creatie van de Vorm.
Een bestaand adaptief formulier insluiten in een ervaringsfragment embed-an-adaptive-form-in-experience-fragment
U kunt de toegankelijkheid van uw formulieren ook uitbreiden door deze in te sluiten in AEM Experience Fragment. Een adaptief formulier insluiten in een ervaringsfragment:
- Open een Experience Fragment in de bewerkingsmodus.
- Sleep de component Adaptive Forms - Embed(v2) van de Componentbrowser naar het fragment van de Experience.
- Selecteer de Adaptive Forms - Embed component in het Fragment van de Ervaring en selecteer
- Blader naar het adaptieve formulier dat u wilt insluiten in het Asset Path en selecteer dit.
- Sla de instellingen op. Het adaptieve formulier is nu ingesloten in het ervaringsfragment.
Daarna, kunt u plaatsen de Submit Actieen geavanceerde eigenschappen van een ingebedde AanpassingsVorm gebruikend de tovenaar van de creatie van de Vorm.
Een formulier in een AEM Sites-pagina converteren naar een Experience-fragment convert-an-adaptive-form-in-sites-page-to-an-experience-fragment
U kunt een bestaand adaptief formulier in een sitepagina-editor converteren naar een ervaringsfragment om het formulier te hergebruiken op meerdere pagina's of sites.
Een adaptief formulier in AEM Sites-pagina converteren naar een Experience-fragment:
-
Open de AEM Sites-pagina met het adaptieve formulier (in de Adaptive Forms Container-component) in de bewerkingsmodus.
-
Open de inhoudsstructuur en selecteer de Adaptive Forms Container die als host fungeert voor het adaptieve formulier. Een AEM Sites-pagina kan meerdere Adaptive Forms hosten. Selecteer dus zorgvuldig de juiste adaptieve Forms-container.
-
Voor de menubar, selecteer
Er wordt een dialoogvenster weergegeven waarin u de container Adaptief formulier kunt converteren naar een nieuw Erviteitsfragment of een bestaand Erviteitsfragment kunt toevoegen.
-
Stel in het dialoogvenster Convert to Experience Fragment Variatie waarden in voor de volgende opties:
- Actie: Uitgezocht om een Fragment van de Ervaring tot stand te brengen of aan een bestaand Fragment van de Ervaring toe te voegen.
- de weg van de Ouder: specificeer weg van de omslag om het Fragment van de Ervaring binnen te ontvangen. De optie is alleen beschikbaar voor het maken van een nieuw ervaringsfragment.
- Malplaatje: specificeer weg van het malplaatje van het Fragment van de Ervaring. Als u geen malplaatje van het Fragment van de Ervaring hebt, creeer het. De optie is alleen beschikbaar als u een adaptief formulier toevoegt aan een bestaand ervaringsfragment.
- titel van het Fragment: specificeer titel van het Fragment van de Ervaring. De titel identificeert uniek een Fragment van de Ervaring.
- de markeringen van het Fragment: specificeer markering van het Fragment van de Ervaring. De tag geeft een unieke categorie van een ervaringsfragment aan.
Adaptieve eigenschappen voor insluiten van formulieren (v2) configureren
U kunt de geavanceerde instellingen van de component Adaptive Form - Embed(v2) aanpassen. In het dialoogvenster Edit Adaptive Forms - Embed kunt u het volgende opgeven:
-
Weg van Activa: doorblader en selecteer een Aangepast Vorm om in te bedden. Deze wordt automatisch ingevuld als u deze uit de Assets-browser hebt verwijderd.
-
de Verzending van Post: Selecteer de actie om op vormvoorlegging teweeg te brengen. U kunt ervoor kiezen om een bedankbericht of een pagina voor bedankt weer te geven.
- toon Dank u Bericht: Schrijf een bericht gebruikend de rijke tekstredacteur om op vormvoorlegging te tonen. Deze optie is alleen beschikbaar als u een bedankbericht wilt weergeven.
- toon Dank u Pagina: doorblader en selecteer de pagina om op vormvoorlegging te tonen. Deze optie is alleen beschikbaar wanneer u een pagina voor bedankt weergeeft.
- Redirect om u pagina te danken: Laat de optie toe om de pagina te vervangen die de ingebedde Aangepaste Vorm met dank u pagina bevat. Anders vervangt de pagina Hartelijk dank u het Adaptieve formulier in de component Adaptive Forms - Embed(v2) zonder de onderliggende sites op de pagina te vernieuwen. Deze optie is alleen beschikbaar wanneer u een pagina voor bedankt weergeeft.
- Bericht van de Thanku: Korte bevestiging of erkenning die op het scherm na met succes het voorleggen van een vorm wordt getoond.
- Pagina van de Bedankt: doorblader en selecteer de pagina aan vertoning na met succes het voorleggen van een vorm.
-
Taal van de Pagina van het Gebruik: Gebruik lokaal van de pagina van AEM Sites in plaats van scène van AanpassingsVorm. Deze optie is alleen van toepassing voor Adaptief formulier (Foundation).
-
plaats Focus op Vorm: Uitgezocht om de nadruk op het eerste gebied van de Aangepaste Vorm te plaatsen. Deze optie is alleen van toepassing voor Adaptief formulier (Foundation).
-
Thema: Selecteer een thema dat het stileren voor componenten van uw Aangepaste Vorm bepaalt. Stijlen omvat vormgevingseigenschappen zoals letterstijl, achtergrondkleur, afmetingen en uitlijning. Deze optie is alleen van toepassing voor Adaptief formulier (Foundation).
note note NOTE U kunt de Taal van de Pagina van het Gebruik gebruiken, Vastgestelde Nadruk op Vorm en de opties van het Thema slechts voor Aangepaste Vorm (Stichting). -
de vorm behandelt volledige breedte van het kader:
Een inline-frame (iframe) is een HTML-element dat een adaptief formulier laadt naar een AEM Sites-pagina.-
Als het selectievakje Form covers entire width of the frame is ingeschakeld, neemt een adaptief formulier de volledige breedte in van de container waarin het is geplaatst. In dit geval wordt geen iframe gebruikt om het formulier te genereren. De indeling en het ontwerp van een adaptief formulier worden aangepast om de volledige breedte van de container te omspannen, zodat de container reageert en kan worden aangepast aan verschillende schermgrootten. Met deze optie kunt u meerdere Adaptieve Forms insluiten in een AEM Sites-pagina.
note note NOTE Als u meerdere formulieren wilt insluiten in een AEM Sites-pagina, schakelt u het selectievakje Form covers entire width of the frame in. -
Als het selectievakje Form covers entire width of the frame niet is ingeschakeld, beslaat een adaptief formulier niet de volledige breedte van de container. In plaats daarvan wordt een iframe gebruikt om het formulier te genereren, dat niet verder kan worden uitgebreid dan een bepaalde breedte. Deze aanpak is handig wanneer een adaptief formulier duidelijke grenzen heeft en moet bestaan naast andere AEM componenten in de container. Als deze optie niet is ingeschakeld, kan slechts één adaptieve Forms-pagina in AEM Sites zonder iframe worden ingesloten.
note note NOTE AEM Sites-pagina ondersteunt slechts één adaptief formulier dat zonder iframe kan worden gebruikt. Als u meer Adaptieve Forms wilt toevoegen met de component Adaptive Forms - Embed , selecteert u de optie Form covers entire width of the frame .
-
-
Hoogte: Specificeer de hoogte van de container. Laat deze leeg om de grootte van de container automatisch te wijzigen.
-
CSS de bibliotheek van de Cliënt: Specificeer weg aan een CSS cliëntbibliotheek.
Publish ingesloten adaptief formulier publishing-embedded-adaptive-form
Overweeg de volgende scenario's voor het publiceren van een ingebedde Aangepaste Vorm in AEM plaatspagina:
- Als u de pagina met AEM sites voor het eerst publiceert en deze een ingesloten adaptief formulier bevat, publiceert u de pagina met sites en het ingesloten element.
- Als u alleen het ingesloten adaptieve formulier hebt gewijzigd in een gepubliceerde sitepagina, publiceert u het oorspronkelijke element en de wijzigingen worden weerspiegeld in de gepubliceerde sitepagina. De gepubliceerde sitepagina bevat een verwijzing naar het element en de pagina hoeft niet opnieuw te worden gepubliceerd.
- Als u de sitepagina en het ingesloten adaptieve formulier hebt gewijzigd, publiceert u de sitepagina en het ingesloten element opnieuw.
Ingesloten adaptief formulier wijzigen modifying-embedded-adaptive-form
Voer een van de volgende handelingen uit om een configuratie of eigenschap van het ingesloten adaptieve formulier te wijzigen.
- Open het oorspronkelijke formulier in een adaptief formulier in de desbetreffende editor en wijzig deze.
- Selecteer het adaptieve formulier in de bewerkingsmodus van de sitepagina en selecteer vervolgens Edit in a new window . Het oorspronkelijke formulier wordt geopend in de bewerkingsmodus die u kunt wijzigen.
Aanbevolen procedures best-practices
Houd rekening met de volgende punten wanneer u Adaptive Forms insluit in AEM sitepagina's:
- Koptekst en voettekst in het oorspronkelijke formulier worden niet opgenomen in het ingesloten formulier.
- Concepten en opmerkingen van gebruikers met ingesloten formulieren worden ondersteund en kunnen worden weergegeven op de tabbladen Concepten en Verzonden Forms op de Forms Portal.
- De verzendactie die op het oorspronkelijke formulier is geconfigureerd, blijft behouden in het ingesloten formulier.
- Als u Adobe Analytics hebt geconfigureerd voor het oorspronkelijke formulier, worden de analysegegevens van het ingesloten formulier vastgelegd in Adobe Analytics. Het is echter niet beschikbaar in het rapport Formulieranalyse.