DocumentatieAEM 6.4Gids voor formulieren

Zelfstudie: Een adaptief formulier maken

Laatst bijgewerkt: 4 mei 2023
  • Onderwerpen:
  • Adaptive Forms

Gemaakt voor:

  • User
CAUTION
AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

02-create-adaptive-form-main-image

Deze zelfstudie is een stap in de Uw eerste adaptieve formulier maken reeks. U wordt aangeraden de reeks in chronologische volgorde te volgen om het volledige gebruik van de zelfstudie te begrijpen, uit te voeren en aan te tonen.

Over de zelfstudie

Adaptieve formulieren zijn formulieren van de nieuwe generatie die dynamisch zijn en reageren. U kunt adaptieve formulieren gebruiken om persoonlijke ervaringen te bieden. U kunt ook adaptieve formulieren integreren met Adobe Analytics voor gebruiksstatistieken en Adobe Campaign voor campagnebeheer. Voor meer informatie over adaptieve formuliermogelijkheden raadpleegt u Inleiding tot het ontwerpen van adaptieve formulieren.

Het is eenvoudiger om formulieren te maken en te beheren wanneer een correct proces wordt gevolgd. In dit artikel leert u hoe u:

  • Een adaptief formulier maken waarmee een klant een verzendadres kan toevoegen

  • Indelingsvelden van een adaptief formulier voor het weergeven en accepteren van informatie van een klant

  • Verzendactie maken om een e-mail met formulierinhoud te verzenden

  • Een adaptief formulier voorvertonen en verzenden

Aan het einde van het artikel hebt u een formulier dat vergelijkbaar is met het volgende:

[ ![](do-not-localize/form-preview-mobile.gif)](assets/form-preview-mobile.gif)

Stap 1: Het adaptieve formulier maken

  1. Meld u aan bij de AEM auteur en navigeer naar Adobe Experience Manager > Forms > Forms & Documenten. De standaard-URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Tikken Maken en selecteert u Adaptief formulier. Er verschijnt een optie voor het selecteren van een sjabloon. Tik op de knop Leeg sjabloon om te selecteren en te tikken Volgende.

  3. Een optie voor Eigenschappen toevoegen wordt weergegeven. De Titel en Naam velden zijn verplicht:

    • Titel: Opgeven Add new or update shipping address in het veld Titel. In het titelveld wordt de weergavenaam van het formulier opgegeven. Met de titel kunt u het formulier identificeren in de gebruikersinterface van AEM Forms.
    • Naam: Opgeven shipping-address-add-update-form in het veld Naam. In het veld Naam wordt de naam van het formulier opgegeven. Er wordt een knooppunt met de opgegeven naam gemaakt in de repository. Wanneer u een titel begint te typen, wordt automatisch een waarde voor het naamveld gegenereerd. U kunt de voorgestelde waarde wijzigen. Het naamveld mag alleen alfanumerieke tekens, afbreekstreepjes en onderstrepingstekens bevatten. Alle ongeldige invoer wordt vervangen door een afbreekstreepje.

  4. Tikken Maken. Er wordt een adaptief formulier gemaakt en er wordt een dialoogvenster weergegeven om het formulier te openen voor bewerking. Tikken Openen om het nieuwe formulier te openen op een nieuw tabblad. Het formulier wordt geopend voor bewerking. De zijbalk wordt ook weergegeven om het nieuwe formulier aan te passen aan de behoeften.

    Voor informatie over de adaptieve interface voor formulierontwerp en de beschikbare componenten raadpleegt u Inleiding tot het ontwerpen van adaptieve formulieren.

    nieuw aanpasbare vorm

Stap 2: Kop- en voettekst toevoegen

AEM Forms biedt veel componenten om informatie op een adaptief formulier weer te geven. De componenten Koptekst en Voettekst geven een formulier een consistent uiterlijk. Een koptekst bevat doorgaans het logo van een bedrijf, de titel van het formulier en het overzicht. Een voettekst bevat doorgaans copyrightinformatie en koppelingen naar andere pagina's.

  1. Tikken schakelen tussen zijpaneel > uitvouwen . De componentbrowser wordt geopend. Sleep de Koptekst van componentbrowser naar het adaptieve formulier.

  2. Tikken Logo. De werkbalk wordt weergegeven. Tikken aem_6_3_edit op de werkbalk typt u Wij.Detailhandel en tikken aem_6_3_forms_save .

  3. Tik op de afbeelding. De werkbalk wordt weergegeven. Tikken cmppr . De eigenschappenbrowser wordt links van het scherm geopend. Bladeren en uploadt u de logoafbeelding. Tikken aem_6_3_forms_save . De afbeelding wordt in de koptekst weergegeven.

    Tik op Bestand ophalen om het logo te downloaden dat in dit artikel wordt gebruikt als u er geen hebt.

Bestand ophalen

  1. Sleep de Voettekst component van uitvouwen op het adaptieve formulier. In dit stadium ziet het formulier er als volgt uit:

    adaptieve vorm met kop- en voetteksten

Stap 3: Componenten toevoegen om gegevens vast te leggen en weer te geven

Componenten zijn bouwstenen van een adaptief formulier. AEM Forms biedt veel componenten om informatie in een adaptieve vorm vast te leggen en weer te geven. U kunt de componenten slepen vanuit uitvouwen op een formulier. Voor meer informatie over beschikbare componenten en de bijbehorende functionaliteit raadpleegt u Inleiding tot het ontwerpen van adaptieve formulieren.

  1. Sleep de component Numerieke box naar het aangepaste formulier. Plaats het voor de voettekstcomponent. Eigenschappen van component openen, wijzigen Titel van de component Customer ID, wijzigen Elementnaam tot customer_ID de Vereist veld , schakelt u de optie HTML5-getalinvoertype gebruiken en tikken aem_6_3_forms_save .
  2. Sleep drie tekstvakcomponenten naar het aangepaste formulier. Plaats deze voor de voettekstcomponent. Stel de volgende eigenschappen in voor deze tekstvakken.:
