DocumentatieAEM 6.5Handboek

Een adaptief formulier maken of toevoegen aan een AEM Sites-pagina create-or-add-an-adaptive-form-to-aem-sites-page

Last update: Fri May 03 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • User
  • Developer

Adobe beveelt aan moderne en uitbreidbare gegevensvastlegging te gebruiken Kernonderdelenfor nieuwe Adaptieve Forms makenof Aangepaste Forms toevoegen aan AEM Sites-pagina's. Deze componenten betekenen een aanzienlijke vooruitgang in de aanmaak van Adaptive Forms en zorgen voor indrukwekkende gebruikerservaring. In dit artikel wordt een oudere aanpak beschreven voor de auteur Adaptive Forms die gebruikmaakt van stichtingscomponenten.

Versie
Artikelkoppeling
AEM 6,5
Dit artikel
AEM as a Cloud Service
Klik hier

Met AEM Forms kunt u naadloos adaptieve formulieren opnemen in uw webpagina's. Zo kunnen bezoekers formulieren op een gemakkelijke manier invullen en verzenden zonder de pagina waarop ze staan te verlaten. Op die manier kunnen ze moeiteloos betrokken blijven bij andere elementen van de website terwijl ze actief met het formulier communiceren.

Met AEM paginaeditor kunt u snel meerdere formulieren maken en toevoegen aan uw AEM Sites-pagina's. Met AEM Pagina-editor kunnen auteurs van inhoud naadloze ervaringen met het vastleggen van gegevens maken op een sitepagina met behulp van de kracht van adaptieve formuliercomponenten, zoals dynamisch gedrag, validaties, gegevensintegratie, het genereren van een document van record- 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 adaptieve formuliercontainer en adaptieve Forms - Embed-componenten. U kunt de container van het Aangepaste Vorm gebruiken om een vorm in een Fragment van de Ervaring of een pagina van AEM Sites tot stand te brengen, terwijl de Aangepast Forms - sluit component u een bestaand Aangepast Formulier of tot een vorm toe te voegen gebruikend de Redacteur van de AanpassingsForms.

Aangepast formulier op sitepagina

Voordelen van het gebruik van de component Aangepaste formuliercontainer in AEM paginaeditor of Ervaar fragment

Met de adaptieve formuliercontainer in AEM paginaeditor kunt u naadloze ervaringen met het vastleggen van gegevens maken op een sitepagina en daarbij gebruikmaken van de kracht van adaptieve Forms-componenten, 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, doelgericht maken, vertalen en beheer op meerdere sites, waardoor het maken en beheren van formulieren in hun geheel wordt verbeterd. Hieronder volgen enkele voorbeelden:

  • Versioning: AEM Sites-pagina's bieden robuuste versiemogelijkheden, waarmee u verschillende versies van uw formulieren kunt bijhouden en beheren. Op deze manier kunt u wijzigingen aanbrengen en formulieren verbeteren terwijl u de mogelijkheid behoudt om indien nodig terug te draaien naar vorige versies. Versioning zorgt voor een beheerste en georganiseerde benadering van formulierontwikkeling en -ontwikkeling.
  • Doelstelling (integratie met Adobe Target): Met AEM Sites-pagina's die zich richten op mogelijkheden, kunt u ook de formulierervaring aanpassen voor verschillende doelgroepen. Door gebruikerssegmenten en doelcriteria te gebruiken, kunt u de inhoud, het ontwerp of het gedrag van het formulier aanpassen aan specifieke groepen gebruikers. Hierdoor kunt u een gepersonaliseerde en relevante formulierervaring bieden, waardoor de betrokkenheid en conversiesnelheden toenemen.
  • Vertaling: AEM Sites naadloze integratie met vertaalserviceswaarmee u formulieren eenvoudig in meerdere talen kunt vertalen. Deze functie vereenvoudigt het lokalisatieproces, zodat uw formulieren toegankelijk zijn voor een wereldwijd publiek. U kunt vertalingen efficiënt beheren binnen AEM vertaalprojecten, waardoor u minder tijd en moeite nodig hebt voor ondersteuning van meertalige formulieren. Zie de sectie Overwegingen voor meer informatie over vertaling.
  • Beheer van meerdere sites en Live Copy: AEM Sites biedt robuuste Multisite beheer en mogelijkheden voor live kopiëren, waarmee u meerdere websites kunt maken en beheren in één omgeving. Met deze functie kunt u nu formulieren hergebruiken op verschillende sites, zodat u consistent bent en dubbel werk kunt voorkomen. Met gecentraliseerde controle en beheer kunt u formulieren efficiënt onderhouden en bijwerken op meerdere websites.
  • Thema's: AEM Sites-pagina's bieden een raamwerk voor het ontwerpen en onderhouden van consistente visuele stijlen op meerdere webpagina's. Met deze opties definieert u kleuren, lettertypen, stijlpagina's en andere visuele elementen die een bijdrage leveren aan het algehele uiterlijk van de website. U kunt de voor een AEM Sites-pagina ontworpen thema's gebruiken voor een adaptief formulier, zodat u tijd en moeite bespaart.
  • Tags: Met AEM Sites-pagina's kunt u Labels of labels toewijzen aan een pagina, element of andere inhoud. Tags zijn trefwoorden of metagegevenslabels waarmee u inhoud kunt indelen en indelen op basis van specifieke criteria. U kunt een of meer tags toewijzen aan pagina's, elementen of andere inhoudsonderdelen binnen AEM om de zoekopdracht te verbeteren en de elementen te categoriseren.
  • Inhoud vergrendelen en ontgrendelen: AEM Sites staat gebruikers toe om toegang tot en wijzigingen in pagina's beheren in de AEM Sites-omgeving. Wanneer een pagina is vergrendeld, betekent dit dat deze is beveiligd tegen onbevoegde wijzigingen of bewerkingen door andere gebruikers. Alleen de gebruiker die de inhoud heeft vergrendeld of een aangewezen beheerder kan deze ontgrendelen om wijzigingen toe te staan.

