DokumentationAEM 6.5Användarhandbok

Självstudiekurs: Skapa ett anpassat formulär do-not-publish-tutorial-create-an-adaptive-form

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Administratör
  • Användare
  • Utvecklare

02-create-adaptive-form-main-image

Den här självstudiekursen är ett steg i serien Create Your First Adaptive Form . Vi rekommenderar att du följer serien i kronologisk ordning för att förstå, utföra och demonstrera det fullständiga självstudiekurserna.

Om självstudiekursen about-the-tutorial

Adaptiva formulär är nya generationer som är dynamiska och responsiva. Ni kan använda adaptiva formulär för att leverera personaliserade upplevelser. Du kan även integrera adaptiva formulär med Adobe Analytics för användningsstatistik och Adobe Campaign för kampanjhantering. Mer information om funktioner för adaptiva formulär finns i Introduktion till utveckling av adaptiva formulär.

Det är enklare att skapa och hantera formulär när man följer en lämplig process. I den här artikeln får du lära dig att:

Du kommer att ha ett formulär som liknar följande i slutet av artikeln:
Förhandsgranska formulär i mobilen

Steg 1: Skapa det anpassade formuläret step-create-the-adaptive-form

  1. Logga in på AEM författarinstans och navigera till Adobe Experience Manager > Forms > Forms & Documents. Standardwebbadressen är http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Välj Create och välj Adaptive Form. Ett alternativ för att välja en mall visas. Markera mallen Blank för att markera den och välj Next.

  3. Ett alternativ för Add Properties visas. Fälten Title och Name är obligatoriska:

    • Titel: Ange Add new or update shipping address i fältet Title. Titelfältet anger formulärets visningsnamn. Titeln hjälper dig att identifiera formuläret i AEM Forms-användargränssnittet.
    • Namn: Ange shipping-address-add-update-form i fältet Name. Fältet Namn anger formulärets namn. En nod med det angivna namnet skapas i databasen. När du börjar skriva en titel genereras värdet för namnfältet automatiskt. Du kan ändra det föreslagna värdet. Namnfältet får endast innehålla alfanumeriska tecken, bindestreck och understreck. Alla ogiltiga indata ersätts med ett bindestreck.

  4. Välj Create. Ett anpassat formulär skapas och en dialogruta öppnas där du kan öppna formuläret för redigering. Välj Open om du vill öppna det nya formuläret på en ny flik. Formuläret öppnas för redigering. Här visas också sidlisten där du kan anpassa det nya formuläret efter behov.

    Mer information om gränssnittet för att skapa adaptiva formulär och tillgängliga komponenter finns i Introduktion till att skapa adaptiva formulär.

    Ett anpassat formulär har skapats.

AEM Forms innehåller många komponenter för att visa information i ett adaptivt formulär. Komponenterna för sidhuvud och sidfot ger formuläret ett enhetligt utseende och en enhetlig känsla. En rubrik innehåller vanligtvis ett företags logotyp, formulärets rubrik och sammanfattning. En sidfot innehåller vanligtvis copyrightinformation och länkar till andra sidor.

  1. Välj växlingspanel > treexpandall . Komponentwebbläsaren öppnas. Dra Header-komponenten från komponentwebbläsaren till det adaptiva formuläret.

  2. Välj Logo. Verktygsfältet visas. Välj aem_6_3_edit i verktygsfältet, skriv We.Retail och välj aem_6_3_forms_save .

  3. Välj Bild. Verktygsfältet visas. Välj cmppr . Egenskapsläsaren öppnas till vänster på skärmen. Browse och överför logotypbilden. Välj aem_6_3_forms_save . Bilden visas i sidhuvudet.

    Du kan välja Hämta fil för att hämta logotypen som används i den här artikeln om du inte har någon.

Hämta fil

  1. Dra Footer-komponenten från treeexpandall till det adaptiva formuläret. I det här skedet ser formuläret ut så här:

    adaptive-form-with-headers-and-footers

Steg 3: Lägga till komponenter för att hämta och visa information step-add-components-to-capture-and-display-information

