Självstudiekurs: Skapa ett anpassat formulär do-not-publish-tutorial-create-an-adaptive-form
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:
Steg 1: Skapa det anpassade formuläret step-create-the-adaptive-form
-
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.
-
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.
-
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.
- Titel: Ange
-
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.
Steg 2: Lägg till sidhuvud och sidfot step-add-header-and-footer
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.
-
Välj
-
Välj Logo. Verktygsfältet visas. Välj
-
Välj Bild. Verktygsfältet visas. Välj
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.
-
Dra Footer-komponenten från
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
-
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 tillcustomer_ID
, aktivera alternativet Required Field, aktivera alternativet Use HTML5 Number Input Type och välj -
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 -
Dra en Numeric Box-komponent före sidfotskomponenten. Öppna komponentens egenskaper, ange värden i tabellen nedan, välj
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 -
Dra en Email-komponent före sidfotskomponenten. Öppna komponentens egenskaper, ange värden i tabellen nedan och välj
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 -
Dra en File Attachment-komponent före sidfotskomponenten. Öppna komponentens egenskaper, ange värden i tabellen nedan och välj
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 -
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
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:
-
Konfigurera e-postservern. Mer information finns i Konfigurera e-postmeddelande.
-
Välj Form Container i innehållsläsaren och välj
-
Gå till Submission > Submit Action. Välj Send Email. Ange följande värden och välj
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.RetailInkludera 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
- 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
- Använd
- 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.