Verschillende opties voor het toevoegen van een adaptief formulier in AEM paginaeditor

U kunt deze functie optimaal benutten door de volgende opties te gebruiken:

  • Een aangepast adaptief formulier toevoegen aan een AEM Sites-pagina: Een geheel nieuw formulier maken, dat speciaal aan uw vereisten en ontwerpvoorkeuren is aangepast.

  • Voeg een aangepast adaptief formulier toe aan een Experience Fragments: Vergroot het bereik van uw formulieren door deze toe te voegen aan AEM Experience Fragments, zodat u ze naadloos kunt hergebruiken op meerdere pagina's of sites.

  • Een adaptief formulier converteren naar fragment: Converteer een adaptief formulier dat aan een AEM Sites-pagina is toegevoegd naar een Experience-fragment en gebruik het formulier opnieuw op meerdere AEM Sites-pagina's.

  • Formulieren op basis van goedgekeurde sjablonen maken en toevoegen aan een AEM Sites-pagina: Gebruik vooraf goedgekeurde sjablonen om snel formulieren te maken die zijn afgestemd op de brandingrichtlijnen en ontwerpstandaarden van uw organisatie. Deze optie is alleen beschikbaar voor Adaptive Forms die is gemaakt met de Adaptive Forms Editor of de Adaptive Forms - Embed-component.

  • Bestaande formulieren toevoegen aan een AEM Sites-pagina: U kunt formulieren die u al hebt gemaakt, eenvoudig integreren in uw websites, zodat bezoekers direct met ze kunnen communiceren. Deze optie is alleen beschikbaar voor Adaptive Forms die is gemaakt met de Adaptive Forms Editor of de Adaptive Forms - Embed-component.

  • Meerdere formulieren toevoegen aan een AEM Sites-pagina of Ervaar fragment: Voeg meerdere formulieren aan een pagina toe om gebruikers meerdere keuzes te bieden op basis van hun voorkeuren en vereisten. Dit kan een combinatie van geheel nieuwe formulieren en bestaande formulieren zijn.

Overwegingen consideration

  • Wanneer u een formulier maakt of toevoegt met de container voor adaptieve formulieren, 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 de adaptieve formuliercontainer kunt u ook verschillende functies van AEM Sites-pagina's gebruiken, zoals versioning, adressering, vertaling en beheer voor meerdere sites.

  • Wanneer u een formulier maakt of toevoegt met de component Adaptief insluiten van formulieren, 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. De adaptieve component Form-embed biedt geen toegang tot verschillende functies van AEM Sites-pagina's, zoals versioning, adressering, vertaling en beheer voor meerdere sites.