Komponenter är byggstenar i en adaptiv form. AEM Forms innehåller många komponenter för att hämta och visa information i ett anpassat formulär. Du kan dra komponenterna från treexpandall till ett formulär. Mer information om tillgängliga komponenter och motsvarande funktioner finns i Introduktion till utveckling av adaptiva formulär.

  1. Dra Numeric Box component till det adaptiva formuläret. Placera den före sidfotskomponenten. Öppna komponentens egenskaper, ändra Title för komponenten till Customer ID, ändra Element Name till customer_ID, aktivera alternativet Required Field, aktivera alternativet Use HTML5 Number Input Type och välj aem_6_3_forms_save .

  2. Dra tre textrutekomponenter till det adaptiva formuläret. Placera dessa före sidfotskomponenten. Ange följande egenskaper för dessa textrutor.:

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 html-authored no-header
    Egenskap Textruta 1 Textruta 2 Textruta 3
    Titel Namn Leveransadress Läge
    Elementnamn customer_Name customer_Shipping_Address customer_State
    Obligatoriskt fält Aktiverad Aktiverad Aktiverad
    Tillåt flera rader Handikappade Aktiverad Handikappade

  3. Dra en Numeric Box-komponent före sidfotskomponenten. Öppna komponentens egenskaper, ange värden i tabellen nedan, välj aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Egenskap Värde
    Titel Postnummer
    Elementnamn customer_ZIPCode
    Maximalt antal siffror 6
    Obligatoriskt fält Aktiverad
    Visa mönstertyp Inget mönster

  4. Dra en Email-komponent före sidfotskomponenten. Öppna komponentens egenskaper, ange värden i tabellen nedan och välj aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Egenskap Värde
    Titel E-post
    Elementnamn customer_Email
    Obligatoriskt fält Aktiverad

  5. Dra en File Attachment-komponent före sidfotskomponenten. Öppna komponentens egenskaper, ange värden i tabellen nedan och välj aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Egenskap Värde
    Titel Adressbevis som godkänts av myndigheter
    Elementnamn customer_Address_Proof
    Obligatoriskt fält Aktiverad

  6. Dra en Submit Button-komponent till det adaptiva formuläret. Placera den före sidfotskomponenten. Öppna komponentens egenskaper, ändra elementnamn till address_addition_update_submit, välj aem_6_3_forms_save . Formulärets layout är fullständig och formuläret ser ut så här:

    adaptive-form-with-all-the-components

Steg 4: Konfigurera skicka-åtgärd för det adaptiva formuläret step-configure-submit-action-for-the-adaptive-form

En skicka-åtgärd aktiveras när en användare trycker på Skicka-knappen på ett anpassat formulär. Du kan använda en skicka-åtgärd för att spara formulärdata i den lokala databasen, skicka formulärdata till en REST-slutpunkt, skicka formulärdata som e-post och mycket mer. Adaptiva formulär innehåller några fler färdiga åtgärder för att skicka. Mer information finns i Konfigurera åtgärden Skicka.

Med hjälp av följande steg kan du konfigurera e-poståtgärd för att skicka och demo för formuläret:

  1. Konfigurera e-postservern. Mer information finns i Konfigurera e-postmeddelande.

  2. Välj Form Container i innehållsläsaren och välj cmpr . Egenskapsläsaren öppnas till vänster.

  3. Gå till Submission > Submit Action. Välj Send Email. Ange följande värden och välj aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Egenskap Värde
    Från donotreply@weretail.com
    Till ${customer_Email}
    Ämne Bekräftelse: Du har lagt till leveransadress på webbplatsen We.Retail.
    E-postmall Hej ${customer_Name}! Följande adress läggs till som leveransadress för ditt konto:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    Med vänlig hälsning, We.Retail
    Inkludera bifogade filer Aktiverad

    Formuläret är klart. Nu kan du förhandsgranska formuläret och testa funktionen. Om du har använt namnet som nämns i självstudiekursen och har åtkomst till formuläret på datorn som kör AEM Forms, finns formuläret på http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Steg 5: Förhandsgranska och skicka det anpassade formuläret step-preview-and-submit-the-adaptive-form

Du kan använda Preview option för att utvärdera ett formulärs utseende och beteende. Du kan skicka ett formulär i förhandsgranskningsläge och även kontrollera valideringar som används i ett formulär. Om till exempel ett fel visas när ett obligatoriskt fält lämnas tomt.

Med adaptiva formulär kan du också emulera upplevelsen av ett formulär för olika enheter. Exempel: iPhone, iPad och Desktop. Du kan använda alternativen Preview och Emulator linjal tillsammans för att förhandsgranska ett formulär för enheter med olika skärmstorlekar.

  1. Välj alternativet Preview till höger om formulärredigeraren. Formuläret öppnas i förhandsgranskningsläget. Om du har använt namnet som nämns i självstudiekursen är URL:en för förhandsgranskning av formuläret http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Använd linjal om du vill visa hur formuläret ser ut på olika enheter.
  3. Fyll i formulärfälten och välj Submit. Formuläret har skickats och du omdirigeras till standardsidan Tack. Du kan också ange en anpassad tacksida. Mer information finns i Konfigurera omdirigeringssidan.

Det adaptiva formuläret för att lägga till en adress är klart. Om du har använt det namn som anges i självstudiekursen och har åtkomst till formuläret på den dator där AEM Forms-servern körs, finns formuläret på http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

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