Eigenschap
Tekstvak 1
Tekstvak 2
Tekstvak 3
Titel
Naam
Verzendadres
Staat
Elementnaam
customer_Name
customer_Shipping_Address
customer_State
Vereist veld
Ingeschakeld
Ingeschakeld
Ingeschakeld
Meerdere regels toestaan
Uitgeschakeld
Ingeschakeld
Uitgeschakeld

  1. Sleep een Numeriek vak voor de voettekstcomponent. Open eigenschappen van de component, stel waarden in die in de onderstaande tabel worden vermeld, en tik aem_6_3_forms_save .

    Eigenschap
    Waarde
    Titel
    Postcode
    Elementnaam
    customer_ZIPCode
    Maximum aantal cijfers
    6
    Vereist veld
    Ingeschakeld
    Type weergavepatroon
    Geen patroon

  2. Sleep een E-mail voor de voettekstcomponent. Open eigenschappen van de component, stel waarden in die in de onderstaande tabel worden vermeld en tik aem_6_3_forms_save .

    Eigenschap
    Waarde
    Titel
    E-mail
    Elementnaam
    customer_Email
    Vereist veld
    Ingeschakeld

  3. Sleep een Bestandsbijlage voor de voettekstcomponent. Open eigenschappen van de component, stel waarden in die in de onderstaande tabel worden vermeld en tik aem_6_3_forms_save .

Eigenschap
Waarde
Titel
Door de overheid goedgekeurd adresbewijs
Elementnaam
customer_Address_Proof
Vereist veld
Ingeschakeld

  1. Sleep een Verzendknop aan het adaptieve formulier. Plaats het voor de voettekstcomponent. Eigenschappen van component openen, elementnaam wijzigen in address_adding_update_submit, tikken aem_6_3_forms_save . De indeling van het formulier is voltooid en het formulier ziet er als volgt uit:

    adaptief-form-with-all-the-components

Stap 4: Verzendactie configureren voor het aangepaste formulier

Een verzendactie wordt geactiveerd wanneer een gebruiker op de knop Verzenden tikt op een adaptief formulier. Met een verzendactie kunt u formuliergegevens opslaan in de lokale gegevensopslagruimte, formuliergegevens verzenden naar een REST-eindpunt, formuliergegevens verzenden als e-mail, enzovoort. Aangepaste formulieren bieden een paar extra verzendacties die buiten de box vallen. Zie voor meer informatie De handeling Verzenden configureren.

Met de volgende stappen kunt u de handeling voor het verzenden van e-mail configureren en demo-verzendactie van het formulier configureren:

  1. Configureer de e-mailserver. Zie voor meer informatie E-mailmelding configureren.

    /content/help/en/experience-manager/6-4/sites-administering/notification.html

  2. Tikken Formuliercontainer in de Inhoudsbrowser en tik op cmppr . De eigenschappenbrowser wordt aan de linkerkant geopend.

  3. Ga naar Indiening > Handeling verzenden. Selecteren E-mail verzenden. Geef de volgende waarden op en tik op aem_6_3_forms_save .

    Eigenschap
    Waarde
    Van
    donotreply@weretail.com
    Naar
    ${customer_Email}
    Onderwerp
    Bevestiging: Je hebt een verzendadres toegevoegd op de website We.Retail.
    E-mailsjabloon
    Hallo ${customer_Name}, Het volgende adres wordt toegevoegd als het verzendadres voor je account:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    Met vriendelijke groeten, wij.Retail
    Bijlagen opnemen
    Ingeschakeld

    Uw formulier is klaar. U kunt nu een voorbeeld van het formulier bekijken en de functionaliteit testen. Als u de naam gebruikt die in de zelfstudie wordt genoemd en het formulier opent op de computer waarop de AEM Forms-server wordt uitgevoerd, is het formulier beschikbaar op http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Stap 5: Het adaptieve formulier voorvertonen en verzenden

U kunt de Voorvertoning, optie om de weergave en het gedrag van een formulier te evalueren. U kunt een formulier verzenden in de voorbeeldmodus en ook de validaties controleren die op een formulier zijn toegepast. Als bijvoorbeeld een fout wordt weergegeven wanneer een verplicht veld leeg blijft.

Aangepaste formulieren bieden ook een optie om een formulier voor verschillende apparaten te emuleren. Bijvoorbeeld iPhone, iPad en Desktop. U kunt beide Voorvertoning en Emulator liniaal in combinatie met elkaar een voorbeeld van een formulier bekijken voor apparaten van verschillende schermgrootten.

  1. Tik op de knop Voorvertoning aan de rechterkant van de formuliereditor. Het formulier wordt geopend in de voorbeeldmodus. Als u de in de zelfstudie vermelde naam hebt gebruikt, wordt een voorbeeld van de URL van het formulier weergegeven met http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Gebruiken liniaal om te zien hoe het formulier er op verschillende apparaten uitziet.
  3. Vul velden van het formulier in en tik op Verzenden. Het formulier wordt verzonden en u wordt omgeleid naar de standaardversie Bedankt pagina. U kunt ook een aangepaste pagina voor bedankt opgeven. Zie voor meer informatie Omleidingspagina configureren.

Het aangepaste formulier voor het toevoegen van een adres is gereed. Als u de naam gebruikt die in de zelfstudie wordt genoemd en het formulier opent op de computer waarop de AEM Forms-server wordt uitgevoerd, is het formulier beschikbaar op http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da