Voordat u begint before-you-start

Adaptieve Forms Core-componenten inschakelen voor uw omgeving
Zorg ervoor dat de Adaptieve Forms Core-componenten zijn ingeschakeld voor uw omgeving.
Adaptieve Forms-clientbibliotheken toevoegen aan uw AEM Sites-pagina en onderdelen van de Experience Fragment-pagina

Om volledige functionaliteit van de Adaptive Forms Container component toe te laten, voeg de Customheaderlibs en Customfooterlibs cliëntbibliotheken aan uw AEM Sites pagina toe gebruikend de plaatsingspijpleiding. De bibliotheken toevoegen:

  1. Meld u aan bij de AEM Author-instantie en open CRX DE. De standaard-URL voor een instantie van de Auteur die lokaal wordt uitgevoerd http://localhost:4502/crx/de.

  2. Open de /apps/[your-sites-project]/components/page/customheaderlibs.html en 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>

  3. Open de /apps/[your-sites-project]/components/page/customfooterlibs.html en 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>

  4. Open de /apps/[your-sites-project]/components/xfpage/customheaderlibs.html en 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>

  5. Open de /apps/[your-sites-project]/components/customfooterlibs.html en 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>

  6. Herhaal bovenstaande stappen voor alle instanties Auteur en Publiceren in uw omgeving.

Adaptieve Forms-container inschakelen

Inschakelen Adaptive Forms Container in het sjabloonbeleid voert u de volgende stappen uit:

  1. 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 Bewerken.
  2. Open de sjabloon van de pagina Sites of Experience Fragment. Ga naar de Page Information Pagina-informatie > Edit Template. De bijbehorende sjabloon wordt geopend in de sjablooneditor.
  3. Klik in de structuurweergave op de knop Policy Beleid in de menubalk. In de Allowed Components en selecteert u de Adaptive Forms Container selectievakje onder [Projectnaam AEM] - Adaptief formulier.
  4. Klik op Done.
embed

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

Een adaptief formulier maken create-an-adaptive-form-in-sites-editor-or-experience-fragment

U kunt een geheel nieuw formulier maken en dit 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 zijn voor formulieren die opnieuw moeten worden gebruikt op meerdere pagina's op uw website.

Een formulier maken op een AEM Sites-pagina create-an-adaptive-form-in-sites-editor

Met de component Aangepaste formuliercontainer in AEM paginaeditor kunt u een aangepast formulier maken. Met de component kunt u een formulier maken door de formuliercomponenten te slepen en neer te zetten. De formuliercomponenten zijn gebaseerd op kerncomponenten. U kunt deze instellingen eenvoudig aanpassen aan de vereisten van uw organisatie.

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

Een adaptief formulier maken op een sitepagina:

  1. Open de AEM Sites-pagina in de bewerkingsmodus.
  2. Sleep de Adaptive Forms Container van de Browser van de Component aan de pagina van Plaatsen. Er wordt een spatie op de pagina voor het formulier gemaakt. U kunt de lay-outmodus gebruiken om de grootte van de containerruimte te wijzigen.
  3. Sleep Adaptieve componenten van Form Core naar de containerruimte om het formulier te maken.
  4. Voeg de knop Verzenden toe.

Volgende De handeling Verzenden instellen en geavanceerde eigenschappen.

Een formulier maken in een ervaringsfragment create-an-adaptive-form-in-experience-fragment

U kunt het bereik van uw formulieren uitbreiden door ze toe te voegen aan AEM Experience Fragments, zodat u ze naadloos kunt hergebruiken op meerdere pagina's of sites. U kunt bijvoorbeeld een inschrijvingsformulier voor een nieuwsbrief opnemen in een Experience-fragment. Zo kunt u het fragment op meerdere pagina's van uw website opnieuw gebruiken, zodat u het formulier niet herhaaldelijk opnieuw hoeft te maken. Alle updates of wijzigingen die worden aangebracht in het inschrijvingsformulier voor nieuwsbrieven binnen het Experience Fragment, worden automatisch doorgegeven aan alle pagina's waar het wordt gebruikt. Dit stroomlijnt het proces en zorgt voor een naadloze gebruikerservaring en vereenvoudigt het beheer van de formulieren van uw website.

Een adaptief formulier maken in een ervaringsfragment:

  1. Open een ervaringsfragment.
  2. Sleep de Adaptive Forms Container van Componentbrowser naar Experience Fragment.
  3. Sleep Adaptieve componenten van Form Core naar de containerruimte in het Experience Fragment om het formulier te maken.
  4. Voeg de knop Verzenden toe.

Volgende De handeling Verzenden instellen en geavanceerde eigenschappen.

Een adaptief formulier in 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:

  1. Open de AEM Sites-pagina met het adaptieve formulier (in de Adaptive Forms Container-component) in de bewerkingsmodus.

  2. Open de inhoudsstructuur en selecteer de Adaptive Forms Container dat als host fungeert voor uw adaptieve formulier. Een AEM Sites-pagina kan meerdere Adaptive Forms hosten. Selecteer dus zorgvuldig de juiste adaptieve Forms-container.

  3. Selecteer in de menubalk de optie Omzetten in ervaringspictogram voor fragmentvariatie Omzetten in het pictogram voor het ervaren van fragmentvariatie.
    Formulier in sitepagina converteren naar een ervaringsfragment

    Er wordt een dialoogvenster weergegeven waarin u de container Adaptief formulier kunt converteren naar een nieuw Ervaringsfragment of een bestaand Erviteitsfragment kunt uitbreiden

  4. Stel in het dialoogvenster Converteren naar ervaringsfragmentvariatie waarden in voor de volgende opties:

    • Handeling: Selecteer deze optie om een ervaringsfragment te maken of aan een bestaand ervaringsfragment toe te voegen.
    • Bovenliggend pad: Geef het pad van de map op waarin u het ervaringsfragment wilt plaatsen. De optie is alleen beschikbaar voor het maken van een ervaringsfragment.
    • Template: Geef het pad van de fragmentsjabloon voor ervaring op. Als u geen fragmentsjabloon voor ervaring hebt, maken. De optie is alleen beschikbaar als u een adaptief formulier toevoegt aan een bestaand ervaringsfragment.
    • Fragmenttitel: Geef de titel van het ervaringsfragment op. De titel identificeert op unieke wijze een ervaringsfragment

Handeling voor verzenden voor het formulier configureren configure-submit-action-for-form

Met een handeling Verzenden kunt u de bestemming kiezen van gegevens die zijn vastgelegd in een adaptief formulier. Deze wordt geactiveerd wanneer een gebruiker op de knop Verzenden klikt op een adaptief formulier. Aangepaste formulieren bevatten enkele van de verzendacties. U kunt ook een standaardverzendactie uitbreiden om uw eigen aangepaste verzendactie te maken. Een handeling verzenden voor uw formulier configureren:

  1. Open de AEM van de Pagina-editor of Ervaar Fragment dat het adaptieve formulier bevat.
  2. Open de inhoudsstructuur en selecteer de Adaptive Forms Container dat als host fungeert voor uw adaptieve formulier. Een AEM Sites-pagina kan meerdere Adaptive Forms hosten. Selecteer dus zorgvuldig de juiste adaptieve Forms-container.
  3. Klik op de eigenschappen van de container van het adaptieve formulier Eigenschappen van adaptieve formuliercontainers pictogram. Het dialoogvenster Aangepaste formuliercontainer voor het configureren van verzendacties wordt geopend.
    Container voor adaptieve formulieren
  4. Selecteer en vorm een Submit actie, die op uw vereisten wordt gebaseerd. Zie voor meer informatie over Handelingen verzenden Handeling Adaptief verzenden van formulier

Een schema of formuliergegevensmodel voor een formulier configureren configure-schema-or-data-model-for-form

Met het formuliergegevensmodel kunt u een formulier verbinden met een gegevensbron om gegevens te verzenden en te ontvangen op basis van gebruikersacties. U kunt een formulier ook verbinden met een JSON-schema om de verzonden gegevens in een vooraf gedefinieerde indeling te ontvangen.

Voordat u een formulier koppelt aan een schema of formuliergegevensmodel

Een JSON-schema of formuliergegevensmodel configureren voor uw formulier:

  1. Open de AEM van de Pagina-editor of Ervaar Fragment dat het adaptieve formulier bevat.

  2. Open de inhoudsstructuur en selecteer de Adaptive Forms Container dat als host fungeert voor uw adaptieve formulier. Een AEM Sites-pagina kan meerdere Adaptive Forms hosten. Selecteer dus zorgvuldig de juiste adaptieve Forms-container.

  3. Klik op de eigenschappen van de container van het adaptieve formulier Eigenschappen van adaptieve formuliercontainers pictogram. Het dialoogvenster Aangepaste formuliercontainer voor het configureren van gegevensmodellen wordt geopend.
    Formuliergegevensmodel adaptieve formuliercontainer

  4. Selecteer en configureer een JSON-schema of formuliergegevensmodel op basis van uw vereisten. Zie voor meer informatie over Handelingen verzenden Handeling Adaptief verzenden van formulier.

    • Wanneer u Form Model gebruiken Select Form Data Model om een vooraf geconfigureerd formuliergegevensmodel te selecteren.
    • Wanneer u Schema gebruiken Schema Selecteer een JSON-schema voor uw formulier.

  5. Klik op Done.

Een prefill-service voor een formulier configureren configure-prefill-service-for-form

U kunt de Prefill-service gebruiken om automatisch velden van een adaptief formulier in te vullen met bestaande gegevens. Wanneer een gebruiker een formulier opent, worden de waarden voor die velden vooraf ingevuld. U kunt:

Vooraf ingevulde service Formuliergegevensmodel gebruiken fdm-prefill-service

Met de service Vooraf invullen formuliergegevensmodel kunt u velden van een formulier vooraf invullen met een geconfigureerd formuliergegevensmodel. De service Vooraf invullen formuliergegevensmodel gebruikt de De service van het geconfigureerde formuliergegevensmodel ophalen om gegevens op te halen. Als u de service Vooraf invullen van formuliergegevensmodel wilt gebruiken voor een adaptief formulier:

  1. Open de AEM van de Pagina-editor of Ervaar Fragment dat het adaptieve formulier bevat.
  2. Open de inhoudsstructuur en selecteer de Adaptive Forms Container dat als host fungeert voor uw adaptieve formulier. Een AEM Sites-pagina kan meerdere Adaptive Forms hosten. Selecteer dus zorgvuldig de juiste adaptieve Forms-container.
  3. Klik op de eigenschappen van de container van het adaptieve formulier Eigenschappen van adaptieve formuliercontainers pictogram. Het dialoogvenster Aangepaste formuliercontainer voor het configureren van gegevensmodellen wordt geopend.
    Pagina-editor voor Fdm-sites vooraf invullen
  4. Selecteer een formuliergegevensmodel. Open de Basic tab. Selecteer in de service Prefill de optie Forms Portal Draft Prefill Service.
  5. Klik op Done.

Leid de gebruiker om naar een nieuwe gebruiker bij het indienen van een formulier of toon een bedankje

Bij het verzenden van een formulier kunt u de gebruiker omleiden naar een andere webpagina of een bericht. Om de gebruiker om te leiden of het dank u bericht te vormen:

  1. Open de AEM van de Pagina-editor of Ervaar Fragment dat het adaptieve formulier bevat.

  2. Open de inhoudsstructuur en selecteer de Adaptive Forms Container dat als host fungeert voor uw adaptieve formulier. Een AEM Sites-pagina kan meerdere Adaptive Forms hosten. Selecteer dus zorgvuldig de juiste adaptieve Forms-container.

  3. Klik op de eigenschappen van de container van het adaptieve formulier Eigenschappen van adaptieve formuliercontainers pictogram. Het dialoogvenster Aangepaste formuliercontainer voor het configureren van gegevensmodellen wordt geopend.

  4. Open de Submission tab.

    • Als u een omleidings-URL wilt configureren, selecteert u bij Verzenden de optie Omleiden naar URL en geeft u een absoluut adres, een omleidings-URL of een relatief pad van een AEM Sites-pagina op.

    • Als u een aangepast bericht of een bedankbericht wilt configureren, selecteert u bij Verzenden de optie Bericht tonen en geeft u een bericht op in het vak Berichtinhoud. Het is een tekstvak met tekstopmaak. U kunt de optie Volledig scherm gebruiken om alle beschikbare tekstitems weer te geven.

Zie ook see-also

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2